تحسين عملية إرسال CSS

يتم تشغيل هذه القاعدة عندما تكتشف PageSpeed Insights أن صفحة الويب تحتوي على ورقة أنماط خارجية تمنع العرض ( ورقة أنماط تؤخر عرض المحتوى على الشاشة).

لمحة عامة

يقوم المستعرض بحظر ملفات CSS الخارجية حتى يتم عرض المحتوى على الشاشة. يمكن أن يؤدي ذلك إلى تأخير إضافي في الشبكة وإطالة الوقت الذي يتم فيه عرض المحتوى على الشاشة.

التوصيات

إذا كانت موارد CSS الخارجية صغيرة، فيمكنك إدراجها مباشرة في مستند HTML، والذي يسمى " مضمن". من خلال تضمين موارد CSS أصغر بهذه الطريقة، يمكن للمتصفح الاستمرار في تقديم صفحات الويب. لاحظ أنه إذا كان ملف CSS كبيرًا، فقد يتسبب CSS المدمج بالكامل في تمرير PageSpeed Insightsترتيب المحتوى المرئي حسب الأولويةتحذيرك من أن الشاشة الأولى لصفحة الويب كبيرة جدًا. إذا كان ملف CSS كبيرًا، فأنت بحاجة إلى تحديد وتضمين CSS المطلوب لتقديم محتوى الشاشة الأولى، وإيقاف تحميل الأنماط المتبقية حتى يتم عرض محتوى الشاشة الأولى.

• مثال على تضمين ملفات CSS أصغر
• لا تقم بتضمين URIs بيانات أكبر
• لا تقم بتضمين سمات CSS

مثال على تضمين ملفات CSS أصغر

إذا كان مستند HTML يبدو كما يلي : < html >
< head >
< link rel="stylesheet " href="small.css" >
< / head >
< body >
   
< / body >
< /html >

وsmall.cssوترد الموارد على النحو التالي :

yellow {background-color : yellow.}
زرقاء {color : زرقاء؛}
big {font-size:8em; }
bold {font-weight : bold; }

يمكنك تضمين CSS الرئيسية على النحو التالي :

< html >
< head >
< نمط >
زرقاء {color : زرقاء؛}
< /style >
< / head >
< body >
< div class = " أزرق" >
هيلو، العالم !
< / div >
< / body >
< /html >
< link rel="stylesheet " href="small.css" >

لن يتم تحميل small.css الأصلي حتى يتم تحميل صفحة الويب. ضع الكل عبر جافا سكريبت