Mengoptimalkan Pengiriman CSS

Aturan ini berlaku saat PageSpeed Insights mendeteksi adanya halaman yang berisi stylesheet eksternal yang memblokir perenderan, yang menunda waktu perenderan pertama kali.

Ringkasan

Sebelum browser dapat merender konten, browser harus memproses semua informasi gaya dan tata letak untuk halaman aktif. Akibatnya, browser akan memblokir perenderan hingga stylesheet eksternal didownload dan diproses, yang mungkin memerlukan beberapa roundtrip dan menunda waktu perenderan pertama kali. Lihat konstruksi pohon-perenderan, tata letak, dan pelukisan untuk mempelajari lebih lanjut tentang jalur perenderan kritis, dan CSS yang memblokir perenderan untuk mendapatkan tips terkait cara membuka pemblokiran perenderan dan meningkatkan pengiriman CSS.

Rekomendasi

Apabila sumber daya CSS eksternal berukuran kecil, Anda dapat langsung memasukkannya ke dalam dokumen HTML, yang disebut inlining. Membuat CSS kecil menjadi inline dengan cara ini memungkinkan browser melanjutkan proses perenderan halaman. Harap diingat jika file CSS berukuran besar, membuat CSS sepenuhnya menjadi inline dapat menyebabkan PageSpeed Insights memperingatkan bahwa bagian paruh atas halaman terlalu besar melalui Prioritaskan Konten Terlihat. Apabila file CSS berukuran besar, Anda perlu mengidentifikasi dan menyebariskan CSS yang dibutuhkan untuk merender konten paruh atas dan menunda pemuatan gaya yang tersisa sampai sesudah konten paruh atas.

Contoh membuat file CSS berukuran kecil menjadi inline

Jika dokumen HTML terlihat seperti ini: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
 Dan sumber daya small.css tampak seperti ini: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
 Anda dapat membuat CSS penting menjadi inline seperti berikut: 
<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>

Transformasi ini, termasuk penentuan CSS kritis/tidak kritis, inlining CSS ktitis, dan pemuatan CSS tidak kritis yang ditunda, dapat dilakukan secara otomatis dengan Modul Pengoptimalan PageSpeed untuk nginx, apache, IIS, ATS, dan Open Lightspeed, saat Anda mengaktifkan filter prioritize_critical_css.

Lihat juga fungsi loadCSS untuk membantu pemuatan CSS secara asinkron, yang dapat berfungsi dengan Critical, yaitu fitur untuk mengekstrak CSS kritis dari halaman.

Gaya penting yang perlu diterapkan untuk konten paruh atas secepatnya dijadikan inline dan diterapkan ke dokumen. Small.css lengkap dimuat setelah pelukisan awal halaman. Gayanya diterapkan ke halaman setelah CSS selesai dimuat, tanpa memblokir perenderan awal konten penting.

Perlu diperhatikan bahwa platform web akan segera mendukung pemuatan stylesheet dengan cara yang tidak memblokir perenderan, tanpa perlu memaksakan penggunaan JavaScript, dengan menggunakan Impor HTML.

Jangan membuat URI data berukuran besar menjadi inline

Hati-hati saat membuat URI data dalam file CSS menjadi inline. Meskipun penggunaan yang selektif atas URI data berukuran kecil dalam CSS Anda mungkin masuk akal, membuat URI data berukuran besar menjadi inline dapat menyebabkan ukuran CSS paruh atas menjadi lebih besar, yang akan memperlambat waktu perenderan halaman.

Jangan membuat atribut CSS menjadi inline

Membuat atribut CSS pada elemen HTML (misalnya, <p style=...>) menjadi inline sebaiknya dihindari jika memungkinkan, karena hal ini sering menyebabkan duplikasi kode yang tidak diperlukan. Selanjutnya, CSS inline di elemen HTML diblokir secara default dengan Kebijakan Keamanan Konten (CSP).