تحسين تسليم CSS

يتم تفعيل هذه القاعدة عندما يرصد "إحصاءات PageSpeed" أنّ الصفحة تتضمن حظر العرض خارجيًا. أوراق الأنماط، مما يؤخر الوقت اللازم للعرض لأول مرة.

نظرة عامة

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

اقتراحات

إذا كانت موارد CSS الخارجية محدودة، يمكنك إدخال هذه الموارد مباشرة في مستند HTML، ويتم تسمية ذلك بالتضمين. ويتيح تضمين موارد CSS المحدودة بهذه الطريقة للمتصفح إمكانية متابعة عرض الصفحة. يُرجى العِلم أنّه إذا كان ملف CSS كبيرًا، قد يؤدي تضمين CSS بالكامل إلى ظهور تحذير في "إحصاءات PageSpeed" بأنّ الجزء المرئي من الصفحة. من الصفحة كبير جدًا من خلال إعطاء الأولوية للمحتوى المرئي. وفي حالة وجود ملف 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>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

ويشمل هذا التحويل، بما في ذلك تحديد صفحات الأنماط المتتالية (CSS) المهمة/غير المهمة بتضمين لغة CSS المهمة والتحميل المؤجل لخدمة CSS غير المهمة تلقائيًا عن طريق وحدات تحسين PageSpeed بالنسبة إلى nginx، وapache، وIIS، وATS، وOpen Lightspeed، عند تمكين prioritize_critical_css.

يمكنك الاطّلاع أيضًا على loadCSS للمساعدة في تحميل صفحات الأنماط المتتالية (CSS) بشكل غير متزامن، والتي يمكنها أن تتوافق مع مهمة أداة لاستخراج لغة CSS المهمة من صفحة ويب.

يتم تضمين الأنماط المهمة اللازمة لتصميم محتوى الجزء المرئي من الصفحة وتطبيقها على المستند على الفور. يتم تحميل ملف css.الصغير بالكامل بعد الرسم الأولي للصفحة. ويتم تطبيق أنماطها على الصفحة بعد انتهاء التحميل، بدون حظر العرض الأولي للمحتوى المهم.

تجدر الإشارة إلى أنّ منصة الويب ستوفّر قريبًا إمكانية تحميل أوراق الأنماط بطريقة لا تؤدي إلى حظر العرض، بدون الحاجة إلى اللجوء إلى استخدام JavaScript، وذلك من خلال عمليات استيراد HTML.

لا تضمِّن عناوين URL لبيانات كبيرة

توخ الحذر عند تضمين عناوين URL للبيانات في ملفات CSS. وعلى الرغم من أن الاستخدام الانتقائي لمعرّفات الموارد المنتظمة (URI) للبيانات الصغيرة في CSS قد يكون منطقيًا، إلا أنّ تضمين يمكن أن تؤدي معرّفات الموارد المنتظمة (URI) للبيانات الكبيرة إلى زيادة حجم CSS في الجزء المرئي من الصفحة، ما يؤدي إلى إبطاء وقت عرض الصفحة.

لا تضمِّن سمات CSS

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

ملاحظات

هل كان المحتوى في هذه الصفحة مفيدًا؟