CSS Pemblokir Render

Ilya Grigorik

Dipublikasikan: 31 Maret 2014

Secara default, CSS diperlakukan sebagai sumber daya pemblokir render, yang berarti bahwa browser tidak akan merender konten apa pun yang diproses hingga GCLID diproses 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. Ini menimbulkan implikasi performa yang penting: baik HTML maupun CSS sama-sama 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.
  • Tipe media dan kueri media memungkinkan kita menandai sebagian resource 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 kali disebut sebagai Flash of Unstyled Content (FOUC). Browser memblokir rendering hingga browser memiliki baik DOM maupun CSSOM.

CSS adalah resource pemblokir render. Kirim ke klien sesegera mungkin 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 lembar gaya tidak perlu memblokir rendering halaman saat pertama kali dimuat. Akhirnya, deklarasi {i>style sheet<i} yang terakhir menyediakan kueri media,” yang dijalankan oleh browser: jika kondisinya cocok, browser akan memblokir rendering hingga style sheet didownload dan diproses.

Dengan menggunakan kueri media, kita dapat menyesuaikan presentasi dengan kasus penggunaan tertentu, seperti tampilan versus cetak, dan juga dengan kondisi dinamis seperti perubahan orientasi layar, kejadian pengubahan ukuran, dan banyak lagi. Saat mendeklarasikan aset lembar gaya Anda, perhatikan dengan cermat jenis dan kueri medianya; dan performa jalur rendering yang penting sangat terpengaruh.

Pikirkan 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 sama.
  • 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 diterapkan saat halaman sedang dicetak ("print") sehingga bukan pemblokiran render saat halaman pertama kali dimuat di browser.

Terakhir, perhatikan bahwa "pemblokiran render" hanya merujuk pada apakah browser harus menahan rendering awal untuk laman pada resource tersebut. Dalam kasus mana pun, browser tetap akan mendownload aset CSS, meskipun dengan prioritas lebih rendah untuk resource yang bukan pemblokiran.

Masukan