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