Lighthouse הוא כלי לבדיקת אתרים שעוזר למפתחים לזהות הזדמנויות ואבחונים לשיפור חוויית המשתמש באתרים שלהם.
Lighthouse 10 זמין באופן מיידי בשורת הפקודה דרך npm וב-Chrome Canary. התכונה תגיע לגרסה היציבה של Chrome בגרסה 112 וב-PageSpeed Insights בשבועות הקרובים.
שינויים בסכימה למתן ציונים
המדד הוותיק זמן לאפשרות אינטראקציה (TTI) יוסר ב-Lighthouse 10, כחלק מתהליך ההוצאה משימוש שהחל ב-Lighthouse 8. משקל הציון של TTI (10%) מועבר ל-Cumulative Layout Shift (CLS), שייחשב מעכשיו ל-25% מתוך ציון הביצועים הכולל.
המדד TTI מציין נקודה בזמן, אבל האופן שבו הוא מוגדר הופך אותו לרגיש מדי לבקשות חריגות מהרשת ולמשימות ארוכות. בדרך כלל, Largest Contentful Paint (LCP) ו-Speed Index הם שיטות ניתוח חזקות יותר לתחושה של טעינה של תוכן הדף מאשר ספירת הבקשות הפעילות לרשת. לעומת זאת, זמן החסימה הכולל (TBT) מטפל במשימות ארוכות ובזמינות של ה-thread הראשי בצורה חזקה יותר, והוא אמנם לא מדד עקיף, אבל יש לו קורלציה טובה יותר עם הנתונים הבסיסיים על חוויית המשתמש (Core Web Vitals) כפי שנמדדים בשטח.
המשקל המוגבר של CLS הוא תופעה נלווית להסרת TTI, אבל הוא משקף טוב יותר את החשיבות שלו כמדד Core Web Vitals, ובאופן אידיאלי יעזור לכם להתמקד באתרים שעדיין מבצעים שינויי פריסה מיותרים.
אנחנו צופים שהשינוי הזה ישפר את ציוני הביצועים של רוב הדפים, כי רוב הדפים נוטים לקבל ציון גבוה יותר במדד CLS מאשר במדד TTI. בניתוח של 13 מיליון טעינות דפים במהלך ההרצה האחרונה של HTTP Archive, 90% מהדפים האלה יהיו עם שיפור בציון הביצועים של Lighthouse, ו-50% מהם יהיו עם שיפור בביצועים של יותר מ-5 נקודות.
אם מסיבה כלשהי אתם עדיין צריכים את הערך של TTI ב-Lighthouse (לדוגמה, בטענת נכוֹנוּת ב-CI), הוא עדיין זמין ללא שינוי בפלט ה-JSON של Lighthouse, רק עם משקל ניקוד 0 והוא מוסתר בדוח ה-HTML. כל גישה לפי סקריפט של ערך ה-JSON אמורה להמשיך לפעול ללא שינויים.
ביקורות חדשות
ב-Lighthouse 10 יש ביקורת ביצועים חדשה לגמרי ושינוי משמעותי בביקורת אחרת.
מטמון לדף הקודם/הבא
המטמון לדף הקודם/הבא (bfcache) הוא אחד הכלים החזקים ביותר שזמינים לשיפור הביצועים של דף למשתמשים אמיתיים. מעבר למטמון הרגיל של הדפדפן, דף שנטען מ-bfcache ישחזר את פריסת הדף ואת מצב הביצוע שלו כמעט באופן מיידי, וידלג על רוב הפעילות של טעינת הדף, כך שהדף יוצג למשתמשים באופן מיידי כשהם מנווטים אחורה וקדימה בהיסטוריה שלהם.
עם זאת, יש כמה דרכים שבהן דף יכול למנוע מהדפדפן לשחזר דף מהמטמון לדף הקודם/הבא. בבדיקה החדשה של Lighthouse, הדף ננטש וחוזרים אליו כדי לבדוק אם אפשר לשמור אותו במטמון bfcache, ומפורטים הסיבות אם הבדיקה נכשלת.
מידע נוסף זמין במסמכי התיעוד של ביקורת bfcache.
נתוני קלט שחוסמים הדבקה
הביקורת הקודמת של השיטות המומלצות 'משתמשים יכולים להדביק תוכן מועתק לתוך שדות של סיסמאות' הורחבה, וכעת היא כוללת בדיקה של היכולת להדביק בכל שדה קלט (שאינו לקריאה בלבד). ברוב האתרים, מניעת הדבקה גורמת לחוויית משתמש שלילית בסך הכול, ומונעת תהליכי עבודה לגיטימיים של בטיחות ונגישות.
הביקורת החדשה היא 'משתמשים יכולים להדביק בשדות להזנת קלט' (paste-preventing-inputs).
משתמשי צומת
אם אתם משתמשים ב-Lighthouse כספריית Node, יש כמה שינויים תוכנות משמעותיים במהדורה הזו שצריך לקחת בחשבון. פרטים מלאים זמינים ביומן השינויים של גרסה 10.0.
ב-Lighthouse 10 יש גם הצהרות מלאות על סוגי TypeScript! עכשיו צריך להקליד כל דבר שייבא מ-lighthouse. האפשרות הזו שימושית במיוחד אם אתם כותבים סקריפטים לתהליכי משתמש ב-Lighthouse.
נסו את הסוגים השונים ותודיעו לנו אם נתקלתם בבעיות בשימוש בהם.
הפעלת Lighthouse
Lighthouse זמין ב-Chrome DevTools, ב-npm (כמודול Node וככלי CLI) וכתוסף לדפדפן (ב-Chrome וב-Firefox). הוא גם מניע כמה שירותי Google, כולל PageSpeed Insights.
כדי לנסות את ה-CLI של Lighthouse Node, משתמשים בפקודות הבאות:
npm install -g lighthouse
lighthouse https://www.example.com --view
יצירת קשר עם צוות Lighthouse
כדי לדון בתכונות החדשות, בשינויים בגרסה 10 של Lighthouse או בכל דבר אחר שקשור ל-Lighthouse:
- אפשר לדווח על בעיה או לשלוח משוב בכלי למעקב אחר בעיות ב-GitHub של Lighthouse.
- אפשר לשאול שאלות בפורומים של Lighthouse ב-GitHub.
- אפשר לפנות לצוות Lighthouse ב-Twitter @____lighthouse.