visibilitas konten: properti CSS baru yang meningkatkan performa rendering Anda

Tingkatkan waktu pemuatan awal dengan melewati rendering konten di balik layar.

Jeremy Wagner

Una Kravets

Vladimir Levin

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.

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

Blog perjalanan biasanya berisi seperangkat cerita dengan beberapa gambar, dan beberapa teks deskriptif. Berikut yang terjadi di browser biasa saat menavigasi ke blog perjalanan:

1. Sebagian halaman didownload dari jaringan, bersama dengan semua yang diperlukan Google Cloud Platform.
2. {i>Browser<i} menata gaya dan menata letak semua konten laman, tanpa mempertimbangkan apakah konten dapat dilihat oleh pengguna atau tidak.
3. 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.

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:

Lalu, 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:

• Spesifikasi Penahanan CSS
• Dokumen MDN di CSS {i>Containment<i} (Pembatasan)
• Draf CSSWG