تصغير 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 كالمعتاد وإضافة خطوة تصغير إلى عملية التصميم. ستتعرف في هذا الدليل على كيفية إجراء ذلك باستخدام أداة تصميم شائعة، وهي: webpack.

القياس

عليك تطبيق تصغير محتوى CSS على موقع إلكتروني تم استخدامه في أدلة أخرى: Fav Kitties. يستخدم هذا الإصدار من الموقع الإلكتروني مكتبة CSS رائعة، وهي animate.css, لتحريك عناصر الصفحة المختلفة عندما يصوّت المستخدم كقطة وفِّر.

كخطوة أولى، تحتاج إلى التعرّف على الفرص المحتملة بعد تصغير هذا الملف:

1. افتح صفحة القياس.
2. أدخِل عنوان URL: https://fav-kitties-animated.glitch.me وانقر على بدء عملية التدقيق.
3. انقر على عرض التقرير.
4. انقر على الأداء وانتقِل إلى قسم الفرص.

يوضِّح التقرير الناتج أنّه يمكن حفظ ما يصل إلى 16 كيلوبايت من ملف animate.css:

افحص الآن محتوى CSS:

1. افتح موقع Fav Kitts الإلكتروني في Chrome. (قد تستغرق خوادم Glitch بعض الوقت للاستجابة في المرة الأولى.)
2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
3. انقر على علامة التبويب الشبكة.
4. انقر على فلتر CSS.
5. ضع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
6. أعِد تحميل التطبيق.

تطلب الصفحة ملفي CSS بحجم 1.9 كيلوبايت و76.2 كيلوبايت على التوالي.

1. انقر على animate.css.
2. انقر على علامة التبويب الردّ للاطّلاع على محتوى الملف.

لاحظ أن ورقة الأنماط تحتوي على أحرف للمسافات البيضاء والمسافة البادئة:

وبعد ذلك، ستضيف بعض المكوّنات الإضافية لحزمة الويب إلى عملية التصميم لتقليل هذه الملفات.

ملاحظة: ملاحظة: يسرد تقرير Lighthouse السابق animate.css كفرصة للتحسين فقط. سيؤدي تصغير style.css إلى توفير بعض وحدات البايت أيضًا، ولكن ليس كافيًا لكي تعتبر أداة Lighthouse توفيرًا كبيرًا. مع ذلك، فإنّ تصغير CSS هو أفضل ممارسة عامة. لذا من المنطقي تصغير جميع ملفات CSS.

تصغير CSS باستخدام حزمة الويب

قبل الانتقال إلى التحسينات، خصِّص بعض الوقت لفهم عملية إنشاء موقع Fav Kitties الإلكتروني:

بشكل تلقائي، ستحتوي حزمة JavaScript الناتجة التي تنتجها حزمة الويب على محتوى ملفات CSS المضمّنة. ونظرًا لأننا نريد الاحتفاظ بملفات CSS منفصلة، فإننا نستخدم مكوّنين إضافيين تكميليين:

• mini-css-extract-plugin هو استخراج كل ورقة أنماط إلى ملفها الخاص، كإحدى خطوات عملية التصميم.
• يتم استخدام webpack-fix-style-only-entries لتصحيح مشكلة في Wepback 4، وذلك لتجنُّب إنشاء ملف JS إضافي لكل ملف CSS مُدرَج في webpack-config.js.

ستقوم الآن بإجراء بعض التغييرات في المشروع:

1. افتح مشروع Fav Kitts في Glitch.
2. لعرض المصدر، اضغط على View Source (عرض المصدر).
3. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
4. انقر على Terminal (ملاحظة: إذا لم يظهر الزر "طرفي"، قد تحتاج إلى استخدام خيار "ملء الشاشة").

لتصغير لغة CSS الناتجة، ستستخدم optimize-css-assets-webpack-plugin:

1. في وحدة تحكّم Glitch، شغِّل "npm install --save-dev optimize-css-assets-webpack-plugin".
2. عليك تنفيذ "refresh" لتتم مزامنة التغييرات مع أداة تعديل الأخطاء.

بعد ذلك، ارجع إلى أداة تعديل glitch، وافتح ملف 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 الناتجة:

في الخطوة التالية، يمكنك الاطّلاع على نتيجة هذا التحسين باستخدام أدوات الأداء.

إثبات الهوية

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة

وإذا ضللت الطريق في أي خطوة سابقة، يمكنك النقر على هنا، لفتح نافذة جديدة إصدار الموقع الإلكتروني.

لفحص حجم الملفات ومحتواها:

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
2. انقر على علامة التبويب الشبكة.
3. انقر على فلتر CSS.
4. ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت إذا لم يسبق لك ذلك.
5. أعِد تحميل التطبيق.

يمكنك فحص هذه الملفات والتأكّد من أنّ الإصدارات الجديدة لا تحتوي على أي مسافات بيضاء. الملفان أصغر حجمًا بكثير. تم تقليل حجم animate.css بنسبة حوالى 26%، ما ساعد على توفير حوالي 20 كيلوبايت!

كخطوة أخيرة:

1. افتح صفحة القياس.
2. أدخِل عنوان URL للموقع الإلكتروني المحسَّن.
3. انقر على عرض التقرير.
4. انقر على الأداء وابحث عن قسم الفرص.

لا يعرض التقرير خيار "تصغير CSS". باسم "الفرصة" بعد ذلك، وانتقلَ الآن إلى القسم "عمليات التدقيق التي تم اجتيازها" :

بما أنّ ملفات CSS هي موارد تحظر العرض، إذا تم تطبيق الحدّ على المواقع الإلكترونية التي تستخدم ملفات CSS كبيرة، يمكنك الاطّلاع على تحسينات في مقاييس مثل سرعة عرض المحتوى على الصفحة.

الخطوات التالية والموارد

في هذا الدليل، تناولنا ميزة "تصغير المحتوى في CSS" باستخدام webpack، ولكن يمكن اتّباع النهج نفسه مع أدوات إنشاء أخرى، مثل gulp-clean-css في Gulp. grunt-contrib-cssmin for Grunt.

يمكن أيضًا تطبيق تصغير الصورة على أنواع أخرى من الملفات. اطّلِع على دليل تقليل حمولات الشبكة وضغطها للتعرّف على مزيد من المعلومات حول أدوات تقليل محتوى JavaScript وبعض الأساليب التكميلية، مثل الضغط.