קובצי CSS הם משאבים שחוסמים עיבוד: צריך לטעון ולעבד אותם לפני שהדפדפן מעבד את הדף. זמן העיבוד של דפי אינטרנט שמכילים גיליונות סגנונות גדולים שלא לצורך.
במדריך הזה נסביר איך לדחות קובצי CSS לא קריטיים כדי לבצע אופטימיזציה של נתיב העיבוד הקריטי ולשפר את הצגת תוכן ראשוני (FCP).
דוגמה: טעינה לא אופטימלית של שירות ה-CSS
הדוגמה הבאה מכילה אקורדיון עם שלוש פסקאות טקסט מוסתרות, כל אחת מעוצבת במחלקה אחרת:
הדף הזה מבקש קובץ CSS עם שמונה מחלקות, אבל לא כולן צריכות להיות כדי להציג את התוכן ה "גלוי".
המטרה במדריך הזה היא לבצע אופטימיזציה של הדף כך שרק הסגנונות הקריטיים נטענים באופן סינכרוני, ואילו שאר הסגנונות (כולל סגנונות הפסקאות) נטענים באופן שלא ייחסם.
מדידה
מריצים את Lighthouse בדף ועוברים לקטע Performance (ביצועים).
הדוח מציג את המדד First Contentful Paint (הצגת תוכן ראשוני) עם הערך '1s', ואת ההזדמנות לבטל משאבים חוסמי רינדור, ומפנים אל הקובץ style.css:
כדי לראות איך שירות ה-CSS הזה חוסם רינדור:
- פותחים את הדף ב-Chrome.
- מקישים על
Control+Shift+J(או עלCommand+Option+Jב-Mac) כדי לפתוח את כלי הפיתוח. - לוחצים על הכרטיסייה ביצועים.
- בחלונית 'ביצועים', לוחצים על טעינה מחדש.
בדוח המעקב שמתקבל, תוכלו לראות שהסמן FCP ממוקם מיד אחרי שהטעינה של שירות ה-CSS הסתיימה:
כלומר, הדפדפן צריך להמתין עד שכל שירות ה-CSS ייטען ויעובד לפני ציור של פיקסל אחד על המסך.
אופטימיזציה
כדי לבצע אופטימיזציה של הדף הזה, צריך לדעת אילו מחלקות נחשבות קריטיות. כדי לבדוק זאת, צריך להשתמש בכלי הכיסוי:
- בכלי הפיתוח, פותחים את תפריט הפקודה על ידי הקשה על
Control+Shift+PאוCommand+Shift+P(ב-Mac). - מקלידים "כיסוי" ובוחרים באפשרות הצגת כיסוי.
- לוחצים על טעינה מחדש כדי לטעון מחדש את הדף ולהתחיל לתעד את הכיסוי.
לוחצים לחיצה כפולה על הדוח כדי להציג את הפרטים שלו:
- קטגוריות שמסומנות בירוק הן קריטיות. הדפדפן צריך אותן כדי להציג את התוכן הגלוי, כולל הכותרת, כותרת המשנה ולחצני האקורדיון.
- מחלקות שמסומנות באדום הן לא קריטיות, ומשפיעות רק על תוכן שלא ניתן לראות מיד, כמו הפסקאות המוסתרות.
על סמך המידע הזה תוכלו לבצע אופטימיזציה של שירות ה-CSS כדי שהדפדפן יוכל להתחיל לעבד סגנונות קריטיים מיד לאחר שהדף נטען, ולעכב CSS שאינו קריטי למועד מאוחר יותר:
מחלצים את הגדרות הכיתות שמסומנות בירוק בדוח הכיסוי ומציבים את המחלקות האלה בבלוק
<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>טוענים את שאר המחלקות באופן אסינכרוני על ידי החלת התבנית הבאה:
<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:
צג
משתמשים בכלי הפיתוח כדי להריץ דוח נוסף על ביצועים בדף האופטימיזציה.
הסמן FCP מופיע לפני שהדף מבקש את ה-CSS, כך שהדפדפן לא צריך להמתין לטעינת ה-CSS לפני שהוא מעבד את הדף:
בשלב האחרון, מריצים את Lighthouse בדף שעבר אופטימיזציה.
בדוח, תראו שדף ה-FCP הופחת ב-0.2 (שיפור של 20%!):
ההצעה הסרת משאבים שחוסמים עיבוד כבר לא מופיעה בקטע הזדמנויות, אלא נמצאת בקטע ביקורות שעברו בהצלחה:
השלבים הבאים והפניות
במדריך הזה למדתם איך לדחות CSS לא קריטי על ידי חילוץ ידני של הקוד שלא נמצא בשימוש בדף. לסביבות ייצור מורכבות יותר, המדריך לחילוץ CSS קריטי כולל כמה מהכלים הפופולריים ביותר לחילוץ CSS קריטי, וכולל Codelab לבדיקת האופן שבו הם פועלים בפועל.