דחיית CSS שאינו קריטי

Demián Renzulli

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

במדריך הזה נסביר איך לדחות רכיבי CSS לא קריטיים כדי לבצע אופטימיזציה של נתיב העיבוד הקריטי ולשפר את הזמן 'צביעה ראשונית עם תוכן' (FCP).

דוגמה: טעינת CSS לא אופטימלית

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

הדף הזה מבקש קובץ CSS עם שמונה כיתות, אבל לא כולן נחוצות כדי להציג את התוכן 'גלוי'.

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

מדידה

מריצים את Lighthouse בדף ועוברים לקטע ביצועים.

בדוח מוצג המדד הצגת תוכן ראשוני (FCP) עם הערך '1 שניות', וההזדמנות הסרת משאבים שמונעים עיבוד, שמצביעה על הקובץ style.css:

כדי להמחיש איך הקוד הזה חוסם את העיבוד:

1. פותחים את הדף ב-Chrome.
2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
3. לוחצים על הכרטיסייה ביצועים.
4. בחלונית 'ביצועים', לוחצים על טעינה מחדש.

בניתוח שנוצר, תוכלו לראות שהסימן FCP ממוקם מיד אחרי שטעינה של ה-CSS מסתיימת:

המשמעות היא שהדפדפן צריך להמתין עד שכל קובצי ה-CSS ייטענו ויעובדו, לפני שהוא יצייר פיקסל אחד במסך.

אופטימיזציה

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

1. בכלי למפתחים, לוחצים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות.
2. מקלידים 'כיסוי' ובוחרים באפשרות הצגת הכיסוי.
3. לוחצים על טעינה מחדש כדי לטעון מחדש את הדף ולהתחיל לתעד את הכיסוי.

לוחצים פעמיים על הדוח כדי לראות פרטים:

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

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

1. מחלצים את הגדרות הכיתות שסומנו בירוק בדוח הכיסוי, ומוסיפים את הכיתות האלה לבלוק <style> בחלק העליון של הדף:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. כדי לטעון את שאר הכיתות באופן אסינכרוני, צריך להשתמש בתבנית הבאה:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

זו לא הדרך הרגילה לטעון CSS. ככה זה עובד:

• link rel="preload" as="style" שולח בקשה לאחזור גיליון הסגנונות באופן אסינכרוני. מידע נוסף על preload זמין במדריך לטעינה מראש של נכסים קריטיים.
• המאפיין onload ב-link מאפשר לדפדפן לעבד את ה-CSS כשהטעינה של גיליון הסגנונות מסתיימת.
• 'אפסה' של הטיפול באירוע onload אחרי השימוש בו עוזרת לדפדפנים מסוימים להימנע מקריאה חוזרת של הטיפול באירוע כשהם מחליפים את המאפיין rel.
• ההפניה לגיליון הסגנונות בתוך האלמנט noscript מספקת חלופה לדפדפנים שלא מריצים JavaScript.

הדף שנוצר נראה בדיוק כמו הגרסה הקודמת, גם אם רוב הסגנונות נטענים באופן אסינכרוני. כך נראים הסגנונות המוטמעים והבקשה האסינכרונית לקובץ ה-CSS בקובץ ה-HTML:

מעקב

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

הסמן FCP מופיע לפני שהדף מבקש את ה-CSS, כלומר הדפדפן לא צריך להמתין לטעינה של ה-CSS לפני שהוא מעבד את הדף:

בשלב האחרון, מריצים את Lighthouse בדף המותאם.

בדוח תוכלו לראות שהזמן לדף FCP הופחת ב-0.2 שניות (שיפור של 20%!):

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

השלבים הבאים והפניות

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