תובנות לגבי הביצועים: תובנות פרקטיות לגבי ביצועי האתר

ג'סלין יין
ג'סלין יין
סופיה אמליאנובה
סופיה אמליאנובה

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

למה כדאי להשתמש בלוח חדש?

החלונית החדשה תובנות לגבי הביצועים היא ניסוי שמטפל ב-3 נקודות החולשה האלה למפתחים במהלך העבודה עם החלונית הקיימת ביצועים:

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

מבוא

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

פתיחת החלונית 'תובנות לגבי הביצועים'

  1. פותחים את כלי הפיתוח.
  2. לוחצים על אפשרויות נוספות > כלים נוספים > תובנות לגבי ביצועים.

    תובנות לגבי הביצועים בתפריט.

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

    הצגת הפקודה של מדדי הביצועים בתפריט הפקודות.

שיא ביצועים

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

  1. פותחים את דף ההדגמה הזה בכרטיסייה חדשה, ופותחים את החלונית 'תובנות לגבי הביצועים' בדף.
  2. אפשר לווסת את הרשת והמעבד (CPU) במהלך ההקלטה. במדריך הזה, כדאי לעיין בקטע השבתת המטמון ולהגדיר את CPU להאטה פי 4 בתפריט הנפתח:

    ויסות נתונים.

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

    אפשרויות להתחלה.

איך להפעיל מחדש הקלטה של הופעה

השתמשו בפקדים שבתחתית הדף כדי לשלוט בהפעלה החוזרת של ההקלטה.

הפעלת הפקדים מחדש.

הנה דוגמה איך אפשר לעשות זאת.

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

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

כדי לשנות את מרחק התצוגה ולהזיז את ציר הזמן שמאלה וימינה, משתמשים בלחצני הניווט המתאימים:

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

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

כשמשתמשים בקיצורי דרך, מתבצעת זום בהתאם לסמן העכבר.

הצגה של תובנות לגבי הביצועים

הצגת רשימה של תובנות לגבי הביצועים בחלונית תובנות. זיהוי ותיקון של בעיות אפשריות בביצועים.

חלונית התובנות.

מעבירים את העכבר מעל כל אחת מהתובנות כדי להדגיש אותן במסלולים הראשיים.

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

פרטי המדד.

הצגת מדדי הביצועים של Web Vitals

Web Vitals הוא יוזמה של Google שמטרתה לספק הנחיות מאוחדות לאותות איכות שחיוניים לשיפור חוויית המשתמש באינטרנט.

אפשר להציג את המדדים האלה בחלונית ציר הזמן ותובנות.

הצגת מדדי הביצועים של Web Vitals.

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

מידע על העיכובים ב-Largest Contentful Paint (LCP)

המדד Largest Contentful Paint (LCP) הוא אחד מהמדדים של מדדי הליבה לבדיקת חוויית המשתמש באתר. בדוח מוצג זמן הרינדור של התמונה או גוש הטקסט הגדולים ביותר שאפשר לראות באזור התצוגה, ביחס למועד שבו הדף נטען לראשונה.

ערכי סף של LCP.

ציון LCP טוב הוא 2.5 שניות לכל היותר.

אם הרינדור של הצגת התוכן הגדול ביותר המכיל תוכן בדף נמשך זמן רב יותר, בציר הזמן יופיע תג ה-LCP עם ריבוע צהוב או משולש אדום.

תג LCP.

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

חלונית הפרטים.

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

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

פירוט התזמונים.

זמן העיבוד של נתוני LCP כולל את חלקי המשנה הבאים:

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

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

הצגת הפעילות של שינויים בפריסה

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

מסלול על כמה תזוזות פריסה.

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

חלון הסשן ופער.

Cumulative Layout Shifts (CLS) הוא אחד מהמדדים של מדדי ליבה לבדיקת חוויית המשתמש באתר. אפשר להשתמש במסלול השינויים בפריסה כדי לזהות בעיות אפשריות וגורמים לשינויים בפריסה.

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

CLS

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

הצגת הפרטים של שינוי הפריסה.

בדוגמה שלנו, שורש הבעיה הפוטנציאלי הוא מדיה לא גדולה. כדי לפתור את הבעיה, אפשר לעיין במאמר אופטימיזציה של Cumulative Layout Shift (CLS).

לזהות את הסיבות האפשריות לכך.

הסבר על הציון של השינויים בפריסה

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

אם כל הדף זז, הציון המקסימלי של כל שינוי פריסה הוא 1. בדוגמה שלנו, שינוי הפריסה הראשון קיבל ציון של 0.15. שינוי הפריסה השני קיבל ציון של 0.041.

הסבר על הציון של השינויים בפריסה.

הציון הכולל של חלון הסשן הזה הוא 0.19. בהתבסס על סף ה-CLS, הוא זקוק לשיפור. צבע הרקע של חלון הסשן משקף את אותו הדבר.

סף CLS.

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

תרשים רקע של חלון ההגבלה.

הצגת הפעילות ברשת

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

להציג את פעילות הרשת.

הצגת פעילות של כלי הרינדור

ניתן לראות את פעילות העיבוד במסלול Renderer. ניתן להרחיב כל מאפשר כדי להציג את הפעילויות וללחוץ על כל פריט כדי להציג את הפרטים.

הצגת פעילות של כלי הרינדור.

הצגת פעילות ב-GPU

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

הצגת הפעילות ב-GPU.

הצגת תזמוני משתמש

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

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

כדי להציג תזמוני משתמש:

  1. סימון מקומות באפליקציה באמצעות performance.mark().
  2. מודדים את הזמן שחלף בין הסימנים באמצעות performance.measure().
  3. תיעוד ביצועים.
  4. מציגים את המדידות במסלול תזמונים. אם לא ניתן לראות את הטראק, בודקים את האפשרות תזמוני משתמש בהגדרות.
  5. כדי להציג פרטים, לוחצים על התזמון בטראק. הטראק 'תזמונים'.

התאמה אישית של ממשק המשתמש

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

הגדרות.

ייצוא של הקלטה

כדי לשמור הקלטה, לוחצים על ייצוא .

ייצוא הקלטה.

ייבוא של הקלטה

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

ייבוא של הקלטה.

מחיקת הקלטה

כדי למחוק הקלטה:

  1. לוחצים על מחיקה. תיפתח תיבת דו-שיח לאישור. מחיקת ההקלטה.
  2. בתיבת הדו-שיח, לוחצים על מחיקה כדי לאשר את המחיקה.