تعرَّف على كيفية تحسين مُدد العرض باستخدام أسلوب CSS الأساسي.
يجب أن ينزِّل المتصفِّح ملفات CSS ويحلّلها قبل أن يتمكن من عرض الصفحة، ما يجعل CSS موردًا يحظر العرض. إذا كانت ملفات CSS كبيرة، أو كانت ظروف الشبكة رديئة، يمكن أن تؤدي طلبات ملفات CSS إلى زيادة كبيرة في الوقت الذي يستغرقه عرض صفحة الويب.
إنّ تضمين الأنماط المستخرجة في <head> من مستند HTML يغنيك عن إجراء طلب إضافي لاسترجاع هذه الأنماط. يمكن تحميل باقي صفحات CSS بشكل غير متزامن.
إنّ تحسين مدة العرض يمكن أن يحدث فرقًا كبيرًا في الأداء الملحوظ، لا سيما في ظل ظروف الاتصال السيئة بالشبكة. يمثل وقت الاستجابة الطويل مشكلة في شبكات الجوّال بغض النظر عن معدل نقل البيانات.
إذا كانت سرعة سرعة عرض المحتوى على الصفحة (FCP) ضعيفة، وظهرت لك رسالة "إزالة مورد حظر العرض". فرصة جيدة في عمليات تدقيق Lighthouse، من الجيد تجربة CSS المهمة.
لتقليل عدد الرحلات ذهابًا وإيابًا للعرض الأول، ركِّز على إبقاء محتوى الجزء المرئي من الصفحة أقل من 14 كيلوبايت (مضغوط).
يعتمد التأثير الذي يمكنك تحقيقه على الأداء باستخدام هذا الأسلوب على نوع موقعك الإلكتروني. بشكل عام، كلما زاد عدد خدمات مقارنة الأسعار (CSS) في الموقع الإلكتروني، زاد التأثير المحتمل لملفات 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 مهم لها. الجانب الإيجابي هو أنها جيدة في إدارة العديد من الوظائف بالتوازي.