מה חדש ב-Lighthouse 10

Brendan Kenny
Brendan Kenny

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

Lighthouse 10 זמין באופן מיידי בשורת הפקודה עד Npm וב-Chrome Canary. הוא יגיע לגרסה יציבה של Chrome ב-Chrome 112 וב-PageSpeed Insights בשבועות הקרובים.

שינויים בניקוד

אנחנו מסירים את המדד המפורסם Time To Interactive (TTI) ב-Lighthouse 10, ומתווסף לתהליך ההוצאה משימוש שהתחיל ב-Lighthouse 8. משקל הציון של 10% ב-TTI עובר ל-Cumulative Layout Shift (CLS), שיהווה עכשיו 25% מציון הביצועים הכולל.

TTI מסמן נקודה בזמן, אבל אופן ההגדרה הופך אותה לרגישות מדי לבקשות רשת חיצוניות ולמשימות ארוכות. המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ואינדקס המהירות בדרך כלל מספקים נתונים טובים יותר לגבי טעינה של תוכן הדף, בהשוואה למספר בקשות הרשת הפעילות. זמן חסימה כולל (TBT) בינתיים, הטיפול במשימות ארוכות ובזמינות של ה-thread הראשי נעשה בצורה יעילה יותר, למרות שלא מדובר בשרת proxy ישיר, אבל יש התאמה טובה יותר למדדי ליבה לבדיקת חוויית המשתמש באתר כפי שנמדדים בשדה.

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

אנחנו צופים שהדבר ישפר את ציוני הביצועים של רוב הדפים, כי רוב הדפים נוטים לקבל ציון טוב יותר ב-CLS בהשוואה ל-TTI. בניתוח של 13 מיליון דפים בהפעלה האחרונה של ארכיון HTTP, נמצא ש-90% מהדפים האלה הבחינו בשיפור בציון הביצועים של Lighthouse, ו-50% מהם הבחינו בשיפור בביצועים של יותר מ-5 נקודות.

מד ציון של Lighthouse, שמפולח לפי המדדים (FCP, SI, LCP, TBT ו-CLS) שמהם מורכב הציון הכולל

אם מסיבה כלשהי עדיין יש צורך בערך TTI של Lighthouse (לדוגמה, בטענת CI), הוא עדיין זמין ללא שינוי בפלט ה-JSON של Lighthouse, רק עם ציון משקל של 0 והוא מוסתר בדוח ה-HTML. כל גישה באמצעות סקריפטים לערך ה-JSON אמורה להמשיך לפעול ללא שינויים.

ביקורות חדשות

Lighthouse 10 מספק ביקורת חדשה לחלוטין של הביצועים ושינוי משמעותי בדוגמה אחרת.

מטמון לדף הקודם/הבא

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

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

דוגמה לתוצאה מביקורת של המטמון לדף הקודם/הבא, הצגת רשימה של כשלים כתוצאה מחיבור IndexDB פתוח והסרת רכיבי handler שנטענו בדף

למידע נוסף, אפשר לעיין במסמכי הביקורת של bfcache.

שיטות קלט שמונעות הדבקה

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

הביקורת החדשה נקראת עכשיו "משתמשים יכולים להדביק בשדות להזנת קלט" (paste-preventing-inputs).

משתמשי צומת

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

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

סקריפט של צומת שמייבא את Lighthouse כפונקציה, שמדגים שאובייקט האפשרויות שמועבר אל הפונקציה מסומן עכשיו על ידי TypeScript

אפשר לנסות את הסוגים ולהודיע לנו אם נתקלת בבעיות בשימוש בהם.

מגדלור ריצה

Lighthouse זמין ב-Chrome DevTools, ב-npm (כמודול צומת וכלי CLI) וכתוסף לדפדפן (ב-Chrome וב-Firefox). הוא גם מפעיל מספר שירותים של Google, כולל PageSpeed Insights.

כדי לנסות את Lighthouse Node CLI, משתמשים בפקודות הבאות:

npm install -g lighthouse
lighthouse https://www.example.com --view

יצירת קשר עם הצוות של Lighthouse

כדי לדון בתכונות החדשות, בשינויים בגרסה 10 של Lighthouse או בכל נושא אחר שקשור ל-Lighthouse: