سواء كنت تستخدم مكتبة واجهة مستخدم أو تعرض الأنماط يدويًا، عليك شحن قدر كبير من تأخيرات العرض في CSS لأنّ المتصفّح يجب أن ينزّل ملفات CSS ويحلّلها لكي يتمكن من عرض الصفحة.
تم إنشاء معرض الآيس كريم سريع الاستجابة هذا باستخدام Bootstrap. تُسرِّع مكتبات واجهة المستخدم، مثل Bootstrap، عملية التطوير، ولكن غالبًا ما ينتج ذلك على حساب CSS المتضخم وغير الضروري، ما قد يؤدي إلى إبطاء أوقات التحميل. يبلغ حجم Bootstrapp 4 187 كيلوبايت، في حين تبلغ مساحة Semantic UI، وهي مكتبة أخرى لواجهة المستخدم، حجم هائل غير مضغوط بحجم 730 كيلوبايت. حتى بعد تصغيره وضغطه بتنسيق gzip، لا يزال وزن Bootstrap حوالي 20 كيلوبايت، وهو ما يتجاوز الحد الأدنى البالغ 14 كيلوبايت في أول رحلة ذهاب وعودة.
المهمة هي أداة لاستخراج CSS وتصغيرها وتضمينها في الجزء المرئي من الصفحة. يسمح ذلك بعرض محتوى الجزء المرئي من الصفحة في أسرع وقت ممكن، حتى إذا لم يتم تحميل CSS لأجزاء أخرى من الصفحة. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام وحدة npm في Critical.
القياس
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط
ملء الشاشة
لإجراء تدقيق Lighthouse على هذا الموقع الإلكتروني:
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
- انقر على علامة التبويب Lighthouse.
- انقر على الأجهزة الجوّالة.
- ضع علامة في مربّع الاختيار الأداء.
- امسح بقية مربّعات الاختيار في قسم "عمليات التدقيق".
- انقر على محاكاة شبكة الجيل الثالث السريعة، 4x بطء وحدة المعالجة المركزية (CPU).
- ضَع علامة في مربّع الاختيار محو مساحة التخزين. من خلال تحديد هذا الخيار، لن تحمِّل أداة Lighthouse الموارد من ذاكرة التخزين المؤقت، والتي يحاكي تجربة الزائرين لأول مرة في الصفحة.
- انقر على تشغيل عمليات التدقيق.
عند إجراء تدقيق على جهازك، قد تختلف النتائج الدقيقة، ولكن في عرض شريط الصور، ستلاحظ ظهور شاشة فارغة في التطبيق لفترة طويلة قبل عرض المحتوى في النهاية. وهذا هو سبب ارتفاع معدّل سرعة عرض المحتوى على الصفحة (FCP)، وسبب انخفاض نتيجة الأداء الإجمالية.
تساعدك أداة Lighthouse على حلّ المشاكل في الأداء، لذا ابحث عن حلول في قسم الفرص. يتم إدراج إزالة الموارد التي تحظر العرض كفرصة، وهنا تكمن أهمية كبرى.
تحسين
- انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
لتسريع العملية، تم تثبيت "المهمة" من قبل وتضمين ملف إعداد فارغ في الدرس التطبيقي حول الترميز.
في ملف الإعداد critical.js، أضِف مرجعًا إلى "مهمة" ثم استدعِ الدالة critical.generate(). تقبل هذه الدالة كائنًا يحتوي على الإعدادات.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
معالجة الأخطاء ليست إلزامية، ولكنها طريقة سهلة لقياس نجاح العملية في وحدة التحكم.
ضبط الإعدادات البالغة الأهمية
يتضمن الجدول أدناه بعض الخيارات المهمة المفيدة. يمكنك الاطّلاع على كل الخيارات المتاحة على GitHub.
| Option | النوع | الشرح |
|---|---|---|
base |
سلسلة | الدليل الأساسي لملفاتك |
src |
سلسلة | ملف HTML المصدر. |
dest |
سلسلة | الهدف من ملف الإخراج. إذا تم تضمين CSS، فيكون ملف الإخراج HTML. إذا لم يكن الأمر كذلك، سيكون الإخراج ملف CSS. |
width، height |
أرقام | عرض إطار العرض وارتفاعه بالبكسل |
dimensions |
صفيف | يحتوي على كائنات بخصائص العرض والارتفاع. تمثل هذه الكائنات إطارات العرض التي تريد استهدافها باستخدام CSS للجزء المرئي من الصفحة. إذا كانت لديك استعلامات عن الوسائط في CSS، سيتيح لك ذلك إنشاء محتوى CSS مهم يغطي أحجام إطارات عرض متعددة. |
inline |
منطقي | عند الضبط على "صحيح"، يتم تضمين لغة CSS المهمة التي تم إنشاؤها في ملف HTML المصدر. |
minify |
منطقي | عند ضبط هذه السياسة على "صحيح"، تقلّل الحالة "حرجة" من حجم CSS المهم الذي تم إنشاؤه. يمكن الحذف عند استخراج محتوى CSS المهم لدرجات دقة متعددة، نظرًا إلى تصغيره تلقائيًا لتجنّب تضمين القاعدة بشكل متكرر. |
في ما يلي مثال على الضبط لاستخراج محتوى CSS المهم للحصول على درجات دقة متعددة. يمكنك إضافته إلى critical.js أو تغيير خياراتك.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
في هذا المثال، يمثّل index.html كلاً من الملف المصدر والملف الوجهة بسبب ضبط الخيار inline على "صحيح". يقرأ "المهمة" ملف HTML المصدر أولاً، ويستخرج لغة CSS المهمة، ثم يستبدل index.html بـ CSS المهم المضمّن في <head>.
تتضمن مصفوفة dimensions حجمي إطار عرض محدّدين: 300 × 500 للشاشات الصغيرة جدًا و1280 × 720 لشاشات الكمبيوتر المحمول العادية.
تم حذف الخيار minify لأن "المهمة" تعمل على تصغير حجم CSS المستخرج تلقائيًا عند تحديد أحجام متعددة لإطار العرض.
تشغيل حرج
إضافة "مهمة" إلى النصوص البرمجية في package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- انقر على Terminal (ملاحظة: إذا لم يظهر الزر "طرفي"، قد تحتاج إلى استخدام خيار "ملء الشاشة").
لإنشاء محتوى CSS مهم، شغِّل في وحدة التحكّم:
npm run critical
refresh
الآن في علامة <head> الخاصة بـ index.html، يتم تضمين CSS المهم الذي تم إنشاؤه بين علامات <style>، متبوعًا بنص برمجي يحمّل بقية محتوى CSS بشكل غير متزامن.
القياس مرة أخرى
اتّبِع الخطوات من بداية الدرس التطبيقي حول الترميز لإجراء تدقيق أداء Lighthouse مرة أخرى. ستبدو النتائج التي تحصل عليها مشابهة لما يلي:
