הזדמנויות לשיפור הביצועים באמצעות Lighthouse

Kayce Basques

Lighthouse הוא כלי שעוזר למדוד את הביצועים של דף ולמצוא דרכים לשיפורם. זהו תהליך העבודה הכללי ב-Lighthouse:

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

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

הפעלת Lighthouse מדף הפרופיל

מריצים את Lighthouse מדף הפרופיל ב-web.dev:

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

2. בודקים את דוח הביקורות כדי לזהות תחומים שבהם אפשר לשפר את הדף.

3. בכל ביקורת תמצאו הנחיות ושלבים מיידיים שאפשר לבצע כדי לשפר את הציונים.

הפעלת Lighthouse מכלי הפיתוח ל-Chrome

כלי הפיתוח של Chrome הם קבוצה של כלים למפתחי אתרים שמובְנים ישירות בדפדפן Google Chrome. אין צורך להוריד דבר כדי לקבל את כלי הפיתוח. אם יש לכם את Chrome, סימן שיש לכם גם את DevTools.

1. ב-Chrome, עוברים לדף שרוצים לבדוק.
2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.

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

1. מוודאים שנבחר לחצן הבחירה נייד. במהלך הביקורת של Lighthouse בדף, המערכת תיצור סימולציה של שדה התצוגה (viewport) ומחרוזת סוכן המשתמש של מכשיר נייד.
2. מוודאים שהתיבה ביצועים מסומנת. אפשר להפעיל או להשבית את שאר תיבות הסימון בקטע בדיקות. אם תפעילו אותן, תוכלו לראות כמה הזדמנויות לשיפור ההיבטים האחרים האלה של הדף.
3. מוודאים שבוחרים באפשרות סימולציה של 3G מהיר, האטה פי 4 במהירות התגובה של המעבד (CPU). Lighthouse לא מגביל את הרשת או את המעבד בזמן הטעינה של הדף. במקום זאת, המערכת בודקת כמה זמן חלף עד שהדף נטען בתנאים רגילים, ואז היא מעריכה כמה זמן היה עובר עד שהדף נטען ברשת 3G מהירה עם מעבד (CPU) שמספק פי 4 פחות כוח מאשר המעבד של המחשב שלכם.
4. מוודאים שהתיבה Clear Storage מסומנת. האפשרות הזו מאלצת את Lighthouse לגשת לרשת לכל משאב בדף, וכך המבקרים בפעם הראשונה חווים את הדף.
5. לוחצים על הרצת ביקורות. אחרי 5 עד 10 שניות, יוצג לכם דוח ב-Lighthouse.

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

הסבר על הדוח

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

מעבירים את העכבר מעל מדד כדי לקבל מידע נוסף עליו. לוחצים על מידע נוסף כדי לקרוא את המסמכים בנושא.

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

מתחת לצילום המסך מוצגות הזדמנויות לשיפור הביצועים של הדף.

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

השלבים הבאים

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

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