تحسين تسليم 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>

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

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

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

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

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

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

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

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

إضافة ملاحظات

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