Tunda CSS yang tidak penting

Demián Renzulli
Demián Renzulli
X GitHub Gangguan

File CSS adalah resource pemblokir render: file tersebut harus dimuat dan diproses sebelum browser merender halaman. Laman web yang berisi style sheet yang tidak perlu besar memerlukan waktu lebih lama untuk dirender.

Dalam panduan ini, Anda akan mempelajari cara menunda CSS non-penting untuk mengoptimalkan Jalur Rendering Penting dan meningkatkan First Contentful Paint (FCP).

Contoh: pemuatan CSS yang kurang optimal

Contoh berikut berisi akordeon dengan tiga paragraf teks tersembunyi, yang masing-masing diberi gaya dengan class yang berbeda:

Halaman ini meminta file CSS dengan delapan class, tetapi tidak semuanya diperlukan untuk merender konten "terlihat".

Tujuan panduan ini adalah mengoptimalkan halaman ini sehingga hanya gaya penting yang dimuat secara sinkron, sedangkan yang lainnya (termasuk gaya paragraf), dimuat dengan cara yang tidak memblokir.

Ukur

Jalankan Lighthouse di halaman, lalu buka bagian Performa.

Laporan menampilkan metrik First Contentful Paint dengan nilai "1s", dan peluang Eliminate render-blocking resources, yang mengarah ke file style.css:

Laporan Lighthouse untuk halaman yang tidak dioptimalkan, yang menampilkan FCP '1 detik' dan 'Hilangkan resource yang memblokir' di bagian 'Peluang'
Laporan Lighthouse menyarankan untuk menyederhanakan lembar gaya agar halaman dimuat lebih cepat.

Untuk memvisualisasikan cara CSS ini memblokir rendering:

  1. Buka halaman di Chrome.
  2. Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools.
  3. Klik tab Performa.
  4. Di panel Performa, klik Muat ulang.

Dalam rekaman aktivitas yang dihasilkan, Anda akan melihat bahwa penanda FCP ditempatkan segera setelah CSS selesai dimuat:

Rekaman aktivitas performa DevTools untuk halaman yang tidak dioptimalkan, yang menampilkan FCP yang dimulai setelah CSS dimuat.
Di halaman demo yang tidak dioptimalkan, FCP tidak dapat terjadi hingga CSS selesai dimuat.

Artinya, browser harus menunggu semua CSS dimuat dan diproses sebelum menggambar satu piksel di layar.

Optimalkan

Untuk mengoptimalkan halaman ini, Anda perlu mengetahui class mana yang dianggap penting. Untuk menentukannya, gunakan Alat Cakupan:

  1. Di DevTools, buka Menu Perintah dengan menekan Control+Shift+P atau Command+Shift+P (Mac).
  2. Ketik "Cakupan", lalu pilih Tampilkan Cakupan.
  3. Klik Muat ulang untuk memuat ulang halaman dan mulai merekam cakupan.
Cakupan untuk file CSS, yang menampilkan 55,9% byte yang tidak digunakan.
Laporan cakupan menunjukkan seberapa banyak CSS Anda yang benar-benar digunakan dalam pemuatan halaman awal.

Klik dua kali laporan untuk melihat detail:

  • Class yang ditandai dengan warna hijau sangat penting. Browser memerlukannya untuk merender konten yang terlihat, termasuk judul, subtitel, dan tombol akordeon.
  • Class yang ditandai dengan warna merah tidak penting, hanya memengaruhi konten yang tidak langsung terlihat, seperti paragraf tersembunyi.

Dengan informasi ini, optimalkan CSS Anda agar browser dapat mulai memproses gaya penting segera setelah halaman dimuat dan menunda CSS non-penting untuk nanti:

  1. Ekstrak definisi class yang ditandai dengan warna hijau dalam laporan cakupan, dan tempatkan class tersebut dalam blok <style> di bagian awal halaman:

    <style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>

  2. Muat class lainnya secara asinkron dengan menerapkan pola berikut:

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Ini bukan cara standar untuk memuat CSS. Berikut caranya:

  • link rel="preload" as="style" meminta sheet gaya secara asinkron. Anda dapat mempelajari preload lebih lanjut di Panduan pramuat aset penting.
  • Atribut onload di link memungkinkan browser memproses CSS saat style sheet selesai dimuat.
  • "Me-null" pengendali onload setelah digunakan membantu beberapa browser menghindari memanggil kembali pengendali saat beralih atribut rel.
  • Referensi ke sheet gaya di dalam elemen noscript memberikan fallback untuk browser yang tidak menjalankan JavaScript.

Halaman yang dihasilkan terlihat sama persis dengan versi sebelumnya, meskipun sebagian besar gaya dimuat secara asinkron. Berikut tampilan gaya inline dan permintaan asinkron ke file CSS dalam file HTML:

Memantau

Gunakan DevTools untuk menjalankan rekaman aktivitas Performa lain di halaman yang dioptimalkan.

Penanda FCP muncul sebelum halaman meminta CSS, yang berarti browser tidak perlu menunggu CSS dimuat sebelum merender halaman:

Rekaman aktivitas kinerja DevTools untuk halaman yang dioptimalkan, yang menampilkan FCP yang dimulai sebelum CSS dimuat.
Di halaman yang dioptimalkan, FCP dapat dimulai sebelum sheet gaya dimuat.

Sebagai langkah terakhir, jalankan Lighthouse di halaman yang dioptimalkan.

Dalam laporan, Anda akan melihat bahwa halaman FCP telah dikurangi sebesar 0,2 detik (peningkatan sebesar 20%):

Laporan Lighthouse, yang menampilkan nilai FCP &#39;0,8 detik&#39;.
FCP baru yang dikurangi.

Saran Eliminate render-blocking resources tidak lagi muncul di bagian Opportunities, dan sebagai gantinya berada di bagian Passed Audits:

Penggambaran laporan Lighthouse, yang menampilkan &#39;Eliminate blocking resources&#39; di bagian &#39;Passed Audits&#39;.
Halaman kini lulus audit resource pemblokiran.

Langkah berikutnya & referensi

Dalam panduan ini, Anda telah mempelajari cara menunda CSS non-penting dengan mengekstrak kode yang tidak digunakan di halaman secara manual. Untuk lingkungan produksi yang lebih kompleks, panduan mengekstrak CSS penting membahas beberapa alat paling populer untuk mengekstrak CSS penting dan menyertakan codelab untuk melihat cara kerjanya dalam praktik