הקטן CSS

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

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

איך הקטנת קובצי 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 כדי לבצע את ההקטנה מראש, אם אפשר.

משאבים