تحویل CSS را بهینه کنید

این قانون زمانی فعال می‌شود که PageSpeed ​​Insights تشخیص دهد که صفحه‌ای شامل شیوه‌نامه‌های خارجی مسدودکننده رندر است، که زمان اولین رندر را به تأخیر می‌اندازد.

بررسی اجمالی

قبل از اینکه مرورگر بتواند محتوا را ارائه کند، باید تمام اطلاعات سبک و چیدمان صفحه فعلی را پردازش کند. در نتیجه، مرورگر تا زمانی که شیوه نامه های خارجی دانلود و پردازش نشوند، رندر را مسدود می کند، که ممکن است به چندین بار رفت و برگشت نیاز داشته باشد و زمان رندر اولیه را به تاخیر بیندازد. برای کسب اطلاعات بیشتر در مورد مسیر حیاتی رندر و رندر Blocking CSS برای نکاتی در مورد نحوه رفع انسداد رندر و بهبود تحویل CSS، ساختار درخت رندر، طرح‌بندی و رنگ را ببینید.

توصیه ها

اگر منابع CSS خارجی کوچک هستند، می‌توانید آن‌ها را مستقیماً در سند HTML وارد کنید که به آن Inlining می‌گویند. درون‌سازی 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>
    <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 مراجعه کنید، که می تواند با Critical ، ابزاری برای استخراج CSS حیاتی از یک صفحه وب، کار کند.

سبک‌های حیاتی مورد نیاز برای استایل دادن به محتوای بالای صفحه، خط‌بندی شده و بلافاصله روی سند اعمال می‌شوند. کوچک.css کامل پس از نقاشی اولیه صفحه بارگذاری می شود. سبک‌های آن پس از اتمام بارگذاری، بدون مسدود کردن رندر اولیه محتوای مهم، روی صفحه اعمال می‌شوند.

توجه داشته باشید که پلتفرم وب به زودی از بارگیری شیوه نامه ها به شیوه ای غیر رندر-مسدود کننده، بدون نیاز به استفاده از جاوا اسکریپت، با استفاده از واردات HTML پشتیبانی می کند.

URIهای داده بزرگ را درون خطی نکنید

هنگام قرار دادن URI داده ها در فایل های CSS مراقب باشید. در حالی که استفاده انتخابی از URI های داده کوچک در CSS شما ممکن است منطقی باشد، داخل کردن URI داده های بزرگ می تواند باعث بزرگتر شدن اندازه CSS بالای صفحه شما شود که زمان رندر صفحه را کاهش می دهد.

ویژگی های CSS را درون خطی نکنید

تا جایی که ممکن است باید از قرار دادن ویژگی‌های CSS روی عناصر HTML (به عنوان مثال <p style=...> ) اجتناب شود، زیرا اغلب منجر به تکرار کد غیرضروری می‌شود. علاوه بر این، CSS درون خطی در عناصر HTML به طور پیش‌فرض با خط‌مشی امنیت محتوا (CSP) مسدود می‌شود.

بازخورد

این صفحه به شما کمک کرد؟