Optimalkan Pengiriman CSS

Aturan ini berlaku saat PageSpeed Insights mendeteksi adanya laman yang berisi stylesheet eksternal yang memblokir perenderan, yang menunda pelukisan konten ke layar.

Ikhtisar

Browser memblokir file CSS eksternal sebelum melukis konten ke layar. Hal ini menyebabkan latensi jaringan tambahan dan meningkatkan waktu yang dibutuhkan untuk menampilkan konten ke layar.

Saran

Apabila sumber daya CSS eksternal berukuran kecil, Anda dapat langsung memasukkannya ke dalam dokumen HTML, yang disebut penyebarisan. Menyebariskan CSS kecil dengan cara ini memungkinkan browser melanjutkan proses perenderan laman. Harap diingat apabila file CSS berukuran besar, menjadikan CSS sepenuhnya sebaris dapat menyebabkan PageSpeed Insights memperingatkan bahwa bagian paro atas laman terlalu besar via Prioritaskan Konten Terlihat. Apabila file CSS berukuran besar, Anda perlu mengidentifikasi dan menyebariskan CSS yang dibutuhkan untuk merender konten paro atas dan menunda pemuatan gaya yang tersisa sampai sesudah konten paro atas.

Contoh menyebariskan file CSS berukuran kecil

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 menyebariskan CSS penting seperti berikut:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Small.css asli dimuat setelah pemuatan laman. Urutan penerapan aturan CSS dipertahankan dengan memasukkan semua elemen <style> dan <link> ke dalam dokumen melalui javascript.

Jangan sebariskan URI data berukuran besar

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

Jangan sebariskan atribut CSS

Menyebariskan atribut CSS pada elemen HTML (misalnya, &lt p style=...&gt) sebaiknya dihindari jika memungkinkan, karena hal ini sering menyebabkan duplikasi kode yang tidak diperlukan. Selanjutnya, CSS sebaris pada elemen HTML diblokir secara default dengan Kebijakan Keamanan Konten (CSP).