אפשר לטפל בחלק מהאנימציות בדפי אינטרנט באופן מלא בשלב הקומפוזיטור בצינור עיבוד הנתונים לעיבוד.
אנימציות לא מורכבות דורשות יותר עבודה, והן עלולות להיראות לא חלקות בטלפונים ברמה נמוכה או כשמשימות שמכבידות על הביצועים פועלות בשרשור הראשי.
אנימציות לא מורכבות יכולות גם להגדיל את התנודות המצטברות בפריסת הדף (CLS) כי הן גורמות לתנועה בפועל של רכיבים שהאלגוריתם של CLS מודד, ויכולות לגרום לתנודות משניות ברכיבים אחרים. אנימציות מורכבות לא יגרמו לתנועה של רכיבים אחרים, ולכן הן לא נכללות במדד CLS. צמצום CLS ישפר את ציון הביצועים של Lighthouse.
רקע
האלגוריתם של הדפדפן להמרת HTML, CSS ו-JavaScript לתמונות נקרא צינור העיבוד לעיבוד תמונה.
אין בעיה אם אתם לא מבינים את המשמעות של כל שלב בצינור עיבוד הנתונים לעיבוד. חשוב להבין עכשיו שבכל שלב בצינור עיבוד הנתונים לעיבוד, הדפדפן משתמש בתוצאה של הפעולה הקודמת כדי ליצור נתונים חדשים. לדוגמה, אם הקוד שלכם מבצע פעולה שמפעילה את Layout, השלבים Paint ו-Composite צריכים לפעול שוב. אנימציה לא מורכבת היא כל אנימציה שמפעילה אחד מהשלבים המוקדמים יותר בצינור עיבוד הנתונים לעיבוד (Style, Layout או Paint). הביצועים של אנימציות לא מורכבות נמוכים יותר כי הן מחייבות את הדפדפן לבצע יותר עבודה.
כדאי לעיין במקורות המידע הבאים כדי לקבל מידע מפורט על צינור עיבוד הנתונים לעיבוד:
- דפדפני אינטרנט מודרניים מבפנים (חלק 3)
- פישוט המורכבות של צבע והקטנת אזורי הצבע
- שימוש בנכסים של רכיב עיבוד גרפי בלבד וניהול מספר השכבות
איך Lighthouse מזהה אנימציות לא מורכבות
כשאי אפשר ליצור אנימציה, Chrome מדווח על סיבות הכשל ב-DevTools, וזה מה ש-Lighthouse קורא. ב-Lighthouse מפורטים צמתים של DOM עם אנימציות שלא אוחדו, יחד עם הסיבות לכישלון של כל אנימציה.
איך מוודאים שהאנימציות מורכבות
מומלץ לעיין במאמרים שימוש בנכסים מסוג 'מרכז עיבוד גרפי' בלבד וניהול מספר השכבות ואנימציות עם ביצועים גבוהים.