visibilitas konten: properti CSS baru yang meningkatkan performa rendering Anda

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

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

Dipublikasikan: 5 Agustus 2020

Properti content-visibility memungkinkan agen pengguna melewati pekerjaan rendering elemen, termasuk tata letak dan gambar, hingga diperlukan. Karena rendering dilewati, jika sebagian besar konten Anda berada di luar layar, penggunaan properti content-visibility akan membuat beban pengguna awal jauh lebih cepat. Hal ini juga memungkinkan interaksi yang lebih cepat dengan konten di layar. Cukup rapi.

Dukungan Browser

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Sumber

demo dengan gambar yang mewakili hasil jaringan
Dalam demo artikel kami, penerapan content-visibility: auto ke area konten yang terpotong akan meningkatkan performa rendering 7x pada pemuatan awal. Baca terus untuk mempelajari lebih lanjut.

Pembatasan CSS

Sasaran utama dan menyeluruh dari pembatasan CSS adalah untuk memungkinkan peningkatan performa rendering konten web dengan menyediakan 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 memahami konten tanpa perlu mempertimbangkan status di luar sub-pohon. Mengetahui bagian konten mana (sub-pohon) yang berisi konten terisolasi berarti browser dapat membuat keputusan pengoptimalan untuk rendering halaman.

Ada empat jenis pembatasan CSS, masing-masing adalah 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. Artinya, kita dapat mengabaikan tata letak turunan jika yang kita butuhkan hanyalah ukuran elemen.
  • layout: Pembatasan tata letak berarti bahwa turunan tidak memengaruhi tata letak eksternal kotak lain di halaman. Hal ini memungkinkan kita untuk berpotensi melewati tata letak turunan jika yang ingin kita lakukan hanyalah menata letak kotak lain.
  • style: Pembatasan gaya memastikan bahwa properti yang dapat memengaruhi lebih dari sekadar turunannya tidak keluar dari elemen (misalnya, penghitung). Hal ini memungkinkan kita secara potensial melewati komputasi gaya untuk turunan jika yang kita inginkan hanya menghitung gaya pada elemen lain.
  • paint: Pembatasan 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 melewati proses menggambar turunan jika elemen berada di luar layar.

Melewati pekerjaan rendering dengan content-visibility

Mungkin sulit untuk mengetahui nilai pembatasan yang akan digunakan, karena pengoptimalan browser hanya dapat diterapkan jika kumpulan yang sesuai ditentukan. Anda dapat memainkan nilai untuk melihat nilai yang paling cocok, atau Anda dapat menggunakan content-visibility untuk menerapkan pembatasan yang diperlukan secara otomatis. content-visibility memastikan bahwa Anda mendapatkan peningkatan performa terbesar yang dapat diberikan browser dengan sedikit upaya 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 bagi 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 konten apa pun, dan berhenti di situ. Sebagian besar rendering, seperti gaya dan tata letak sub-pohon elemen dilewati.

Saat elemen mendekati area pandang, browser tidak lagi menambahkan pembatasan size dan mulai menggambar serta melakukan hit-test pada konten elemen. Hal ini memungkinkan pekerjaan rendering dilakukan tepat waktu agar dapat dilihat oleh pengguna.

Catatan tentang aksesibilitas

Salah satu fitur content-visibility: auto adalah konten di luar layar tetap tersedia di model objek dokumen dan oleh karena itu, hierarki aksesibilitas (tidak seperti visibility: hidden). Artinya, konten tersebut dapat ditelusuri di halaman, dan dinavigasi, 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

Dalam contoh ini, kita membuat dasar pengukuran blog perjalanan di sebelah kanan, dan menerapkan content-visibility: auto ke area yang dikelompokkan di sebelah kiri. Hasilnya menunjukkan waktu rendering dari 232 md menjadi 30 md pada 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:

  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 akan kembali ke langkah 1 hingga semua halaman dan resource didownload.

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

Screenshot blog perjalanan.
Contoh blog perjalanan. Lihat Demo di Codepen

Sekarang, pertimbangkan apa yang terjadi jika Anda menempatkan content-visibility: auto di setiap cerita di blog. Loop umumnya sama: browser mendownload dan merender potongan halaman. Namun, perbedaannya terletak pada jumlah pekerjaan yang dilakukan pada 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 perkiraan pengurangan 50% atau lebih dari biaya rendering pemuatan. Dalam contoh ini, kita melihat peningkatan dari waktu rendering 232 md menjadi waktu rendering 30 md. Ini peningkatan performa 7x.

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

Screenshot yang dianotasi tentang pengelompokan konten ke dalam bagian dengan class CSS.
Contoh pengelompokan konten ke dalam bagian dengan class story yang diterapkan, untuk menerima content-visibility: auto. Lihat Demo di Codepen

Kemudian, kita menerapkan aturan gaya berikut ke bagian:

.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. Artinya, elemen akan ditata 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 bergeser, tergantung 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 tersebut terpengaruh oleh pembatasan ukuran. Dalam contoh ini, kita menetapkannya ke 1000px sebagai estimasi untuk tinggi dan lebar bagian.

Artinya, div akan ditata seolah-olah memiliki satu turunan dimensi "ukuran intrinsik", sehingga memastikan bahwa div tanpa ukuran masih menempati ruang. contain-intrinsic-size bertindak sebagai ukuran placeholder sebagai pengganti konten yang dirender.

Kata kunci auto untuk contain-intrinsic-size menyebabkan browser 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, elemen akan mempertahankan ukuran intrinsik yang dirender. Setiap perubahan ukuran rendering berikutnya juga akan diingat. Dalam praktiknya, ini berarti jika Anda men-scroll elemen dengan content-visibility: auto yang diterapkan, lalu men-scrollnya kembali ke luar layar, elemen tersebut akan otomatis mempertahankan lebar dan tingginya yang ideal, 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 saat pengguna menjelajahi halaman.

Menyembunyikan konten dengan content-visibility: hidden

Bagaimana jika Anda ingin konten tidak dirender, terlepas dari apakah konten tersebut ada di layar atau tidak, sekaligus 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 kontrol yang lebih besar, sehingga Anda dapat menyembunyikan konten elemen dan kemudian menampilkannya kembali dengan cepat.

Bandingkan dengan cara umum lainnya untuk menyembunyikan konten elemen:

  • display: none: menyembunyikan elemen dan menghancurkan status rendering-nya. Artinya, menghapus sembunyikan 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 (dan sub-pohonnya) masih menempati ruang geometris di 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 tersebut hanya terjadi saat elemen ditampilkan lagi (yaitu properti content-visibility: hidden dihapus).

Beberapa kasus penggunaan yang bagus untuk content-visibility: hidden adalah saat menerapkan scroll virtual lanjutan, dan mengukur tata letak. API ini juga sangat cocok 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. Hal ini membuat tampilan cepat dirender saat kembali aktif.

Pengaruh pada Interaction to Next Paint (INP)

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

Setiap kali Anda dapat mengurangi pekerjaan rendering di halaman tertentu, Anda memberi thread utama kesempatan untuk merespons input pengguna dengan lebih cepat. Hal ini mencakup pekerjaan rendering, dan penggunaan properti CSS content-visiblity jika sesuai dapat mengurangi pekerjaan rendering—terutama selama startup, saat sebagian besar pekerjaan rendering dan tata letak dilakukan.

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 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 diterapkan ke file CSS Anda. Untuk informasi lebih lanjut tentang properti ini, lihat: