קבצי CSS הם משאבים שחוסמים את העיבוד: צריך לטעון ולעבד אותם לפני שהדפדפן מעבד את הדף. דפי אינטרנט שמכילים גיליונות סגנונות גדולים שלא לצורך, לוקח יותר זמן לעבד אותם.
כאן מוסבר איך לדחות רכיבי CSS לא קריטיים כדי לבצע אופטימיזציה של נתיב העיבוד הקריטי ולשפר את הצגת התוכן הראשוני (FCP).
טעינה לא אופטימלית של CSS
בדוגמה הבאה יש אקורדיון עם שלוש פסקאות טקסט מוסתרות, שלכל אחת מהן מוקצה סגנון עם מחלקה שונה:
בדף הזה יש בקשה לקובץ CSS עם שמונה מחלקות, אבל לא כולן נחוצות כדי להציג את התוכן ה'גלוי'.
המטרה של המדריך הזה היא לבצע אופטימיזציה של הדף כך שרק הסגנונות הקריטיים ייטענו באופן סינכרוני, ושאר הסגנונות (כולל סגנונות הפסקה) ייטענו באופן לא חוסם.
מדידה
מריצים את Lighthouse בכלי הפיתוח כדי לבדוק מדדים משמעותיים.
- פותחים את ההדגמה ב-Chrome.
- פותחים את כלי הפיתוח ל-Chrome.
- בוחרים באפשרות חלונית הביצועים.
- מתוך החלונית, טוענים מחדש את הדף.
בדוח מוצג המדד הצגת תוכן ראשוני (FCP) עם הערך '1s', וההזדמנות Eliminate render-blocking resources, שמצביעה על הקובץ style.css:
במעקב שמתקבל, סמן FCP ממוקם מיד אחרי שסגנון ה-CSS סיים להיטען: