מה חדש ב-PageSpeed Insights

ניתן לעיין במידע העדכני ביותר ב-PageSpeed Insights כדי לשפר את המדידה של ביצועי הדף והאתר ולבצע אופטימיזציה שלהם.

Addy Osmani

Elizabeth Sweeny

Leena Sohoni

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

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

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

בפוסט הזה נציג את התכונות החדשות ב-PSI, שיושקו בהמשך השנה.

מה חדש?

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

הפרדה בין נתוני שדה ונתוני מעבדה

שינינו את ממשק המשתמש כדי להפריד באופן מובהק בין נתוני השדות לבין נתוני שיעור ה-Lab. התוויות של "Field Data" ו-"Lab" הוחלפו בטקסט שמציין את משמעות הנתונים וכיצד הם יכולים לעזור. הוספנו גם את הקטע 'נתוני שדות' למעלה. ציון הביצועים המסורתי שמבוסס על שיעור Lab, שמוצג כרגע בחלק העליון, הועבר לקטע 'נתוני Lab' כדי למנוע אי בהירות לגבי מקור הציון.

הערה: אם אינכם יודעים מה ההבדל בין נתוני מעבדה לנתוני שטח, תוכלו לעיין במאמר הסבר באתר web.dev.

סעיף לנתוני שדות

סעיף לנתוני שיעור Lab

הערכה של מדדי הליבה לבדיקת חוויית המשתמש באתר

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

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

תוויות לביצועים בניידים ובמחשבים

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

תוויות PSI לנייד ולמחשב לפני

תוויות PSI לניידים ולמחשבים אחרי

סיכום מקור

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

מידע שימושי נוסף

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

• תקופת איסוף הנתונים
• משך הביקור
• מכשירים
• חיבורי רשת
• גודל הדגימה
• גרסאות Chrome

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

הרחבת התצוגה

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

תמונת דף

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

מדריכים עדכניים על מוצרים זמינים בכתובת https://developers.google.com/speed/docs/insights/..

עדכונים ב-web.dev/measure

כדי להפחית את חוסר העקביות בין הכלים השונים בארגז הכלים לשיפור הביצועים, אנחנו מעדכנים גם את web.dev/measure כך שהוא יופעל ישירות על ידי PageSpeed Insights API.

בעבר, מפתחים הריצו דוחות דרך הכלי PSI וגם דרך /measure, ותראו מספרי Lighthouse שונים. אחת הסיבות העיקריות להבדלים הייתה שהבדיקות שבוצעו בארה"ב היו בארה"ב (בארצות הברית – היה להן קצה עורפי בענן שהתבסס על ארה"ב).

כאשר משתמשים ב-/measure כדי להפעיל את אותו API ישירות בממשק המשתמש של PSI, המפתחים יקבלו חוויה עקבית יותר כשהם משתמשים ב-PSI וב-/Measurement. כמו כן, ביצענו כמה שינויים /מדידה על סמך האופן שבו המשתמשים משתמשים בכלי. המשמעות היא שחוויית המשתמש המחוברת עבור מדידה /מדידה תיעלם, אבל הפונקציונליות השימושית ביותר – שמאפשרת לראות מספר קטגוריות – עדיין תהיה זמינה לשימוש.

web.dev/measure לפני

web.dev/measure לאחר

PSI היום

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

Performance Score: ציון הביצועים מופיע בחלק העליון של דוח ה-PSI ומסכם את הביצועים הכוללים של הדף. הציון נקבע באמצעות הרצה של Lighthouse כדי לאסוף ולנתח נתוני Lab לגבי הדף. ציון של 90 ומעלה נחשב לטוב, 50-90 טעון שיפור ומתחת ל-50 הוא נמוך.

נתוני שדה: נתוני השדות שנאספו ממערך הנתונים של דוח CrUX מספקים תובנות לגבי חוויית המשתמש בפועל. הנתונים כוללים מדדים כמו הצגת תוכן ראשוני (FCP), ומודדים את מדדי הליבה לבדיקת חוויית המשתמש באתר (השהיה לאחר קלט ראשון (FID), הצגת התוכן הכי גדול (LCP) ו-Cumulative Layout Shift (CLS). לצד ערכי המדדים תוכלו גם לראות את ההתפלגות של הדפים שבהם הערך של מדד מסוים היה 'טוב', 'טעון שיפור' או 'חלש', המצוין באמצעות פסים ירוקים, ענבר ואדומים, בהתאמה. ההתפלגות והציונים מוצגים על סמך טעינות הדפים של משתמשים במערך הנתונים של CrUX. הציונים מחושבים ל-28 הימים האחרונים, והם לא זמינים לדפים חדשים שייתכן שאין בהם מספיק נתונים על משתמשים אמיתיים.

סיכום מקור: המשתמשים יכולים ללחוץ על תיבת הסימון Show Origin Summary כדי לראות את הציון המצטבר של המדדים לכל הדפים שהוצגו מאותו מקור ב-28 הימים האחרונים.

נתוני Lab: ציון הביצועים במעבדה, שמחושב באמצעות Lighthouse, עוזר לנפות באגים בביצועים, כי הוא נאסף בסביבה מבוקרת. בדוח מוצגים הביצועים לפי מדדים כמו First Contentful Paint, Largest Contentful Paint, מדד מהירות, Cumulative Layout Shift, Time to Interactive, ו-Total Encryption Time. כל מדד מדורג ומסומן בסמל שמציין 'טוב', 'טעון שיפור' או 'איטי'. הקטע הזה מספק עדות טובה לזיהוי צווארי בקבוק בביצועים לפני ההשקה, ויכול לעזור לאבחן בעיות, אבל יכול להיות שהוא לא יכלול בעיות בעולם האמיתי.

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

האתגרים בתכנון הנוכחי של PSI

כמו שאפשר לראות בצילום המסך שלמעלה, נקודות הנתונים השונות מנתוני המעבדה והשטח לא מבודדות בצורה ברורה, ויכול להיות שמפתחים חדשים ב-PSI לא יבינו בקלות את ההקשר של הנתונים ומה עליהם לעשות בהמשך. הבלבול הזה גרם לפוסטים רבים בבלוג "How to" לפענוח דוח ה-PSI.

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

מידע נוסף

לפרטים נוספים על העדכונים בכלי הביצועים, כדאי לצפות בנאום הפתיחה של Chrome Dev Summit 2021. נעדכן אותך לגבי תאריך ההשקה של PSI ובשינויים ב-web.dev/measure.

הודות למיליקה מיהאג'לייה, פיליפ וולטון, ברנדן קני ואווה גספרוביץ' על המשוב שלהם על המאמר הזה