Tingkatkan waktu pemuatan awal dengan melewati rendering konten di balik layar.
Tujuan
content-visibility
, yang diluncurkan di Chromium 85, mungkin menjadi salah satu CSS baru yang paling berpengaruh
untuk meningkatkan performa pemuatan halaman. content-visibility
mengaktifkan
agen pengguna untuk melewati proses rendering elemen, termasuk tata letak dan penggambaran,
hingga dibutuhkan. Karena rendering dilewati, jika sebagian besar
konten berada di luar layar, memanfaatkan properti content-visibility
akan membuat
pemuatan pengguna awal
menjadi jauh lebih cepat. Hal ini juga memungkinkan interaksi yang lebih cepat dengan
konten di layar. Cukup rapi.
![demo dengan gambar yang merepresentasikan hasil jaringan](https://web.dev/static/articles/content-visibility/image/demo-figures.jpg?authuser=19&hl=id)
content-visibility: auto
ke area konten yang terpotong akan memberikan peningkatan performa rendering 7x pada pemuatan awal. Baca terus untuk mempelajari lebih lanjut.Dukungan browser
content-visibility
bergantung pada primitif dalam Pembatasan CSS
Spesifikasi. Meskipun content-visibility
hanya
didukung di Chromium 85 untuk saat ini (dan dianggap "bernilai
pembuatan prototipe" untuk
Firefox), Spesifikasi Penampung didukung dalam versi terbaru
browser.
Pembatasan CSS
Tujuan utama dari pembatasan CSS adalah untuk memungkinkan proses rendering peningkatan kinerja konten web dengan memberikan pengisolasian yang dapat diprediksi subhierarki DOM dari bagian halaman lainnya.
Pada dasarnya, developer dapat memberi tahu browser tentang bagian halaman mana yang dienkapsulasi sebagai sekumpulan konten, yang memungkinkan browser untuk memahami konten tanpa perlu mempertimbangkan status di luar sub-hierarki. Mengetahui bit konten mana (subtree) berisi konten terisolasi berarti browser dapat melakukan pengoptimalan untuk rendering halaman.
Ada empat jenis CSS
pembatasan,
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 ditata tanpa perlu memeriksa turunannya. Ini berarti kita bisa bisa melewatkan tata letak turunan jika yang dibutuhkan adalah ukuran .layout
: Pembatasan tata letak berarti turunan tidak memengaruhi tata letak eksternal kotak lainnya di laman. Hal ini memungkinkan kita untuk melewati tata letak turunan jika yang ingin kita lakukan adalah meletakkan kotak-kotak lainnya.style
: Pembatasan gaya memastikan bahwa properti yang dapat berpengaruh pada lebih dari sekadar turunannya tidak meng-escape elemen (mis. penghitung). Ini memungkinkan kita untuk melewati komputasi gaya untuk turunannya jika semua inginkan adalah komputasi gaya pada elemen lain.paint
: Pembatasan cat memastikan bahwa turunan kotak yang memuatnya tidak ditampilkan di luar batas-batasnya. Tidak ada yang bisa tampak melampaui elemen, dan jika suatu elemen berada di luar layar atau tidak terlihat, turunannya akan juga tidak terlihat. Hal ini memungkinkan kita untuk melewatkan proses pengecatan turunan jika elemen berada di balik layar.
Melewati pekerjaan rendering dengan content-visibility
Mungkin sulit untuk mengetahui nilai {i>containment<i} mana yang akan digunakan, karena {i>browser<i}
pengoptimalan dapat berjalan hanya jika set yang sesuai telah ditentukan. Anda dapat
utak-atik nilai ini untuk melihat apa yang sesuai
terbaik, atau Anda
dapat menggunakan properti CSS lain yang disebut content-visibility
untuk menerapkan
pembatasan secara otomatis. content-visibility
memastikan Anda mendapatkan
peningkatan kinerja yang dapat diberikan browser dengan sedikit upaya dari Anda sebagai
developer.
Properti visibilitas konten menerima beberapa nilai, tetapi auto
adalah nilai yang dimaksud
yang memberikan peningkatan performa langsung. Sebuah elemen yang memiliki
content-visibility: auto
mendapatkan pembatasan layout
, style
, dan paint
. Jika
elemen berada di luar layar (dan tidak relevan dengan pengguna—relevan
elemen yang memiliki fokus atau pilihan di sub-hierarki), maka
juga mendapatkan pembatasan size
(dan menghentikan
lukisan
dan
hit-testing
isinya).
Apa maksudnya? Singkatnya, jika elemen berada di luar layar, turunannya akan tidak dirender. {i>Browser<i} menentukan ukuran elemen tanpa mempertimbangkan semua isinya, dan berhenti di situ. Sebagian besar rendering, seperti penataan gaya dan tata letak subtree elemen dilewati.
Saat elemen mendekati area tampilan, browser tidak lagi menambahkan size
pembatasan dan mulai melakukan pengecatan dan
pengujian konten elemen. Ini
memungkinkan pekerjaan 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 oleh karena itu, hierarki aksesibilitas (tidak seperti visibility: hidden
). Artinya, konten dapat ditelusuri di halaman, dan dibuka, tanpa menunggu pemuatan 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 area yang terpotong di sebelah kiri. Hasilnya menunjukkan waktu rendering yang berlangsung dari 232 md hingga 30 md saat pemuatan halaman awal.Blog perjalanan biasanya berisi seperangkat cerita dengan beberapa gambar, dan beberapa teks deskriptif. Berikut yang terjadi di browser biasa saat menavigasi ke blog perjalanan:
- Sebagian halaman didownload dari jaringan, bersama dengan semua yang diperlukan Google Cloud Platform.
- {i>Browser<i} menata gaya dan menata letak semua konten laman, tanpa mempertimbangkan apakah konten dapat dilihat oleh pengguna atau tidak.
- Browser kembali ke langkah 1 hingga semua halaman dan resource diunduh.
Di langkah 2, browser memproses semua konten untuk mencari hal-hal yang mungkin berubah. Ini memperbarui gaya dan tata letak setiap elemen baru, bersama dengan elemen yang mungkin telah bergeser sebagai akibat dari pembaruan baru. Ini sedang dirender Anda. Ini membutuhkan waktu.
![Screenshot blog perjalanan.](https://web.dev/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?authuser=19&hl=id)
Sekarang pertimbangkan apa yang terjadi jika Anda menempatkan content-visibility: auto
di setiap
cerita individu dalam blog. Loop umumnya sama: browser
mengunduh dan
merender potongan laman. Namun, perbedaannya terletak pada
jumlah pekerjaan yang dilakukannya pada langkah 2.
Dengan visibilitas konten, fungsi ini akan menata gaya dan tata letak semua konten yang saat ini terlihat oleh pengguna (mereka ada di layar). Namun, saat memproses cerita yang sepenuhnya berada di luar layar, {i>browser<i} melewati proses rendering dan hanya gaya dan tata letak kotak elemen itu sendiri.
Performa pemuatan halaman ini akan seolah-olah berisi layar penuh di layar dan kotak kosong untuk setiap berita di luar layar. Fungsi ini menghasilkan banyak lebih baik, dengan pengurangan yang diharapkan sebesar 50% atau lebih dari biaya rendering memuat. 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, kita membagi konten menjadi beberapa bagian:
![Screenshot beranotasi yang memotong konten menjadi beberapa bagian dengan class CSS.](https://web.dev/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?authuser=19&hl=id)
story
, 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 mewujudkan potensi manfaat content-visibility
, browser
perlu menerapkan pembatasan ukuran untuk memastikan bahwa hasil rendering konten
tidak mempengaruhi 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 biasa, maka tingginya 0.
Ini mungkin tidak ideal, karena ukuran scrollbar akan bergeser, bergantung pada setiap cerita yang memiliki ketinggian selain 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-bagian tersebut.
Artinya, contoh ini akan ditata seolah-olah memiliki satu turunan "ukuran intrinsik"
memastikan div yang tidak berukuran tetap menempati ruang.
contain-intrinsic-size
bertindak sebagai ukuran placeholder sebagai pengganti konten yang dirender.
Di Chromium 98 dan seterusnya, ada auto
baru
kata kunci untuk contain-intrinsic-size
. Jika ditentukan, browser akan mengingat
ukuran yang terakhir dirender, jika ada, dan menggunakannya, bukan placeholder yang disediakan developer
ukuran. Misalnya, jika Anda menentukan contain-intrinsic-size: auto 300px
,
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, ini
berarti bahwa jika Anda
scroll elemen dengan content-visibility: auto
diterapkan, lalu scroll kembali
di luar layar, layar akan secara otomatis mempertahankan lebar dan tinggi idealnya, dan tidak mengembalikan
ukuran {i>placeholder<i}. Fitur ini sangat berguna untuk scrolling tanpa batas,
yang sekarang dapat secara otomatis meningkatkan estimasi ukuran
dari waktu ke waktu ketika pengguna
menjelajahi halaman.
Menyembunyikan konten dengan content-visibility: hidden
Bagaimana jika Anda ingin agar konten tetap tidak dirender, terlepas dari apakah konten tersebut tidak dirender atau tidak
ada di layar, sambil memanfaatkan keuntungan 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 secara otomatis memulai
{i>render<i} di layar.
Ini memberi Anda lebih banyak kontrol, memungkinkan Anda untuk menyembunyikan isi 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. Ini tidak benar-benar menghapus elemen dari dokumen, karena elemen tersebut (dan itu merupakan subpohon) menempati ruang geometris pada laman dan masih dapat diklik. Ini juga memperbarui status rendering setiap kali diperlukan bahkan saat disembunyikan.
Di sisi lain, content-visibility: hidden
menyembunyikan elemen saat
mempertahankan status rendering-nya, jadi, jika ada perubahan yang perlu
terjadi, hal itu hanya terjadi ketika 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 tata letak pengukuran. Cara itu juga
bagus untuk
aplikasi web satu halaman (SPA). Tampilan aplikasi yang tidak aktif dapat dibiarkan di DOM dengan
content-visibility: hidden
diterapkan untuk mencegah tampilan, tetapi mempertahankannya
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 performa yang menarik
peningkatan akan langsung dilakukan
di file CSS Anda. Untuk informasi selengkapnya tentang
properti, lihat: