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

Demián Renzulli

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

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

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

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

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

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

מדידה

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

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

כדי להמחיש את האופן שבו שירות ה-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.2s (שיפור של 20%!):

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

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

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