优化CSS发送过程

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

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

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

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

إذا كان مستند HTML يبدو كما يلي :

< html >
< head >
< link rel="stylesheet " href="small.css" >
< / head >
< body >
< div class = " أزرق" >
هيلو، العالم !
< / div >
< / 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 الأصلي حتى يتم تحميل صفحة الويب. ضع الكل عبر جافا سكريبت<style>و<link>يتم إدراج العناصر في المستند للحفاظ على الترتيب الذي يتم به تطبيق قواعد CSS.

كن حذرًا عند تضمين URI للبيانات في ملف CSS. يمكنك اختيار استخدام URIs أصغر للبيانات في CSS، لأن تضمين URIs أكبر للبيانات سيؤدي إلى أن تصبح الشاشة الأولى CSS أكبر، مما يؤدي إلى تأخير وقت تقديم صفحة الويب.

حاول تجنب عناصر HTML ( على سبيل المثال،< p style=...>يتم تضمين خاصية CSS في هذا، لأن هذا غالبًا ما يؤدي إلى تكرار الرمز.بالإضافة إلى ذلك،سياسة أمن المحتوىسيمنع ( CSP ) تضمين CSS على عناصر HTML افتراضيًا.

 

باستثناء ملاحظة أخرى، فإن محتوى هذه الصفحة مرخص به بموجبالسمة المشتركة الإبداعية 3.0 License)، ورخصات الرموز المرخصة بموجب القانون (طراز Apache 2.0 Licenseمن أجل المفصولين، انظرالسياسات الموقعية.