הקטע 'הזדמנויות' בדוח Lighthouse כולל רשימה של כל קובצי ה-CSS הלא מזוהים, לצד החיסכון הפוטנציאלי ב-kibibytes (KiB) כאשר הקבצים האלה מוקטנים:
איך הקטנת קובצי CSS יכולה לשפר את הביצועים
הקטנה של קובצי CSS יכולה לשפר את ביצועי הטעינה של הדפים. לרוב, קובצי CSS גדולים יותר ממה שהם צריכים. לדוגמה:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
ניתן להקטין ל:
h1,
h2 {
background-color: #000000;
}
מבחינת הדפדפן, שתי דוגמאות הקוד האלה שוות ערך מבחינה פונקציונלית, אבל בדוגמה השנייה יש פחות בייטים. ניתן לשפר את יעילות הבייטים עוד יותר באמצעות הסרת רווחים לבנים:
h1,
h2 {
background-color: #000000;
}
חלק מהמזעורים משתמשים בטריקים מתוחכמים למזעור בייטים.
לדוגמה, אפשר להקטין עוד יותר את ערך הצבע #000000
ל-#000
, שהוא קיצור הערך שלו.
Lighthouse מספק אומדן של חיסכון פוטנציאלי על סמך התגובות ותווי הרווחים שמופיעים ב-CSS.
זוהי הערכה שמרנית.
כפי שציינו קודם, אפשר לבצע אופטימיזציות חכמות (כמו הורדת #000000
ל-#000
) כדי לצמצם עוד יותר את גודל הקובץ.
לכן, אם אתם משתמשים בכלי מזעור, יכול להיות שתראו חיסכון גדול יותר מאשר בדוחות של Lighthouse.
שימוש בכלי להקטנה של CSS כדי להקטין את קוד ה-CSS
באתרים קטנים שאתם לא מעדכנים לעיתים קרובות, כדאי כנראה להשתמש בשירות אונליין להקטנה ידנית של קבצים. מדביקים את ה-CSS בממשק המשתמש של השירות והוא מחזיר גרסה מוקטנת של הקוד.
לכן, כדאי למפתחים מקצועיים להגדיר תהליך עבודה אוטומטי שמקטין את קובץ ה-CSS באופן אוטומטי לפני פריסת הקוד המעודכן. ניתן לעשות זאת בדרך כלל באמצעות כלי build כמו Gulp או Webpack.
בקישור הבא אפשר לקבל מידע נוסף על הקטנת קוד ה-CSS במאמר הקטנת CSS.
הנחיות ספציפיות למקבץ
Drupal
מפעילים את קובצי CSS נצברים בקטע ניהול > הגדרות אישיות > פיתוח. ניתן גם להגדיר אפשרויות צבירה מתקדמות יותר באמצעות מודולים נוספים, שמאיצים את השימוש באתר על ידי שרשור, הקטנה ודחיסה של סגנונות CSS.
ג'ומלה
יש כמה תוספי Joomla שיכולים להאיץ את האתר על ידי שרשור, הקטנה ודחיסה של סגנונות ה-CSS. יש גם תבניות עם הפונקציונליות הזו.
Magento
מפעילים את האפשרות Minify CSS Files (הקטנת קובצי CSS) בהגדרות המפתח של החנות.
React
אם מערכת ה-build שלכם מקטינה את קובצי ה-CSS באופן אוטומטי, צריך להקפיד לפרוס את production build של האפליקציה. אפשר לבדוק את זה עם התוסף React Developer Tools.
WordPress
יש כמה יישומי פלאגין של WordPress שיכולים להאיץ את האתר על ידי שרשור, הקטנה ודחיסה של סגנונות. כדאי גם להשתמש בתהליך build כדי לבצע את ההקטנה מראש, אם אפשר.