מציאת בעיות בביצועי הרינדור

Sofia Emelianova

Kayce Basques

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

הדגשת אזורים שנצבעו מחדש באמצעות הבהוב צבע

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

כדי להציג אזורים שנצבעו מחדש:

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

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

הדגשת האזורים שזזו בפריסה

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

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

1. פותחים את הכרטיסייה רינדור ומסמנים את האפשרות אזורים שהשתנו בפריסה.

2. refresh מרעננים את הדף. אזורים של שינוי הפריסה מודגשים לרגע בצבע סגול.

הצגת שכבות וכרטיסי מידע עם גבולות שכבות

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

כדי להפעיל את גבולות השכבות:

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

ראו את התגובות בdebug_colors.cc כדי לקבל הסבר על קודי הצבעים.

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

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

כדי לפתוח את הנתונים הסטטיסטיים של רינדור הפריים:

1. פותחים את הכרטיסייה רינדור ומסמנים את התיבה נתונים סטטיסטיים של רינדור פריימים.
2. בודקים את הנתונים הסטטיסטיים בפינה השמאלית העליונה של הדף.

בשכבת-העל נתונים סטטיסטיים של רינדור פריימים מוצגים:

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

זיהוי בעיות בביצועי הגלילה

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

כדי להציג את הרכיבים שעשויים לגרום לבעיות:

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

הצגה של מדדי הליבה לבדיקת חוויית המשתמש באתר

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

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

• המהירות שבה נטען רכיב התוכן הכי גדול (LCP): מדידת הביצועים של הטעינה. כדי לספק חוויית משתמש טובה, LCP צריך להתרחש תוך 2.5 שניות מהמועד שבו הדף מתחיל להיטען לראשונה.
• מהירות התגובה לאינטראקציה באתר (INP): המדד הזה מודד את האינטראקטיביות. כדי לספק חוויית משתמש טובה, ה-INP של דפים צריך להיות 200 אלפיות שנייה או פחות.
• Cumulative Layout Shift (CLS): מדידה של היציבות החזותית. כדי לספק חוויית משתמש טובה, הערך של CLS בדפים צריך להיות 0.1 או פחות.

אתם יכולים להשתמש בתוסף Web Vitals ל-Chrome כדי להציג את הערכים של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) של הדף.