זיהוי JavaScript איטי של צד שלישי

אפשר לשפר את הכישורים בחקר ביצועים בעזרת Lighthouse וכלי הפיתוח ל-Chrome.

Milica Mihajlija

למפתחים, לעיתים קרובות אין לכם שליטה על הסקריפטים של צד שלישי שהאתר שלכם טוען. לפני שתוכלו לבצע אופטימיזציה של תוכן של צד שלישי, עליכם לבצע עבודת חקירה כדי לברר מה גורם לאתר להאט. 🕵️

בפוסט הזה נסביר איך להשתמש ב-Lighthouse ובכלי הפיתוח ל-Chrome כדי לזהות משאבים איטיים של צדדים שלישיים. הפוסט מציג טכניקות מתקדמות יותר לשימוש משולב בהן.

אם יש לכם רק 5 דקות

בדיקת הביצועים של Lighthouse עוזרת לכם לגלות הזדמנויות לזרז את טעינת הדפים. סקריפטים איטיים של צד שלישי צפויים להופיע בקטע אבחון בקטע קצר את זמן הביצוע של JavaScript והימנע מבדיקות רשת עצומות של מטענים ייעודיים (payloads).

כדי להפעיל ביקורת:

1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה Lighthouse.
3. לוחצים על נייד.
4. מסמנים את התיבה ביצועים. (אפשר למחוק את שאר התיבות בקטע 'ביקורות'.)
5. לוחצים על Simulated Fast 3G, 4x CPU Slowdown.
6. מסמנים את התיבה פינוי נפח אחסון.
7. לוחצים על הרצת ביקורות.

שימוש של צד שלישי

בביקורת בנושא שימוש מצד שלישי של Lighthouse מוצגת רשימה של ספקי הצד השלישי שבהם משתמשים בדף מסוים. הסקירה הכללית הזו יכולה לעזור לכם להבין טוב יותר את התמונה הכוללת ולזהות קוד מיותר של צד שלישי. הביקורת זמינה בתוסף של Lighthouse, ובקרוב תתווסף לכלי הפיתוח ב-Chrome 77.

שמות של ספקי צד שלישי שנוצרו באמצעות מחולל לסטארט-אפים. כל דמיון לחברות סטארט-אפ, חיות או מתות, הוא מקרי לחלוטין.

קיצור זמן הביצוע של JavaScript

הביקורת של Lighthouse צמצום זמן הביצוע של JavaScript מדגישה סקריפטים שהניתוח, ההידור או ההערכה שלהם ממושך. סמן את התיבה הצג משאבים של צד שלישי כדי לגלות סקריפטים של צד שלישי שצורכים הרבה משאבי מעבד (CPU).

הימנעות ממטענים ייעודיים (payloads) עצומים ברשת

הבדיקה של Lighthouse מבקשות מטענים ייעודיים (payloads) עצומים ברשת מזהה בקשות ברשת, כולל בקשות מצד שלישי, שעלולות להאט את זמן הטעינה של הדפים. הבדיקה נכשלת כשהמטען הייעודי (payload) של הרשת חורג מ-4,000KB.

חסימת בקשות רשת בכלי הפיתוח ל-Chrome

חסימת בקשות רשת של כלי הפיתוח ל-Chrome מאפשרת לראות איך הדף פועל כשסקריפט, גיליון סגנונות או משאב אחר אינם זמינים. לאחר שתזהו סקריפטים של צד שלישי שלדעתכם משפיעים על הביצועים שלהם, בדקו איך זמן הטעינה משתנה על ידי חסימת הבקשות לסקריפטים האלה.

כדי להפעיל חסימת בקשות: 1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח. 1. לוחצים על הכרטיסייה רשתות. 1. לוחצים לחיצה ימנית על בקשה כלשהי בחלונית רשת. 1. בוחרים באפשרות חסימת כתובת ה-URL של הבקשה.

הכרטיסייה בקשת חסימה תופיע בחלונית ההזזה של כלי הפיתוח. שם אפשר לקבוע אילו בקשות נחסמו.

כדי למדוד את ההשפעה של סקריפטים של צד שלישי:

1. ניתן למדוד את משך הטעינה של הדף באמצעות החלונית רשת. כדי לחקות תנאים בעולם האמיתי, מפעילים את האפשרויות ויסות רשת (Network throttling) ו-ויסות נתונים של מעבד (CPU). (בחיבורים מהירים יותר ובחומרה למחשב, ייתכן שההשפעה של סקריפטים יקרים לא תהיה זהה להשפעה שתהיה בטלפון נייד).
2. צריך לחסום את כתובות ה-URL או הדומיינים שאחראים לסקריפטים של צד שלישי שלדעתכם יש בהם בעיה.
3. עליך לטעון מחדש את הדף ולמדוד מחדש את משך הטעינה ללא הסקריפטים החסומים של צד שלישי.

אני מקווה שהדבר יגרום לשיפור במהירות, אבל לפעמים החסימה של סקריפטים של צד שלישי לא תניב את ההשפעה הצפויה. במקרה כזה, מצמצמים את רשימת כתובות ה-URL החסומות עד שמבודדים את זו שגורמת לאיטיות.

שימו לב: אם תבצעו שלוש רצפי מדידה או יותר ותבחנו את ערכי החציון, סביר להניח שתשיגו תוצאות יציבות יותר. מאחר שתוכן של צד שלישי יכול מדי פעם למשוך משאבים שונים בכל טעינת דף, הגישה הזו יכולה לספק לכם הערכה מציאותית יותר. כלים למפתחים תומכים עכשיו במספר הקלטות בחלונית ביצועים כדי שיהיה קל יותר לבצע את הפעולה.