הקטן CSS

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

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

איך הקטנה של קובצי 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.

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

Drupal

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

Joomla

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

Magento

מפעילים את האפשרות הקטנת קובצי CSS בהגדרות המפתח של החנות שלך.

React

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

WordPress

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

משאבים