Lighthouse הוא כלי שעוזר לכם למדוד את הביצועים של דף ולמצוא דרכים לשפר אותו. זה תהליך העבודה הכללי לשימוש ב-Lighthouse:
- מורים ל-Lighthouse איזה דף לבדוק.
- מערכת Lighthouse טוענת את הדף ומתעדת כמה זמן עובר עד שהדף מגיע לציוני דרך שונים בביצועים. אבני הדרך האלה נקראות metrics.
- Lighthouse מאפשר לכם לדווח על ביצועי הדף. הדוח מספק ציון לכל מדד ורשימה של הזדמנויות, שאם תיישמו אותן, הטעינה של הדף תהיה מהירה יותר.
המשימה היא לשפר את ציוני המדדים לאורך זמן, או לפחות לוודא שהם לא יחמירו. עם זאת, אין דרך לעבוד על מדדים באופן ישיר. במקום זאת, אתם פועלים בהתאם להזדמנויות שמספקות Lighthouse. עבודה על ההזדמנויות האלה נוטה לשפר את ציוני המדדים.
הפעלת Lighthouse מדף הפרופיל שלך
מריצים את Lighthouse מהדף פרופיל web.dev:
אם מספקים כל כתובת URL, מערכת Lighthouse מריצה סדרה של ביקורות שמפיקות דוח לגבי ביצועי הדף.
עיינו בדוח הביקורת כדי לזהות תחומים שבהם אפשר לשפר את הדף שלכם.
בכל ביקורת יוצגו הנחיות וצעדים מיידיים שתוכלו לבצע כדי לשפר את הציונים שלכם.
הפעלת Lighthouse מ-Chrome DevTools
כלי הפיתוח ל-Chrome הוא קבוצת הכלים למפתחי אתרים שמובנית ישירות בדפדפן Google Chrome. לא צריך להוריד דבר כדי לקבל את כלי הפיתוח. אם יש לכם Chrome, יש לכם כלי פיתוח.
- ב-Chrome, עוברים לדף שרוצים לבדוק.
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
לוחצים על הכרטיסייה ביקורות. אם הכרטיסייה הזו לא מופיעה, לוחצים על הסמל » ובוחרים באפשרות Audits מתוך הרשימה. Lighthouse הוא המנוע שמפעיל את החלונית Audits. לכן רואים תמונה של מגדלור.
- מוודאים שלחצן הבחירה נייד מסומן. כשמערכת Lighthouse בודקת את הדף, היא מדמה את אזור התצוגה של מכשיר נייד ואת מחרוזת סוכן המשתמש.
- מוודאים שתיבת הסימון ביצועים מופעלת. אפשר להפעיל או להשבית את שאר תיבות הסימון בקטע Audits. אם תפעילו אותם, תראו מגוון הזדמנויות לדרכים לשיפור ההיבטים האחרים בדף.
- מוודאים שלחצן הבחירה Simulated Fast 3G, 4x CPU Slowdown מסומן. Lighthouse לא מווסת את הרשת או המעבד (CPU) בזמן טעינת הדף. במקום זאת, הוא בודק את משך זמן הטעינה של הדף בתנאים רגילים, ואז הוא מעריך כמה זמן היה דרוש ברשת 3G מהירה עם מעבד (CPU) חזק פי 4 ממהירות המחשב.
- מוודאים שתיבת הסימון פינוי נפח אחסון מופעלת. האפשרות הזו מאלצת את Lighthouse לעבור לרשת עבור כל משאב של דף, כלומר האופן שבו מבקרים בפעם הראשונה חווים את הדף.
- לוחצים על Run Audits. לאחר 5 עד 10 שניות, מערכת Lighthouse מציגה דוח.
לדוגמה, אם אתם מריצים ביקורות מסוימות עם Simulated Fast 3G, 4x CPU Slowdown throttling ולאחר מכן להריץ ביקורות עם ויסות נתונים מושבת, הציון במדדים שלכם יהיה נמוך יותר באופן משמעותי כשמפעילים ויסות נתונים. יכול להיות שאתם משקיעים הרבה זמן בניסיון להבין למה הדף איטי הרבה יותר עכשיו, כשבפועל הדבר היחיד שהשתנה הייתה התצורה שלכם.
הסבר על הדוח
בפינה השמאלית העליונה של הדוח מוצג ציון הביצועים הכולל. 100 הוא דירוג מושלם. מתחת לניקוד הכולל מופיעים ציוני המדדים. במדריך למתן ציונים של Lighthouse בגרסה 3 מוסבר איך הציון של כל מדד תורם לציון הכולל.
מעבירים את העכבר מעל מדד כדי לקבל מידע נוסף לגביו. לחצו על למידע נוסף כדי לקרוא מסמכים בנושא.
מתחת לציוני המדדים מופיעים צילומי מסך של איך נראה הדף בזמן שהוא נטען.
מתחת לצילומי המסך, מופיעות הזדמנויות לשיפור הביצועים של הדף.
לוחצים על הזדמנות כדי לקבל מידע נוסף לגביה.
השלבים הבאים
אפשר להשתמש ב-Lighthouse כדי לבדוק את הדף, מדף הפרופיל או מכלי הפיתוח ל-Chrome. מיישמים אחת מההזדמנויות ולאחר מכן בדקו שוב את הדף כדי לראות איך השינוי השפיע על הדוח. באופן אידיאלי, הציונים במדדים שלכם אמורים להיות קצת יותר טובים, ו-Lighthouse כבר לא יסמן את ההזדמנות הזו כנושא לעבוד עליו.
אם תפעילו את Lighthouse באופן עצמאי, זה פתרון מעולה לבעיות בבדיקת הכתמים, אבל בסופו של דבר כדאי להגדיר מעקב רציף כדי לוודא שהאתר שלכם תקין. כדי לעקוב אחרי ההתקדמות ב-Lighthouse לאורך זמן, צריך להוסיף את האתר לפרופיל.