visibilitas konten: properti CSS baru yang meningkatkan performa rendering Anda

Memperbaiki waktu pemuatan awal dengan melewati rendering konten di luar layar.

Jeremy Wagner

Una Kravets

Vladimir Levin

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 pekerjaan rendering elemen, termasuk tata letak dan pengecatan, hingga diperlukan. Karena rendering dilewati, jika sebagian besar konten Anda berada di luar layar, pemanfaatan properti content-visibility akan membuat pemuatan pengguna awal 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 Spesifikasi Pembatasan CSS. Meskipun untuk saat ini content-visibility hanya didukung di Chromium 85 (dan dianggap "layak membuat prototipe" untuk Firefox), Spesifikasi Pembatasan didukung di browser yang paling modern.

Pembatasan CSS

Tujuan utama dan menyeluruh dari pembatasan CSS adalah memungkinkan peningkatan performa rendering konten web dengan menyediakan isolasi yang dapat diprediksi dari sub-hierarki DOM dari bagian halaman lainnya.

Pada dasarnya, developer dapat memberi tahu browser bagian halaman mana yang dienkapsulasi sebagai sekumpulan konten, sehingga browser dapat menjelaskan konten tersebut tanpa perlu mempertimbangkan status di luar sub-hierarki. Mengetahui bit konten (sub-hierarki) 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 ditata tanpa perlu memeriksa turunannya. Ini berarti kita bisa berpotensi melewatkan tata letak turunan jika yang kita butuhkan hanyalah ukuran elemen.
• layout: Pembatasan tata letak berarti turunan tidak memengaruhi tata letak eksternal kotak lain di halaman. Hal ini memungkinkan kita untuk berpotensi melewatkan tata letak turunan jika yang ingin kita lakukan adalah menata letak kotak lainnya.
• style: Pembatasan gaya memastikan bahwa properti yang dapat memiliki efek lebih dari sekedar turunannya tidak meng-escape elemen (misalnya penghitung). Hal ini memungkinkan kita berpotensi melewati komputasi gaya untuk turunan jika yang kita inginkan adalah menghitung gaya pada elemen lain.
• paint: Penahanan cat memastikan bahwa turunan kotak penampung 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. Hal ini memungkinkan kita untuk berpotensi melewatkan pengecatan turunan jika elemen berada di balik layar.

Melewati proses rendering dengan content-visibility

Mungkin sulit untuk mengetahui nilai pembatasan mana yang akan digunakan, karena pengoptimalan browser hanya dapat dimulai saat set yang sesuai telah ditentukan. Anda dapat mencoba-coba nilai ini untuk melihat nilai yang paling cocok, 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 dapat 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 mendapatkan pembatasan layout, style, dan paint. Jika elemen berada di luar layar (dan tidak relevan bagi pengguna—elemen yang relevan adalah elemen yang memiliki fokus atau pemilihan di subpohonnya), elemen tersebut juga memperoleh pembatasan size (dan menghentikan penggambaran dan hit-testing kontennya).

Apa maksudnya? Singkatnya, jika elemen berada di luar layar, turunannya tidak akan dirender. Browser menentukan ukuran elemen tanpa mempertimbangkan kontennya, dan browser akan 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 menggambar dan melakukan hit-testing konten elemen. Hal ini memungkinkan pekerjaan rendering dilakukan tepat pada waktunya agar dapat dilihat oleh pengguna.

Catatan tentang aksesibilitas

Salah satu fitur content-visibility: auto adalah konten di luar layar tetap tersedia dalam model objek dokumen, sehingga hierarki aksesibilitas (tidak seperti visibility: hidden). Artinya, konten tersebut dapat ditelusuri di halaman, dan dibuka, tanpa menunggu untuk dimuat atau mengorbankan performa rendering.

Namun, sisi sebaliknya adalah 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 masuk ke area pandang. Agar keduanya tidak terlihat di hierarki aksesibilitas, yang berpotensi menyebabkan kekacauan, pastikan juga untuk menambahkan aria-hidden="true".

Contoh: blog perjalanan

Blog perjalanan biasanya berisi kumpulan cerita dengan beberapa gambar dan beberapa teks deskriptif. Berikut adalah hal yang terjadi pada browser pada umumnya saat membuka blog perjalanan:

1. Sebagian halaman didownload dari jaringan, beserta resource yang diperlukan.
2. Browser menata gaya dan menata letak semua konten halaman, tanpa mempertimbangkan apakah konten dapat dilihat oleh pengguna atau tidak.
3. Browser kembali ke langkah 1 hingga semua halaman dan resource sudah didownload.

Pada langkah 2, browser memproses semua konten untuk mencari hal-hal yang mungkin telah berubah. Library ini memperbarui gaya dan tata letak elemen baru, beserta elemen yang mungkin telah bergeser akibat update baru. Ini adalah rendering pekerjaan. Proses ini memerlukan waktu.

Sekarang pertimbangkan apa yang terjadi jika Anda menempatkan content-visibility: auto pada setiap artikel individual dalam blog. Loop umum sama: browser mendownload dan merender potongan halaman. Namun, perbedaannya terletak pada jumlah pekerjaan yang dilakukan pada langkah 2.

Dengan visibilitas konten, aplikasi akan menata gaya dan menata letak semua konten yang saat ini terlihat oleh pengguna (konten yang ada di layar). Namun, saat memproses cerita yang sepenuhnya berada di luar layar, browser akan melewati pekerjaan rendering dan hanya menata gaya dan tata letak kotak elemen itu sendiri.

Performa halaman ini akan seolah-olah berisi cerita di layar yang penuh 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, kita melihat peningkatan dari waktu rendering 232 md menjadi waktu rendering 30 md. Itu peningkatan performa 7x.

Apa pekerjaan yang perlu Anda lakukan untuk mendapatkan manfaat ini? Pertama, kita membagi konten menjadi beberapa bagian:

Kemudian, kami menerapkan aturan gaya berikut ke 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 memengaruhi ukuran elemen dengan cara apa pun. Ini berarti bahwa elemen tersebut akan diletakkan seolah-olah kosong. Jika elemen tidak memiliki tinggi yang ditetapkan dalam tata letak blok reguler, tingginya akan 0.

Ini mungkin tidak ideal, karena ukuran scrollbar akan bergeser, bergantung pada setiap cerita yang memiliki tinggi bukan nol.

Untungnya, CSS menyediakan properti lain, contain-intrinsic-size, yang secara efektif menentukan ukuran alami elemen jika elemen dipengaruhi oleh pembatasan ukuran. Dalam contoh kita, kita menetapkannya ke 1000px sebagai perkiraan tinggi dan lebar bagian.

Artinya, div akan memiliki tata letak seolah-olah memiliki satu turunan dari dimensi "ukuran intrinsik", yang memastikan bahwa div yang tidak berukuran besar tetap 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 diberikan developer. Misalnya, jika Anda menentukan contain-intrinsic-size: auto 300px, elemen akan memulai dengan ukuran intrinsik 300px di setiap dimensi, tetapi setelah konten elemen dirender, elemen akan mempertahankan ukuran intrinsik yang dirender. Setiap perubahan ukuran rendering berikutnya juga akan diingat. Dalam praktiknya, hal ini berarti jika Anda men-scroll elemen dengan menerapkan content-visibility: auto, lalu men-scroll kembali keluar layar, elemen tersebut akan otomatis mempertahankan lebar dan tinggi idealnya, dan tidak kembali ke ukuran placeholder. Fitur ini sangat berguna untuk scrolling tanpa batas, yang kini dapat otomatis meningkatkan estimasi ukuran dari waktu ke waktu seiring pengguna menjelajahi halaman.

Menyembunyikan konten dengan content-visibility: hidden

Bagaimana jika Anda ingin agar konten tetap tidak dirender, terlepas dari apakah konten tersebut ada 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, kode ini tidak otomatis mulai merender di layar.

Tindakan ini memberi Anda lebih banyak kontrol, sehingga Anda dapat 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. Artinya, memperlihatkan elemen sama mahalnya seperti 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 sub-hierarkinya) 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 sambil 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. Desain ini 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 mempertahankan status dalam cache. Hal ini membuat tampilan cepat dirender saat aktif kembali.

Efek pada Interaksi terhadap Next Paint (INP)

INP adalah metrik yang mengevaluasi kemampuan halaman untuk secara andal dan responsif terhadap input pengguna. Responsivitas dapat dipengaruhi oleh jumlah pekerjaan berlebihan yang terjadi di thread utama, termasuk pekerjaan rendering.

Setiap kali Anda dapat mengurangi pekerjaan rendering di halaman tertentu, Anda memberikan kesempatan kepada thread utama untuk merespons input pengguna dengan lebih cepat. Hal ini termasuk pekerjaan rendering, dan menggunakan properti CSS content-visiblity jika sesuai dapat mengurangi pekerjaan rendering—terutama selama startup, ketika sebagian besar pekerjaan rendering dan tata letak sudah selesai.

Mengurangi pekerjaan rendering memiliki efek langsung pada 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 memberikan 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 menarik akan segera hadir di file CSS Anda. Untuk mengetahui informasi lebih lanjut tentang properti ini, baca:

• Spesifikasi Pembatasan CSS
• Dokumen MDN tentang Pembatasan CSS
• Draf CSSWG