سواء كنت تستخدم مكتبة واجهة المستخدم أو كنت تصنع أنماطًا يدويًا، يمكنك شحن قدر كبير من تأخيرات العرض في CSS لأنّ المتصفّح يجب أن ينزّل ملفات CSS ويحلّلها لكي يتمكن من عرض الصفحة.
تم إنشاء معرض الآيس كريم سريع الاستجابة هذا باستخدام Bootstrap. تُسري مكتبات واجهة المستخدم، مثل Bootstrap، عملية التطوير، ولكن غالبًا ما يكون ذلك على حساب CSS المتضخم وغير الضروري، ما قد يؤدي إلى إبطاء أوقات التحميل. يبلغ حجم Bootstrapp 4 187 كيلوبايت، في حين أن حجم Semantic UI، وهو مكتبة واجهة مستخدم أخرى، يبلغ حجمها 730 كيلوبايت بدون ضغط. حتى بعد تصغير Bootstrap وضغطه بتنسيق gzip، لا يزال حجمه حوالي 20 كيلوبايت، أي أكثر بكثير من الحدّ الأدنى البالغ 14 كيلوبايت لأول رحلة ذهاب وإياب.
المهمة هي أداة لاستخراج CSS وتصغيرها وتضمينها في الجزء المرئي من الصفحة. يتيح ذلك عرض المحتوى الظاهر فوق الشاشة في أقرب وقت ممكن، حتى إذا لم يتم تحميل أوراق CSS الخاصة بأجزاء أخرى من الصفحة بعد. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام وحدة npm في Critical.
القياس
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على
ملء الشاشة
.
لإجراء تدقيق Lighthouse على هذا الموقع الإلكتروني:
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب Lighthouse.
- انقر على الأجهزة الجوّالة.
- ضَع علامة في مربّع الاختيار الأداء.
- أزِل العلامة من مربّعات الاختيار الأخرى في قسم "عمليات التدقيق".
- انقر على شبكة الجيل الثالث السريعة المحاكية، ووحدة المعالجة المركزية (CPU) أبطأ بأربعة أضعاف.
- ضَع علامة في مربّع الاختيار محو مساحة التخزين. عند تحديد هذا الخيار، لن تحمِّل أداة Lighthouse الموارد من ذاكرة التخزين المؤقت، ما يحاكي تجربة الزوّار للمرة الأولى.
- انقر على تنفيذ عمليات التدقيق.
عند إجراء تدقيق على جهازك، قد تختلف النتائج الدقيقة، ولكن في عرض شريط الصور، ستلاحظ ظهور شاشة فارغة في التطبيق لفترة طويلة قبل عرض المحتوى في النهاية. لهذا السبب، تكون سرعة عرض المحتوى على الصفحة (FCP) مرتفعة وتكون نتيجة الأداء العام غير جيدة.
يساعدك Lighthouse في حلّ مشاكل الأداء، لذا ابحث عن الحلول في قسم الفرص. يتم إدراج إزالة الموارد التي تمنع العرض كإحدى الفرص، وهذا هو المكان الذي يبرز فيه الأداء "الحرِج".
تحسين
- انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.
لتسريع العملية، سبق أن تم تثبيت Critical، وتم تضمين ملف إعدادات فارغ في ورشة رموز البرامج.
في ملف الإعدادات critical.js، أضِف إشارة إلى Critical ثم استخدِم الدالة 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 مرة أخرى. ستظهر لك النتائج بالشكل التالي:
