מה חדש ב-Lighthouse 6.0

מדדים חדשים, עדכון לגבי ציון הביצועים, ביקורות חדשות ועוד.

Connor Clark

אנחנו משיקים היום את גרסה 6.0 של Lighthouse!

Lighthouse הוא כלי אוטומטי לבדיקת אתרים עוזר למפתחים לקבל הזדמנויות וניתוחים כדי לשפר את חוויית המשתמש באתרים שלהם. היא זמינה בכלי הפיתוח ל-Chrome, ב-npm (כמודול Node וב-CLI), או כתוסף לדפדפן (ב- Chrome ו Firefox). הוא מפעיל הרבה שירותי Google שירותים, כולל web.dev/measure ו-PageSpeed תובנות.

Lighthouse 6.0 זמין באופן מיידי ב-NPM וב-Chrome גרסה ראשונית. שירותי Google אחרים שמשתמשים ב-Lighthouse את העדכון עד סוף החודש. היא תגיע לגרסה היציבה של Chrome בגרסה 84 של Chrome (אמצע יולי).

כדי לנסות את ה-CLI של Lighthouse Node, משתמשים בפקודות הבאות: bash npm install -g lighthouse lighthouse https://www.example.com --view

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

• מדדים חדשים
• עדכון של ציון הביצועים
• ביקורות חדשות
• Lighthouse CI
• השם של החלונית של כלי הפיתוח ל-Chrome השתנה
• אמולציה לנייד
• תוסף לדפדפן
• תקציבים
• קישורים למיקום של המקור
• מאופק
• תודה!

מדדים חדשים

הוספנו לדוח שלושה מדדים חדשים ב-Lighthouse 6.0. שניים מהמדדים החדשים האלה – הגדול ביותר מדד ה-Contentful Paint (LCP) ו-Cumulative Layout Shift (CLS) – הם הטמעות שיעורי Lab של אינטרנט ליבה תפקוד האפליקציה.

Largest Contentful Paint (LCP)

המהירות שבה נטען רכיב התוכן הכי גדול (LCP) היא מדידה של שיעור הטעינה הנתפסת חוויה אישית. היא מסמנת את הנקודה במהלך טעינת הדף שבה התוכן הראשי או ה'גדול ביותר' נטען גלוי למשתמש. מדד LCP הוא השלמה חשובה ל-First Contentful Paint (FCP), שרק מתעד את ההתחלה של תהליך הטעינה. LCP מספק למפתחים אות לגבי האופן שבו מהר מאוד, משתמש יכול בפועל לראות את התוכן של דף. ציון LCP נמוך מ-2.5 שניות הוא נחשב ל'טוב'.

למידע נוסף, אפשר לצפות בסקירה המפורטת הזו על LCP מאת Paul Ireland.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) היא מדידה של היציבות החזותית. הוא מכמת את מידת השינוי החזותי של תוכן הדף. ציון CLS נמוך הוא סימן ל מפתחים שהמשתמשים שלהם לא חווים שינויי תוכן לא חוקיים. ציון CLS נמוך מ-0.10 נחשב ל'טוב'.

ערך CLS בסביבה של שיעור Lab נמדד עד לסיום טעינת הדף. אבל בשדה אפשר למדוד את ה-CLS עד לאינטראקציה הראשונה של המשתמש או כולל כל הקלט של המשתמשים.

מידע נוסף זמין בסקירה המפורטת הזו על CLS של אנני סאליבן.

זמן החסימה הכולל (TBT)

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

בנוסף, TBT תואם היטב למדד השדה עיכוב קלט ראשון. (FID), שהוא מדד ליבה לבדיקת חוויית המשתמש באתר.

עדכון של ציון הביצועים

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

אמנם נוספו שלושה מדדים חדשים, אבל שלושה מדדים ישנים הוסרו: 'הצבע המשמעותי הראשון', חוסר פעילות של המעבד (CPU) הראשון ו-FID פוטנציאלי מקסימלי. המשקלים של שאר המדדים השתנו ל- להדגיש את האינטראקטיביות של ה-thread הראשי ואת יכולת החיזוי של הפריסה.

לשם השוואה, הנה הציון של גרסה 5:

הנה כמה מהשינויים הבולטים בשינויים בניקוד בין גרסה 5 ו-6 של Lighthouse:

• המשקל של TTI ירד מ-33% ל-15%. זו הייתה תגובה ישירה למשתמש משוב לגבי שונות ה-TTDI, כמו גם חוסר עקביות באופטימיזציות של מדדים, שמובילות שיפורים בחוויית המשתמש. מדד 'דברים שאפשר לעשות' (TTI) הוא עדיין סימן שימושי למקרים שבהם הדף מלא אבל בעזרת TBT המגוון הולך ופוחת. בעקבות השינוי הזה בציון, אנחנו מקווים שמפתחים יעודדו את המפתחים לבצע אופטימיזציה בצורה יעילה יותר האינטראקטיביות של המשתמשים.
• המשקל של FCP ירד מ-23% ל-15%. מדידה רק כשהפיקסל הראשון הוא Painted (FCP) לא סיפק לנו תמונה מלאה. שילוב עם מדידה של מתי משתמשים יכולים כדי לראות מה שחשוב להם (LCP) משקף טוב יותר את חוויית הטעינה.
• המדד Max Potential FID הוצא משימוש. הוא לא מופיע יותר בדוח, אבל עדיין זמינות בקובץ ה-JSON. עכשיו מומלץ לעיין בנתונים של TBT כדי לכמת את האינטראקטיביות במקום mpFID.
• המודל 'שלב ראשון משמעותי' הוצא משימוש. המדד הזה היה וריאנט מדי ולא היה מעשי נתיב לסטנדרטיזציה כי ההטמעה היא ספציפית לרינדור פנימי ב-Chrome. בזמן יש צוותים לדעת שתזמון ה-FMP משתלם באתר שלהם, המדד לא יקבל שיפורים נוספים.
• First CPU Idle הוצא משימוש כי הוא לא ייחודי מספיק מ-TTI. TBT ו-TTI הם המדדים המובילים לאינטראקטיביות.
• המשקל של CLS נמוך יחסית, אם כי אנחנו צופים להעלות אותו בגרסה ראשית עתידית.

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

איך השינויים האלה משפיעים על הציונים באתרים אמיתיים? פרסמנו ניתוח של הציונים משתנה באמצעות שני מערכי נתונים: קבוצה כללית אתרים וגם קבוצת אתרים סטטיים נוצר באמצעות Eleventy. לסיכום, כ-20% מהאתרים רואים עלייה משמעותית ב בכ-30% כמעט אין שינוי, ובכ-50% רואים ירידה של חמש נקודות לפחות.

אפשר לפצל את השינויים בציון לשלושה רכיבים עיקריים:

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

שינויים במשקל הציון והשקה של שלושה מדדים חדשים הניבו את רוב הציון הכולל שינויים. מדדים חדשים שמפתחים עדיין לא ביצעו אופטימיזציה כדי לשמור על משקל משמעותי בגרסה 6 או דירוג הביצועים. ציון הביצועים הממוצע של קורפוס המבחן בגרסה 5 היה בערך 50, אבל הציונים הממוצעים במדדים החדשים 'זמן חסימה כולל' ו'המהירות שבה נטען רכיב התוכן הכי גדול (LCP)' היו בערך 30. שני המדדים האלה מהווים 50% מהמשקל בציון הביצועים של גרסה 6 של Lighthouse, כך שבאופן טבעי, אחוז גדול מהאתרים ראו ירידה.

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

שינויים בעקומה של התוצאות האישיות השפיעו גם על השינויים בציונים הכוללים, אם כי מעט מאוד. רביעי מוודאים שמדי פעם עקומת הציון תואמת למדדים המתועדים ב-HTTPArchive של הכיתובים. לא כולל אתרים שהושפעו משינויים משמעותיים ביישום, קלים התאמות של עקומת הציון עבור מדדים נפרדים שיפרו את הציונים של כ-3% מהאתרים ירידה בציונים של כ-4% מהאתרים. כ-93% מהאתרים לא הושפעו מהשינוי הזה.

מחשבון ניקוד

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

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

JavaScript שאינו בשימוש

אנחנו משתמשים בקוד של כלי הפיתוח כיסוי בביקורת חדשה: לא בשימוש JavaScript.

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

ביקורות בנושא נגישות

Lighthouse משתמש בספריית הגרעין הנפלאה כדי להפעיל קטגוריית נגישות. הוספנו את הביקורות הבאות ב-Lighthouse 6.0:

• aria-מוסתר-body
• התמקדות באריה-מוסתרת
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• כותרת-סידור
• Multi-id-active
• כפילות-id-aria

סמל של מסכה

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

הצהרה על ערכת תווים

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

Lighthouse CI

ב-CDS בנובמבר שעבר הכרזנו על Lighthouse CI, צומת הקוד הפתוח CLI ושרת שעוקבים אחרי תוצאות של Lighthouse בכל התחייבות באינטגרציה הרציפה והתקדמנו מאוד מאז מהדורת האלפא. עכשיו יש תמיכה ב-Lighthouse CI עבור מספר רב של ספקי CI, כולל Travis, Circle, GitLab ו-GitHub Actions. מוכן לפריסה קובצי אימג' של docker מגדירים מאוד, והעיצוב המקיף של מרכז הבקרה חושף עכשיו מגמות בכל קטגוריה ומדד ב-Lighthouse לצורך ניתוח מפורט.

