تحسين تسليم CSS
يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أن الصفحة تتضمن أوراق أنماط خارجية تحظر العرض وهو ما يؤدي بدوره إلى تأخر عرض المحتوى على الشاشة.
نظرة عامة
يحدث توقف في المتصفحات مع ملفات CSS الخارجية قبل عرض المحتوى على الشاشة. ويتسبب هذا في حدوث تأخر إضافي في الشبكة، كما يطيل الزمن الذي يلزم لعرض المحتوى على الشاشة.التوصيات
إذا كانت موارد CSS الخارجية محدودة، يمكنك إدخال هذه الموارد مباشرة في مستند HTML، ويتم تسمية ذلك بالتضمين. ويتيح تضمين موارد CSS المحدودة بهذه الطريقة للمتصفح إمكانية متابعة عرض الصفحة. وتجدر الإشارة إلى أنه عندما يكون ملف CSS كبيرًا، قد يتسبب تضمين CSS بالكامل في ظهور تحذير من PageSpeed Insights يفيد بأن الجزء العلوي من الصفحة كبير جدًا عبر منح الأولوية للمحتوى المرئي. وفي حالة وجود ملف CSS كبير، يلزمك تحديد أنماط CSS اللازمة وتضمينها لعرض محتوى الجزء العلوي من الصفحة، وتأجيل تحميل الأنماط المتبقية حتى بعد عرض محتوى الجزء العلوي من الصفحة.
مثال على تضمين ملف CSS صغير
إذا كان مستند HTML يظهر على النحو التالي:<html> <head> <link rel="stylesheet" href="small.css"> </head> <body> <div class="blue"> Hello, world! </div> </body> </html>
والمورد
small.css يظهر على النحو التالي:.yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; }
يمكنك تضمين ملف CSS كما يلي:
<html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <link rel="stylesheet" href="small.css">
يتم تحميل ملف css. الأصلي الصغير بعد تحميل الصفحة. ويتم الحفاظ على ترتيب التطبيق لقواعد CSS من خلال إدخال جميع عناصر
<style> و<link> في المستند من خلال جافا سكريبت.لا تضمِّن عناوين URL لبيانات كبيرة
توخ الحذر عند تضمين عناوين URL للبيانات في ملفات CSS. وعلى الرغم من أن الاستخدام الانتقائي لعناوين URL للبيانات الصغيرة في CSS قد يكون ذا مغزى، قد يتسبب تضمين عناوين URL لبيانات كبيرة في أن يصبح حجم أنماط CSS في الجزء العلوي من الصفحة أكبر، وهذا بدوره يؤدي إلى بطء في زمن عرض الصفحة.
لا تضمِّن سمات CSS
يجب تجنب تضمين سمات CSS على عناصر HTML قدر الإمكان (مثل،
< p style=...>) نظرًا لأن ذلك يؤدي غالبًا إلى تكرار رموز غير ضرورية. علاوة على ذلك، يتم حظر تضمين CSS على عناصر HTML افتراضيًا من خلال سياسة أمان المحتوى (CSP).
إرسال تعليق