Tingkatkan waktu pemuatan awal dengan melewati rendering konten di balik layar.
Properti
content-visibility, yang diluncurkan di Chromium 85, mungkin menjadi salah satu properti CSS baru
yang paling berpengaruh untuk meningkatkan performa pemuatan halaman. content-visibility memungkinkan
agen pengguna melewati tugas rendering elemen, termasuk tata letak dan proses menggambar,
hingga diperlukan. Karena rendering dilewati, jika sebagian besar konten Anda berada di luar layar, pemanfaatan properti content-visibility akan membuat pengguna awal dimuat jauh lebih cepat. Hal ini juga memungkinkan interaksi yang lebih cepat dengan
konten di layar. Cukup rapi.
content-visibility: auto ke area konten yang terpotong akan meningkatkan performa rendering 7x pada pemuatan awal. Baca terus untuk mempelajari lebih lanjut.Dukungan browser
content-visibility bergantung pada primitif dalam Spesifikasi Pembatasan
CSS. Meskipun saat ini content-visibility hanya
didukung di Chromium 85 (dan dianggap "layak
membuat prototipe" untuk
Firefox), Spesifikasi Containment didukung di sebagian besar
browser modern.
Pembatasan CSS
Tujuan utama dan menyeluruh dari pembatasan CSS adalah memungkinkan peningkatan performa rendering konten web dengan memberikan isolasi subpohon DOM yang dapat diprediksi dari bagian halaman lainnya.
Pada dasarnya, developer dapat memberi tahu browser bagian halaman mana yang dienkapsulasi sebagai kumpulan konten, sehingga browser dapat menjelaskan konten tanpa perlu mempertimbangkan status di luar subhierarki. Mengetahui bit konten (subtree) yang berisi konten terisolasi berarti browser dapat membuat keputusan pengoptimalan untuk rendering halaman.
Ada empat jenis pembatasan
CSS,
masing-masing nilai potensial untuk properti CSS contain, yang dapat digabungkan
dalam daftar nilai yang dipisahkan spasi:
size: Pembatasan ukuran pada elemen memastikan bahwa kotak elemen dapat diletakkan tanpa perlu memeriksa turunannya. Artinya, kita berpotensi melewati tata letak turunan jika yang dibutuhkan hanyalah ukuran elemen.layout: Pembatasan tata letak berarti turunan tidak memengaruhi tata letak eksternal kotak lain di halaman. Ini memungkinkan kita untuk melewatkan tata letak turunan jika yang ingin kita lakukan hanyalah meletakkan kotak lainnya.style: Pembatasan gaya memastikan bahwa properti yang dapat memiliki efek pada lebih dari sekadar turunannya tidak meng-escape elemen (mis. penghitung). Hal ini memungkinkan kita untuk melewati komputasi gaya untuk turunan jika yang diinginkan hanyalah menghitung gaya pada elemen lain.paint: Pembatasan cat memastikan bahwa turunan kotak yang memuatnya tidak ditampilkan di luar batasnya. Tidak ada yang dapat terlihat melebihi elemen, dan jika elemen berada di luar layar atau tidak terlihat, turunannya juga tidak akan terlihat. Ini memungkinkan kita untuk melewati pengecatan turunan jika elemen berada di balik layar.
Melewati pekerjaan rendering dengan content-visibility
Mungkin sulit untuk mengetahui nilai pembatasan yang akan digunakan, karena pengoptimalan
browser mungkin hanya aktif saat kumpulan yang sesuai telah ditentukan. Anda dapat bermain-main dengan nilai untuk melihat mana yang paling sesuai, atau Anda dapat menggunakan properti CSS lain yang disebut content-visibility untuk menerapkan pembatasan yang diperlukan secara otomatis. content-visibility memastikan Anda mendapatkan peningkatan performa terbesar yang bisa diberikan browser dengan upaya minimal dari Anda sebagai developer.
Properti visibilitas konten menerima beberapa nilai, tetapi auto adalah nilai yang memberikan peningkatan performa langsung. Elemen yang memiliki
content-visibility: auto akan mendapatkan pembatasan layout, style, dan paint. Jika
elemen berada di luar layar (dan tidak relevan dengan pengguna—elemen yang
relevan adalah elemen yang memiliki fokus atau pilihan di subtreenya), elemen tersebut
juga mendapatkan pembatasan size (dan akan menghentikan
lukisan
dan
hit-testing
kontennya).
Apa maksudnya? Singkatnya, jika elemen berada di luar layar, turunannya tidak akan dirender. Browser menentukan ukuran elemen tanpa mempertimbangkan semua kontennya, lalu berhenti di situ. Sebagian besar rendering, seperti penataan gaya dan tata letak subhierarki elemen akan dilewati.
Saat elemen mendekati area tampilan, browser tidak lagi menambahkan pembatasan size
dan mulai melakukan menggambar dan melakukan hit-testing konten elemen. Hal ini
memungkinkan tugas rendering dilakukan tepat pada waktunya untuk dilihat oleh pengguna.
Catatan tentang aksesibilitas
Salah satu fitur content-visibility: auto adalah konten di luar layar tetap tersedia dalam model objek dokumen, dan juga hierarki aksesibilitas (tidak seperti visibility: hidden). Artinya, konten tersebut dapat ditelusuri di halaman dan dibuka, tanpa menunggu konten dimuat atau mengorbankan performa rendering.
Namun, sisi lain dari hal ini adalah bahwa elemen landmark dengan fitur gaya seperti display: none atau visibility: hidden juga akan muncul di hierarki aksesibilitas saat berada di luar layar, karena browser tidak akan merender gaya ini hingga memasuki area pandang. Agar hal tersebut tidak terlihat di hierarki aksesibilitas, yang berpotensi menyebabkan kekacauan, pastikan juga untuk menambahkan aria-hidden="true".
Contoh: blog perjalanan
content-visibility: auto pada bagian-bagian kecil di sebelah kiri. Hasilnya menunjukkan waktu rendering yang berlangsung dari 232 md hingga 30 md saat pemuatan halaman awal.Blog perjalanan biasanya berisi serangkaian cerita dengan beberapa gambar, dan beberapa teks deskriptif. Berikut yang terjadi di browser biasa saat membuka blog perjalanan:
- Sebagian halaman didownload dari jaringan, beserta semua resource yang diperlukan.
- Browser menata gaya dan menata letak semua konten halaman, tanpa mempertimbangkan apakah konten dapat dilihat oleh pengguna atau tidak.
- Browser kembali ke langkah 1 hingga semua halaman dan resource selesai didownload.
Pada langkah 2, browser akan memproses semua konten untuk mencari hal-hal yang mungkin telah berubah. Elemen ini memperbarui gaya dan tata letak elemen baru, beserta elemen yang mungkin telah bergeser akibat update baru. Ini adalah pekerjaan rendering. Ini membutuhkan waktu.
Sekarang pertimbangkan apa yang terjadi jika Anda menempatkan content-visibility: auto di setiap
cerita dalam blog. Loop umumnya sama: browser mendownload dan merender potongan halaman. Namun, perbedaannya terletak pada
jumlah pekerjaan yang dilakukannya di langkah 2.
Dengan visibilitas konten, fitur ini akan menata gaya dan menata letak semua konten yang saat ini terlihat oleh pengguna (konten ada di layar). Namun, saat memproses cerita yang sepenuhnya berada di luar layar, browser akan melewatkan pekerjaan rendering dan hanya menata gaya dan tata letak kotak elemen itu sendiri.
Performa pemuatan halaman ini akan seolah-olah berisi cerita penuh di layar dan kotak kosong untuk setiap cerita di luar layar. Performanya jauh lebih baik, dengan pengurangan yang diharapkan sebesar 50% atau lebih dari biaya rendering pemuatan. Dalam contoh ini, kami melihat peningkatan dari waktu rendering 232 md menjadi waktu rendering 30 md. Itu adalah peningkatan performa 7x.
Pekerjaan apa yang perlu Anda lakukan untuk mendapatkan manfaat ini? Pertama, kami membagi konten menjadi beberapa bagian:
story diterapkan, untuk menerima content-visibility: auto. Lihat Demo di CodepenLalu, kami menerapkan aturan gaya berikut pada bagian tersebut:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
Menentukan ukuran alami elemen dengan contain-intrinsic-size
Untuk merealisasikan potensi manfaat content-visibility, browser
perlu menerapkan pembatasan ukuran untuk memastikan bahwa hasil rendering konten
tidak memengaruhi ukuran elemen dengan cara apa pun. Ini berarti bahwa elemen
akan diletakkan seolah-olah kosong. Jika elemen tidak memiliki tinggi yang ditentukan
dalam tata letak blok reguler, tingginya akan memiliki 0.
Ini mungkin tidak ideal karena ukuran scrollbar akan berubah, sehingga bergantung pada setiap story yang memiliki tinggi bukan nol.
Untungnya, CSS menyediakan properti lain, contain-intrinsic-size, yang
secara efektif menentukan ukuran alami elemen jika elemen
terpengaruh oleh pembatasan ukuran. Dalam contoh ini, kita menyetelnya ke 1000px sebagai
perkiraan tinggi dan lebar bagian.
Ini berarti div ini akan ditata seolah-olah memiliki satu turunan dari dimensi "ukuran intrinsik", yang memastikan div yang tidak berukuran tersebut masih menempati ruang.
contain-intrinsic-size bertindak sebagai ukuran placeholder sebagai pengganti konten yang dirender.
Di Chromium 98 dan seterusnya, ada kata kunci auto
baru untuk contain-intrinsic-size. Jika ditentukan, browser akan mengingat
ukuran yang terakhir dirender, jika ada, dan menggunakannya, bukan ukuran placeholder
yang disediakan developer. Misalnya, jika Anda menentukan contain-intrinsic-size: auto 300px, elemen
akan dimulai dengan ukuran intrinsik 300px di setiap dimensi, tetapi setelah
konten elemen dirender, ukuran intrinsik yang dirender akan dipertahankan.
Setiap perubahan ukuran rendering berikutnya juga akan diingat. Dalam praktiknya, hal ini berarti bahwa jika Anda
men-scroll elemen dengan diterapkan content-visibility: auto, lalu men-scroll kembali
di luar layar, elemen tersebut akan otomatis mempertahankan lebar dan tinggi idealnya, dan tidak mengembalikan
ke ukuran placeholder. Fitur ini sangat berguna untuk scrolling tanpa batas,
yang kini dapat otomatis meningkatkan estimasi ukuran dari waktu ke waktu saat pengguna
menjelajahi halaman.
Menyembunyikan konten dengan content-visibility: hidden
Bagaimana jika Anda ingin konten tetap tidak dirender, terlepas dari apakah konten tersebut
berada di layar atau tidak, sambil memanfaatkan manfaat status rendering yang di-cache? Masukkan:
content-visibility: hidden.
Properti content-visibility: hidden memberi Anda semua manfaat yang sama dari
konten yang tidak dirender dan status rendering yang di-cache seperti yang dilakukan content-visibility: auto
di luar layar. Namun, tidak seperti auto, metode ini tidak otomatis mulai
dirender di layar.
Hal ini memberi Anda lebih banyak kontrol, sehingga memungkinkan Anda menyembunyikan konten elemen dan kemudian memperlihatkannya dengan cepat.
Bandingkan dengan cara umum lain untuk menyembunyikan konten elemen:
display: none: menyembunyikan elemen dan menghancurkan status renderingnya. Ini berarti memperlihatkan elemen sama mahalnya dengan merender elemen baru dengan konten yang sama.visibility: hidden: menyembunyikan elemen dan mempertahankan status renderingnya. Tindakan ini tidak benar-benar menghapus elemen dari dokumen, karena elemen tersebut (dan subpohonnya) masih membutuhkan ruang geometris pada halaman dan masih dapat diklik. Class ini juga memperbarui status rendering setiap kali diperlukan bahkan saat disembunyikan.
Di sisi lain, content-visibility: hidden menyembunyikan elemen sekaligus
mempertahankan status renderingnya sehingga, jika ada perubahan yang perlu
terjadi, perubahan hanya terjadi saat elemen ditampilkan lagi (yaitu
properti content-visibility: hidden dihapus).
Beberapa kasus penggunaan yang bagus untuk content-visibility: hidden adalah saat menerapkan
scroller virtual lanjutan dan mengukur tata letak. VM ini juga sangat bagus untuk
aplikasi web satu halaman (SPA). Tampilan aplikasi yang tidak aktif dapat dibiarkan di DOM dengan
content-visibility: hidden diterapkan untuk mencegah tampilannya, tetapi mempertahankan
status dalam cache. Ini membuat tampilan cepat dirender saat aktif kembali.
Efek pada Interaksi dengan Gambar Berikutnya (INP)
INP adalah metrik yang mengevaluasi kemampuan halaman untuk tetap responsif terhadap input pengguna secara andal. Responsivitas dapat dipengaruhi oleh banyaknya pekerjaan yang terjadi di thread utama, termasuk pekerjaan rendering.
Kapan pun Anda bisa mengurangi pekerjaan rendering di halaman tertentu, Anda memberikan kesempatan ke thread utama untuk merespons input pengguna dengan lebih cepat. Hal ini termasuk pekerjaan rendering, dan penggunaan properti CSS content-visiblity jika perlu dapat mengurangi pekerjaan rendering—terutama selama startup, saat sebagian besar pekerjaan rendering dan tata letak dilakukan.
Mengurangi pekerjaan rendering memiliki efek langsung terhadap INP. Saat pengguna mencoba berinteraksi dengan halaman yang menggunakan properti content-visibility dengan benar untuk menunda tata letak dan rendering elemen di luar layar, Anda memberi thread utama kesempatan untuk merespons pekerjaan penting yang terlihat oleh pengguna. Tindakan ini dapat meningkatkan INP halaman Anda dalam beberapa situasi.
Kesimpulan
content-visibility dan Spesifikasi Pembatasan CSS berarti beberapa peningkatan performa
yang menarik akan langsung hadir di file CSS Anda. Untuk informasi lebih lanjut tentang
properti ini, lihat: