יש להסיר CSS שאינו בשימוש

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

צילום מסך של Lighthouse להסרת ביקורת CSS שלא נעשה בה שימוש

איך שירות CSS שאינו בשימוש מאט את הביצועים

שימוש בתג <link> הוא דרך נפוצה להוספת סגנונות לדף:

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

הקובץ main.css שהדפדפן מוריד נקרא גיליון סגנונות חיצוני, כי הוא מאוחסן בנפרד מה-HTML שמשתמש בו.

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

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

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

איך מזהים שירות CSS שלא נמצא בשימוש

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

כלי הפיתוח ל-Chrome: הכרטיסייה &#39;כיסוי&#39;
כלי הפיתוח ל-Chrome: הכרטיסייה 'כיסוי'.

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

בדומה לקוד מוטמע בתג <script>, מוטבע סגנונות קריטיים שנדרשים לציור הראשון בתוך בלוק <style> ב-head של דף ה-HTML. לאחר מכן צריך לטעון את שאר הסגנונות באופן אסינכרוני באמצעות הקישור preload.

כדאי לשקול אוטומציה של תהליך החילוץ והטבעה של CSS מסוג "Above the Fold" באמצעות הכלי הקריטי.

מידע נוסף זמין במאמר דחיית שירותי CSS שאינם קריטיים.

הנחיות ספציפיות למקבץ

Drupal

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

ג'ומלה

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

WordPress

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

משאבים