בקטע 'הזדמנויות' בדוח Lighthouse מפורטות כל גיליונות הסגנונות עם CSS לא מנוצל, עם חיסכון פוטנציאלי של 2KB או יותר. מסירים את רכיבי ה-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 שנמצאים בשימוש ושלא נעשה בהם שימוש בכרטיסייה 'כיסוי'.
מוטבע תוכן CSS קריטי ועיכוב שירותי CSS לא קריטיים
בדומה להטמעת קוד בתוך תג <script>, הטמעת סגנונות קריטיים בתוך בלוק <style> ב-head של דף ה-HTML, שנדרשים לציור הראשון.
לאחר מכן, אפשר לטעון את שאר הסגנונות באופן אסינכררוני באמצעות הקישור preload.
כדאי להשתמש בכלי הקריטי כדי להפוך את תהליך החילוץ וההטמעה של CSS 'מעל למסך' לאוטומטי.
מידע נוסף זמין במאמר דחיית קוד CSS לא קריטי.
הנחיות ספציפיות ל-stack
Drupal
כדאי להסיר כללי CSS שאינם בשימוש ולצרף רק את ספריות Drupal הנדרשות לדף הרלוונטי או לרכיב הרלוונטי בדף. פרטים נוספים זמינים במסמכי העזרה של Drupal.
כדי לזהות ספריות מצורפות שמוסיפות תוכן CSS מיותר, כדאי להפעיל את רמת הכיסוי של הקוד ב-Chrome DevTools. לאחר השבתה של צבירת CSS באתר Drupal, תוכלו לזהות את העיצוב או המודול שאחראים להוספת גיליון הסגנונות.
העיצובים והמודולים הבעייתיים הם אלה שברשימת גיליונות הסגנונות שלהם יש כמות גדולה של כיסוי קוד באדום. עיצובים ומודולים צריכים לצרף ספריית גיליון סגנונות רק אם נעשה בה שימוש בפועל בדף.
Joomla
כדאי לשקול לצמצם את המספר של תוספי Joomla שטוענים תוכן CSS שאינו בשימוש בדף שלך.
WordPress
כדאי לשקול לצמצם את מספר יישומי הפלאגין של WordPress שטוענים תוכן CSS בלתי נחוץ בדף, או להסיר אותם.