כדי להתחיל להשתמש ב-Lighthouse CI בפרויקט עוד היום, צריך לפעול לפי המדריך לתחילת העבודה.

השם של החלונית של כלי הפיתוח ל-Chrome השתנה

שינינו את השם של החלונית Audits, לחלונית Lighthouse. כבר אמרת את זה!

בהתאם לגודל החלון של כלי הפיתוח, כנראה שהחלונית נמצאת מאחורי הלחצן ». אפשר לגרור כדי לשנות את הסדר.

כדי לחשוף את החלונית במהירות באמצעות הפקודה תפריט:

1. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. מקישים על Control+Shift+P (או על Command+Shift+P ב-Mac) כדי פותחים את התפריט Command.
3. מתחילים להקליד "Lighthouse".
4. מקישים על Enter.

אמולציה של נייד

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

• הדמיה של תנאים של רשת איטית ותנאי מעבד (CPU) (באמצעות מנוע סימולציה שנקרא פנס).
• אמולציית מסך במכשיר (אותה אפשרות קיימת בכלי הפיתוח ל-Chrome).

מאז תחילת הדרך, Lighthouse השתמש ב-Nexus 5X כמכשיר עזר. בשנים האחרונות, רוב מהנדסי ביצועים משתמשים ב-Moto G4 למטרות בדיקה. עכשיו, במסגרת Lighthouse והוא שינה את מכשיר העזר שלו ל-Moto G4. בפועל, השינוי הזה לא בולט מאוד, אבל אלה כל השינויים שאפשר לזהות לפי דף אינטרנט:

• גודל המסך השתנה מ-412x660 פיקסלים ל-360x640 פיקסלים.
• מחרוזת סוכן המשתמש השתנתה מעט, החלק של המכשיר שהיה לפני כן Nexus 5 Build/MRA58N יהיה Moto G (4) עכשיו.

החל מגרסה 81 של Chrome, Moto G4 זמין גם ברשימת האמולציה של מכשירי Chrome בכלי הפיתוח.

תוסף לדפדפן

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

במקום להפעיל את Lighthouse באופן מקומי, התוסף משתמש עכשיו ב-PageSpeed Insights API. אנחנו מבינים שהפעולה הזו לא יכול להיות תחליף מספק לחלק מהמשתמשים שלנו. אלה ההבדלים העיקריים:

• PageSpeed Insights לא יכול לבדוק אתרים שאינם גלויים לכולם כי הוא מופעל באמצעות שלט רחוק בשרת ולא במופע המקומי של Chrome. אם אתה צריך לבדוק אתר לא ציבורי, השתמש החלונית Lighthouse של כלי הפיתוח או ה-CLI של Node.
• לא מובטח ששירות PageSpeed Insights ישתמש בגרסה האחרונה של Lighthouse. אם רוצים להשתמש בגרסה העדכנית ביותר, צריך להשתמש ב-Node CLI. תוסף הדפדפן יקבל את העדכון כשבוע-שבועיים לאחר ההשקה.
• PageSpeed Insights הוא ממשק API של Google, שבו הוא מאשר את התנאים של Google API שירות. אם אינך רוצה או לאשר את התנאים וההגבלות, אפשר להשתמש בחלונית Lighthouse של כלי הפיתוח. או באמצעות Node CLI.

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

תקציבים

ב-Lighthouse 5.0 נוספו תקציבי ביצועים, תמיכה בהוספת ערכי סף עבור כמות המשאבים מכל סוג משאב (כמו סקריפטים, תמונות או CSS) שדף יכול להציג.

הוספה של Lighthouse 6.0 תמיכה במדדי תקציב, כך שעכשיו אפשר להגדיר ערכי סף למדדים ספציפיים כמו FCP. כרגע, התקציבים זמינים רק ל-Node CLI ול-Lighthouse CI.

קישורים למיקום המקור

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

באופק

חברת Lighthouse התחילה לנסות לאסוף מפות מקור כדי להפעיל תכונות חדשות, כמו:

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

התכונות האלה יופעלו כברירת מחדל בגרסה עתידית של Lighthouse. בינתיים, אפשר להציג ביקורות ניסיוניות של Lighthouse עם הדגל הבא של CLI:

lighthouse https://web.dev --view --preset experimental

תודה!

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

מה אפשר לעשות עכשיו?

• פותחים את Chrome Canary ובודקים את החלונית Lighthouse.
• שימוש ב-CLI של הצומת: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• הפעלת Lighthouse CI עם בפרויקט שלכם.
• ניתן לעיין במסמכי הביקורת של Lighthouse.
• תיהנו משיפור האינטרנט!

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