تعرَّف على كيفية تحسين أوقات العرض باستخدام أسلوب CSS المُهم.
يجب على المتصفح تنزيل ملفات CSS وتحليلها قبل أن يتمكن من عرض الصفحة، ما يجعل CSS موردًا لحظر العرض. إذا كانت ملفات CSS كبيرة أو كانت ظروف الشبكة سيئة، يمكن أن تؤدي طلبات ملفات CSS إلى زيادة كبيرة في الوقت الذي يستغرقه عرض صفحة الويب.
إنّ تضمين الأنماط المستخرَجة في <head> لمستند HTML يلغي الحاجة إلى تقديم طلب إضافي لاسترجاع هذه الأنماط. يمكن تحميل بقية صفحات CSS بشكل غير متزامن.
يمكن أن يؤدي تحسين مدة العرض إلى إحداث فرق كبير في الأداء الملحوظ، خاصةً في ظل ظروف اتصال الشبكة السيئة. على شبكات الجوّال، يمثل وقت الاستجابة المرتفع مشكلة بصرف النظر عن معدل نقل البيانات.
إذا كانت قيمة سرعة عرض أول محتوى مرئي (FCP) لديك وظهرت فرصة "إزالة المورد الذي يحظر العرض" في عمليات تدقيق Lighthouse، ننصحك بتجربة محتوى CSS المهم.
لتقليل عدد جولات الذهاب والإياب للعرض الأول، حاوِل إبقاء المحتوى في الجزء المرئي من الصفحة أقل من 14 كيلوبايت (مضغوط).
ويعتمد تأثير الأداء الذي يمكنك تحقيقه باستخدام هذا الأسلوب على نوع موقعك الإلكتروني. بشكل عام، كلما ازداد عدد CSS في الموقع الإلكتروني، زاد التأثير المحتمل لهذه الخدمة.
نظرة عامة على الأدوات
هناك عدد من الأدوات الرائعة التي يمكنها أن تحدد بشكل تلقائي خدمة CSS المهمة لإحدى الصفحات. نحمل لك أخبارًا سارّة، لأنّ إجراء ذلك يدويًا سيكون عملية مُضجرة. يتطلب تحليل DOM بالكامل لتحديد الأنماط التي يتم تطبيقها على كل عنصر في إطار العرض.
مشاكل ملحّة
يعمل الوضع الحرج على استخراج محتوى CSS في الجزء المرئي من الصفحة وتصغيره وتضمينه كوحدة npm. ويمكن استخدامه مع Gulp (مباشرةً) أو مع Grunt (كمكوّن إضافي) كما يتوفر مكوّن Webpack أيضًا.
وهي أداة بسيطة تتطلّب الكثير من التفكير في هذه العملية. ولن تحتاج حتى إلى تحديد أوراق الأنماط، لأنّ بالغ الأهمية يكتشفها تلقائيًا. وتتيح أيضًا استخراج محتوى CSS المهم لدرجات دقة متعددة للشاشة.
criticalCSS
CriticalCSS هي وحدة أخرى من npm تعمل على استخراج محتوى CSS في الجزء المرئي من الصفحة. وهو متاح أيضًا كواجهة سطر الأوامر.
لا توفّر هذه الميزة خيارات لتضمين وتصغير محتوى CSS المهم، ولكنها تتيح لك فرض تضمين قواعد لا تنتمي فعليًا إلى CSS المهم، كما تتيح لك إمكانية تحكّم أكثر دقة في تضمين تعريفات @font-face.
شقة بنتهاوس
يُعد Penthouse خيارًا جيدًا إذا كان موقعك الإلكتروني أو تطبيقك يحتوي على عدد كبير من الأنماط أو الأنماط التي يتم إدخالها ديناميكيًا في DOM (وهو أمر شائع في تطبيقات Angular). تستخدم اللعبة Puppeteer بشكل غير مباشر، كما تتضمن نسخة مستضافة على الإنترنت.
لا يرصد Penthouse أوراق الأنماط تلقائيًا، لذا يجب تحديد ملفات HTML وCSS التي تريد إنشاء CSS مهم لها. الجانب الإيجابي هو أنها جيدة في إدارة العديد من الوظائف بالتوازي.