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

Demián Renzulli
Demián Renzulli

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

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

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

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

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

מדידה

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

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

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

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

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

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

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

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

אופטימיזציה

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

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

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

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

בעזרת המידע הזה, תוכלו לבצע אופטימיזציה של קובצי ה-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 לפני שהוא מעבד את הדף:

מעקב ביצועים של DevTools לדף מותאם, שבו מוצגת FCP שמתחילה לפני טעינת ה-CSS.
בדף המותאם, ה-FCP יכול להתחיל לפני שגיליון הסגנונות נטען.

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

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

דוח Lighthouse שבו מוצג ערך FCP של &#39;0.8 שניות&#39;.
ה-FCP החדש והקצר יותר.

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

תמונה של דוח Lighthouse, שבו מוצגת ההמלצה &#39;הסרת משאבים חסומים&#39; בקטע &#39;בדיקות שעברו&#39;.
הדף עובר עכשיו את הביקורת של משאבי החסימה.

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

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