הקטן CSS

Demián Renzulli

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

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

כדאי להציץ בבלוק ה-CSS הבא:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

התוכן הזה קל לקריאה, אבל הקובץ צריך להיות גדול מהנדרש:

• היא משתמשת ברווחים לצורך כניסת פסקה ומכילה הערות שהדפדפן מתעלם מהן, כדי שניתן יהיה להסיר אותן.
• לרכיבים <h1> ו-<h2> יש אותם סגנונות: במקום להצהיר עליהם בנפרד: "h1 {...} h2 {...}" הם יכולים לבטא אותם כ-"h1, h2{...}".
• את background-color, #000000 אפשר לבטא בצורה #000 בלבד.

אחרי ביצוע השינויים האלה, מקבלים גרסה קומפקטית יותר של אותם סגנונות:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

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

מדידה

מחילים הקטנת CSS על אתר שנעשה בו שימוש במדריכים אחרים: Fav Kitties. הגרסה הזו של האתר משתמשת בספריית CSS מגניבה: animate.css, כדי להנפיש רכיבים שונים בדף כשמשתמש מצביע לחתול 😺.

בתור התחלה, חשוב להבין מה תהיה ההזדמנות שלכם לאחר הקטנת הקובץ:

1. פותחים את דף המדידה.
2. מזינים את כתובת ה-URL: https://fav-kitties-animated.glitch.me ולוחצים על Run Audit.
3. לוחצים על הצגת הדוח.
4. לוחצים על ביצועים ועוברים לקטע הזדמנויות.

הדוח שמתקבל מראה שאפשר לשמור עד 16KB מהקובץ animate.css:

עכשיו בודקים את התוכן של שירות ה-CSS:

1. פותחים את האתר של Fav Kitties ב-Chrome. (יכול להיות שייקח זמן עד שהשרתים של Glitch יגיבו בפעם הראשונה).
2. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
3. לוחצים על הכרטיסייה רשתות.
4. לוחצים על המסנן CSS.
5. מסמנים את התיבה Disable cache (השבתת מטמון).
6. טוענים מחדש את האפליקציה.

הדף מבקש שני קובצי CSS: 1.9KB ו-76.2KB בהתאמה.

1. לוחצים על animate.css.
2. לוחצים על הכרטיסייה תגובה כדי להציג את תוכן הקובץ.

חשוב לשים לב שגיליון הסגנון מכיל תווים של רווחים לבנים וכניסות פסקה:

בשלב הבא צריך להוסיף לתהליך ה-build כמה יישומי פלאגין של webpack כדי להקטין את הקבצים האלה.

מזעור CSS באמצעות חבילת אינטרנט

לפני שמתחילים לבצע אופטימיזציה, כדאי להקדיש זמן כדי להבין איך פועל תהליך ה-build של האתר של Fav Kitties:

כברירת מחדל, חבילת ה-JS שנוצרת על ידי ה-webpack תכיל את התוכן של קובצי ה-CSS שבתוכו. אנחנו רוצים לתחזק קובצי CSS נפרדים, לכן אנחנו משתמשים בשני יישומי פלאגין משלימים:

• באמצעות mini-css-extract-plugin, המערכת תחלץ כל גיליון סגנונות לקובץ נפרד, כאחד מהשלבים בתהליך ה-build.
• המטרה של webpack-fix-style-only-entries ב-Wepback 4 היא למנוע יצירה של קובץ JS נוסף לכל קובץ CSS שרשום ב-webpack-config.js.

בשלב הזה תבצעו כמה שינויים בפרויקט:

1. פותחים את הפרויקט Fav Kitties ב-Glitch.
2. כדי להציג את המקור, מקישים על הצגת מקור.
3. לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
4. לוחצים על Terminal (הערה: אם לחצן הטרמינל לא מוצג, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').

כדי להקטין את קובץ ה-CSS שמתקבל, משתמשים ב-optimize-css-assets-webpack-plugin:

1. במסוף Glitch, מריצים את npm install --save-dev optimize-css-assets-webpack-plugin.
2. מריצים את הפקודה refresh, כך שהשינויים מסונכרנים עם עורך Glitch.

אחר כך חוזרים לכלי לעריכת Glitch, פותחים את הקובץ webpack.config.js ומבצעים את השינויים הבאים:

טוענים את המודול בתחילת הקובץ: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

לאחר מכן, מעבירים את המופע של הפלאגין למערך יישומי הפלאגין: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] לאחר ביצוע השינויים, המערכת תופעל מחדש את הפרויקט. כך ייראה ה-webpack.config.js שמתקבל:

בשלב הבא בודקים את התוצאה של האופטימיזציה באמצעות כלי ביצועים.

אימות

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

אם הלכת לאיבוד בשלב קודם כלשהו, אפשר ללחוץ על כאן, כדי לפתוח גרסת האתר.

כדי לבדוק את הגודל והתוכן של הקבצים:

1. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה רשתות.
3. לוחצים על המסנן CSS.
4. מסמנים את התיבה Disable cache (השבתת מטמון), אם היא לא מסומנת.
5. טוענים מחדש את האפליקציה.

אפשר לבדוק את הקבצים האלה ולראות שהגרסאות החדשות לא כוללות רווחים לבנים. שני הקבצים קטנים הרבה יותר. באופן ספציפי, הערך של animate.css ירד ב-כ-26%, וזה חוסך כ-20KB!

בשלב האחרון:

1. פותחים את דף המדידה.
2. מזינים את כתובת ה-URL של האתר שעבר אופטימיזציה.
3. לוחצים על הצגת הדוח.
4. לוחצים על ביצועים ועוברים לקטע הזדמנויות.

בדוח לא מוצגת האפשרות 'הקטנת שירות ה-CSS' כ-Opportunity (הזדמנות) יותר, ועכשיו הוא עבר ל'ביקורות שעברו בהצלחה' :

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

השלבים הבאים ומשאבים

במדריך הזה כבר עסקנו בהגבלה של CSS ב-webpack, אבל אפשר לפעול לפי אותה גישה בכלי build אחרים כמו gulp-clean-css בשביל Gulp, או grunt-contrib-cssmin בשביל Grunt.

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