سواء كنت تستخدم مكتبة واجهة مستخدم أو صنعت أنماطك يدويًا، يمكنك شحن مقدار كبير من تأخيرات عرض CSS لأن المتصفح يجب أن ينزِّل ملفات CSS ويحلّلها قبل أن يتمكن من عرض الصفحة.
تم إنشاء متجر الآيس كريم سريع الاستجابة هذا باستخدام Bootstrap. تعمل مكتبات واجهة المستخدم مثل Bootstrap على تسريع التطوير، ولكن هذا غالبًا ما يكون على حساب CSS المتضخمة وغير الضرورية، والتي يمكن أن تبطئ أوقات التحميل. يبلغ حجم Bootstrap 4 187 كيلوبايت، في حين أن Semantic UI، وهي مكتبة أخرى لواجهة المستخدم، هي مكتبة غير مضغوطة بحجم 730 كيلوبايت. حتى عند تصغير حزمة Bootstrap وضغطها، لا يزال يزن حوالي 20 كيلوبايت، وهو ما يزيد عن الحد الأدنى وهو 14 كيلوبايت في أول رحلة ذهاب وعودة.
حرج هو أداة لاستخراج محتوى CSS في الجزء المرئي من الصفحة وتصغيره وتضمينه. ويتيح ذلك عرض المحتوى في الجزء المرئي من الصفحة في أقرب وقت ممكن، حتى إذا لم يتم تحميل CSS لأجزاء أخرى من الصفحة بعد. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام وحدة npm.
قياس
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على
ملء الشاشة
.
لإجراء تدقيق 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 |
boolean | عند ضبط هذه السياسة على "صحيح"، يتم تضمين محتوى CSS المهم الذي تم إنشاؤه في ملف مصدر HTML. |
minify |
boolean | عند ضبط هذه السياسة على "صحيح"، يقلّل هذا الخيار من محتوى 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 أولاً ملف مصدر HTML، ويستخرج محتوى CSS المهم، ثم يستبدل index.html بمحتوى CSS مهم مضمّن في <head>.
تحتوي مصفوفة dimensions على حجمَين محددَين لإطار العرض: 300 × 500 للشاشات الصغيرة جدًا و1280 × 720 لشاشات الكمبيوتر المحمول العادية.
تم حذف خيار minify لأنّ "الحرج" يؤدي تلقائيًا إلى تصغير CSS المستخرَج عند تحديد أحجام إطار عرض متعددة.
تشغيل حرج
إضافة بالغ الأهمية إلى نصوصك البرمجية في package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- انقر على المحطة الطرفية (ملاحظة: إذا لم يظهر زر المحطة الطرفية، فقد تحتاج إلى استخدام خيار ملء الشاشة).
لإنشاء محتوى CSS مهم، في وحدة التحكّم، شغِّل:
npm run critical
refresh
في العلامة <head> في index.html، يتم الآن تضمين محتوى CSS المهم الذي تم إنشاؤه بين علامات <style>، ويتبعه نص برمجي يُحمِّل بقية محتوى CSS بشكل غير متزامن.
القياس مرة أخرى
اتّبِع الخطوات من بداية الدرس التطبيقي حول الترميز لتشغيل عملية تدقيق أداء Lighthouse مرة أخرى. ستبدو النتائج التي تحصل عليها كما يلي:
