CSS Pemblokir Render

Ilya Grigorik

Dipublikasikan: 31 Maret 2014

Secara default, CSS diperlakukan sebagai resource pemblokir render, yang berarti browser tidak akan merender konten yang telah diproses hingga CSSOM dibuat. Pastikan CSS Anda tetap rapi, kirimkan secepat mungkin serta menggunakan jenis dan kueri media untuk membuka blokir rendering.

Dalam konstruksi hierarki render, kita melihat bahwa jalur rendering penting memerlukan DOM dan CSSOM untuk membuat hierarki render. Hal ini menimbulkan implikasi kinerja penting: baik HTML maupun CSS merupakan resource pemblokir render. HTML terlihat jelas, karena tanpa DOM kita tidak memiliki apa pun untuk dirender, namun persyaratan CSS mungkin tidak begitu jelas. Apa yang akan terjadi jika kita mencoba merender halaman biasa tanpa pemblokir rendering pada CSS?

Ringkasan

  • Secara default, CSS diperlakukan sebagai sumber daya pemblokir render.
  • Jenis media dan kueri media memungkinkan kita untuk menandai beberapa sumber daya CSS sebagai bukan pemblokiran render.
  • Browser mengunduh semua resource CSS, terlepas dari perilaku pemblokiran atau bukan pemblokiran.
NYTimes dengan CSS
The New York Times dengan CSS
NYTimes tanpa CSS
The New York Times tanpa CSS (FOUC)

Contoh sebelumnya, yang menampilkan situs web New York Times dengan dan tanpa CSS, menunjukkan mengapa rendering diblokir sampai CSS tersedia—tanpa CSS, halaman tersebut relatif tidak dapat digunakan. Pengalaman di sebelah kanan sering disebut sebagai Flash of Unstyled Content (FOUC). Browser memblokir rendering hingga memiliki baik DOM maupun GCLID.

CSS adalah resource pemblokir render. Hubungkan ke klien secepatnya untuk mengoptimalkan waktu render pertama.

Akan tetapi, bagaimana jika kita memiliki beberapa gaya CSS yang hanya digunakan dalam kondisi tertentu, misalnya, saat laman dicetak atau diproyeksikan ke monitor besar? Lebih baik kita tidak memblokir rendering pada resource ini.

"Jenis media" dan "kueri media" CSS memungkinkan kita menangani kasus penggunaan ini:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Kueri media terdiri dari jenis media dan nol atau lebih banyak ekspresi yang memeriksa kondisi fitur media tertentu. Misalnya, deklarasi lembar gaya pertama kita tidak menyediakan jenis atau kueri media, sehingga berlaku di semua kasus; artinya, selalu memblokir render. Di sisi lain, deklarasi lembar gaya kedua hanya berlaku saat konten sedang dicetak—mungkin Anda ingin mengatur ulang tata letak, mengubah font, dan pertimbangan desain penting lainnya untuk pencetakan. Oleh karena itu, deklarasi stylesheet ini tidak perlu memblokir rendering halaman saat dimuat pertama kali. Terakhir, deklarasi stylesheet terakhir menyediakan "kueri media", yang dieksekusi oleh browser: jika kondisinya cocok, browser akan memblokir rendering hingga stylesheet didownload dan diproses.

Dengan menggunakan kueri media, kita dapat menyesuaikan presentasi dengan kasus penggunaan tertentu seperti tampilan versus cetak, juga dengan kondisi dinamis seperti perubahan orientasi layar, kejadian pengubahan ukuran, dan lainnya. Saat mendeklarasikan aset stylesheet Anda, perhatikan baik-baik tipe dan kueri media; keduanya sangat memengaruhi kinerja jalur rendering penting.

Perhatikan contoh berikut:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • Deklarasi pertama adalah pemblokiran render dan cocok di semua kondisi.
  • Deklarasi kedua juga merupakan pemblokiran render: "all" adalah jenis default, sehingga jika Anda tidak menentukan jenis, secara implisit akan disetel ke "all". Oleh karena itu, deklarasi pertama dan kedua sebenarnya setara.
  • Deklarasi ketiga memiliki kueri media dinamis, yang dievaluasi saat halaman dimuat. Bergantung pada orientasi perangkat saat halaman dimuat, portrait.css mungkin merupakan pemblokir render atau mungkin tidak.
  • Deklarasi terakhir hanya berlaku saat halaman sedang dicetak ("print"), sehingga bukan pemblokiran render saat halaman dimuat pertama kali di browser.

Terakhir, perhatikan bahwa "pemblokiran render" hanya merujuk pada apakah browser harus menahan rendering awal untuk laman pada resource tersebut. Dalam kedua kasus tersebut, browser tetap mendownload aset CSS, meski dengan prioritas lebih rendah untuk resource yang tidak memblokir.

Masukan