Tunda CSS yang tidak penting

Demián Renzulli

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

Dalam panduan ini, Anda akan mempelajari cara menunda CSS yang tidak 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 yang berisi delapan class, tetapi tidak semuanya diperlukan untuk merender konten yang "terlihat".

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

Ukur

Jalankan Lighthouse di halaman dan buka bagian Performance.

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

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 Performance, klik Reload.

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

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

Pengoptimalan

Untuk mengoptimalkan halaman ini, Anda perlu mengetahui kelas mana yang dianggap penting. Untuk menentukan hal ini, gunakan Alat Cakupan:

1. Di DevTools, buka Command Menu 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.

Klik dua kali laporan untuk melihat detailnya:

• Class yang ditandai dengan warna hijau sangat penting. Browser membutuhkannya untuk merender konten yang terlihat, termasuk judul, subtitel, dan tombol akordeon.
• Class yang ditandai dengan warna merah tidak bersifat 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 tunda CSS yang tidak penting untuk nanti:

1. Ekstrak definisi class yang ditandai dengan warna hijau di laporan cakupan, dan tempatkan class tersebut dalam blok <style> di bagian atas 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 lembar gaya secara asinkron. Anda dapat mempelajari preload lebih lanjut dalam Panduan pramuat aset penting.
• Atribut onload di link memungkinkan browser memproses CSS saat style sheet selesai dimuat.
• "nulling" pengendali onload setelah digunakan membantu beberapa browser menghindari pemanggilan ulang pengendali saat mereka mengganti atribut rel.
• Referensi ke lembar gaya di dalam elemen noscript menyediakan penggantian untuk browser yang tidak menjalankan JavaScript.

Halaman yang dihasilkan akan terlihat persis seperti versi sebelumnya, bahkan saat sebagian besar gaya dimuat secara asinkron. Berikut adalah tampilan gaya inline dan permintaan asinkron ke file CSS di file HTML:

Memantau

Gunakan DevTools untuk menjalankan rekaman aktivitas Performance lainnya di halaman yang dioptimalkan.

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

Sebagai langkah terakhir, jalankan Lighthouse pada halaman yang dioptimalkan.

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

Saran Hilangkan resource yang memblokir render tidak lagi muncul di bagian Peluang, dan sekarang ada di bagian Lulus Audit:

Langkah berikutnya & referensi

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