תוכלו לעיין ברשימה הזו של אפשרויות הקשורות לביצועים בכרטיסייה רינדור כדי לעיין בבעיות בביצועי העיבוד.
הדגשת אזורים שנצבעו מחדש עם הבהוב של צבע
כשאפשרות זו מופעלת, המסך של Chrome מהבהב בירוק בכל פעם שמתבצע צביעה מחדש.
כדי להציג אזורים שעברו צביעה מחדש:
- פותחים את הכרטיסייה רינדור בהדגמה הזו ומסמנים את האפשרות Paint flash.
- שימו לב לצביעה מחדש שמודגשת בירוק.
אם בדף אחר אתם רואים שכל המסך מהבהב בצבע ירוק או אזורים במסך שלא חשבתם שצריך לצבוע, כדאי לבדוק את הנושא לעומק.
הדגשת האזורים שזזים בפריסה
שינויי פריסה גורמים לצביעה מחדש באופן בלתי צפוי ועלולים להיות מעצבנים וגם מזיקים.
כדי לראות את המיקום והתזמון של שינויי הפריסה בדף:
פותחים את הכרטיסייה רינדור ומסמנים את התיבה האזורים של הזזת הפריסה.
צריך לרענן את הדף. האזורים של שינוי הפריסה מודגשים לזמן קצר בסגול.
הצגת שכבות ומשבצות עם גבולות של שכבות
השתמש בגבולות השכבות כדי להציג שכבת-על של גבולות שכבות ואריחים בחלק העליון של הדף.
כדי להפעיל גבולות של שכבות:
- פותחים את הכרטיסייה עיבוד ומסמנים את גבולות השכבות.
- בודקים את גבולות השכבות בכתום ובזית ואריחים בציאן.
הסבר על קודי הצבעים זמין בתגובות שבdebug_colors.cc.
הצגה בזמן אמת של פריימים לשנייה עם נתונים סטטיסטיים של רינדור הפריים
הנתונים הסטטיסטיים של עיבוד הפריימים הם שכבת-על שמופיעה בפינה השמאלית העליונה של אזור התצוגה.
כדי לפתוח את הנתונים הסטטיסטיים של עיבוד הפריימים:
- פותחים את הכרטיסייה עיבוד ומפעילים את תיבת הסימון נתונים סטטיסטיים של עיבוד פריימים.
- בודקים את הנתונים הסטטיסטיים בפינה השמאלית העליונה של הדף.
בשכבת-העל של נתונים סטטיסטיים של עיבוד פריימים אפשר לראות:
- הערכה בזמן אמת של פריימים לשנייה בזמן שהדף פועל.
- הגדרת ציר זמן כעלילה עם שלושה סוגי פריימים:
- פריימים שעברו רינדור בהצלחה (קווים כחולים)
- פריימים מוצגים חלקית (קווים צהובים)
- פריימים שהשתחררו (קווים אדומים).
- המצב של רשת נקודות ה-GPU: מופעל או מושבת. מידע נוסף זמין במאמר איך מקבלים רסטר של GPU.
- שימוש בזיכרון GPU: מספרMB הזיכרון בשימוש והמקסימום.
זיהוי בעיות בביצועי הגלילה
משתמשים בתכונה בעיות בביצועים של גלילה כדי לזהות אלמנטים בדף שכוללים פונקציות event listener שקשורות לגלילה, שעלולים לפגוע בביצועי הדף.
כדי לראות את הרכיבים שעלולים להיות בעייתיים:
- פותחים את הכרטיסייה רינדור ובודקים את האפשרות בעיות בביצועים בגלילה.
- שימו לב לרכיבים המודגשים שעשויים להיות בעייתיים.
הצגת מדדי הליבה לבדיקת חוויית המשתמש באתר
מדדי Web Vitals הם יוזמה של Google שמטרתה לספק הנחיות אחידות לאותות איכות שחיוניים לשיפור חוויית המשתמש באינטרנט.
מדדי ליבה לבדיקת חוויית המשתמש באתר הם קבוצת משנה של מדדי חוויית המשתמש באתר שחלים על כל דפי האינטרנט. כל אחד מהמדדים הבסיסיים של חוויית המשתמש מייצג היבט ייחודי של חוויית המשתמש. ניתן למדוד אותו בשטח ומשקף את החוויה בפועל של תוצאה קריטית שמתמקדת במשתמש. מדדי הליבה לבדיקת חוויית המשתמש באתר הם:
- LCP (המהירות שבה נטען רכיב התוכן הכי גדול): מדד של ביצועי הטעינה. כדי לספק חוויית משתמש טובה, נתוני ה-LCP צריכים להתרחש תוך 2.5 שניות מהמועד שבו הדף נטען בפעם הראשונה.
- Interaction to Next Paint (INP): מדידת אינטראקטיביות. כדי לספק חוויית משתמש טובה, ה-INP של הדפים צריך להיות עד 200 אלפיות השנייה.
- Cumulative Layout Shift (CLS): מודדת יציבות חזותית. כדי לספק חוויית משתמש טובה, ה-CLS של הדפים צריך להיות 0.1 או פחות.
כדי לראות את הערכים של מדדי הליבה לבדיקת חוויית המשתמש באתר, משתמשים בתוסף Web Vitals ל-Chrome.