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

Demián Renzulli

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

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

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

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

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

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

מדידה

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

בדוח מוצג המדד הצגת התוכן הראשון עם הערך '1s', וגם את ההזדמנות לחסל משאבים שחוסמים עיבוד, שמצביעים על קובץ 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 כאשר גיליון הסגנונות מסתיים.
• null ה-handler של onload אחרי השימוש בו עוזר לדפדפנים מסוימים למנוע לשלוח קריאה מחדש ל-handler כשמחליפים את המאפיין rel.
• ההפניה לגיליון הסגנונות שבתוך הרכיב noscript מספקת חלופה לדפדפנים שלא מפעילים JavaScript.

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

מעקב

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

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

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

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

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

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

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