Mengoptimalkan Pengiriman CSS

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa halaman menyertakan eksternal pemblokiran render stylesheet yang menunda waktu render pertama.

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 render, tata letak, dan penggambaran untuk mempelajari lebih lanjut jalur rendering penting, dan render memblokir CSS untuk mendapatkan tips tentang cara membuka pemblokiran rendering dan meningkatkan penayangan 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 resource small.css terlihat 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/non-kritis, penyisipan CSS kritis, dan penundaan pemuatan CSS yang tidak penting, dapat otomatis dilakukan oleh Modul Pengoptimalan PageSpeed untuk nginx, apache, IIS, ATS, dan Open Lightspeed, jika Anda mengaktifkan filter prioritize_critical_css.

Lihat juga loadCSS untuk membantu memuat CSS secara asinkron, yang dapat digunakan Kritis, alat untuk mengekstrak CSS penting dari halaman web.

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 menjadi inline (mis., <p style=...>) harus dihindari jika memungkinkan, karena hal ini sering kali menyebabkan duplikasi kode yang tidak perlu. Selanjutnya, CSS sebaris pada elemen HTML diblokir secara default dengan Kebijakan Keamanan Konten (CSP).

Masukan

Apakah halaman ini membantu?