הקטן CSS

קובצי 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 ולוחצים על הפעלת ביקורת.
3. לוחצים על הצגת הדוח.
4. לוחצים על ביצועים ועוברים לקטע הזדמנויות.

מהדוח שמתקבל עולה כי ניתן לשמור עד 16KB מהקובץ animate.css:

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

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

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

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

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

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

הקטנת CSS עם Webpack

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

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

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

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

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

אימות

• כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .

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

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

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

אפשר לבדוק את הקבצים האלה, ולראות שהגרסאות החדשות לא מכילות רווחים לבנים. שני הקבצים הרבה יותר קטנים, ובמיוחד הקובץ animate.css הופחת ב-~26%, וחסכו ~26%!

בשלב האחרון:

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

בדוח לא מופיעה יותר האפשרות 'הקטנת שירות CSS' בתור 'הזדמנות', ועכשיו הוא עובר לקטע 'ביקורות שעברו':

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

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

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

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