Dipublikasikan: 30 Oktober 2024
Pengenalan Interaction to Next Paint (INP) sebagai metrik Core Web Vitals pada awal tahun 2024 telah menciptakan lebih banyak minat pada performa rendering. Bagian dari INP berfokus pada waktu yang diperlukan browser untuk merender frame berikutnya setelah pengguna memulai interaksi dengan halaman. Menjaga INP situs Anda tetap rendah berarti pengguna akan merasa bahwa situs merespons interaksi mereka secepat dan selancar mungkin.
Hal yang juga penting adalah pekerjaan rendering yang perlu dilakukan saat halaman dimuat, yang berpotensi menunda interaksi bahkan sejak awal. Ada baiknya untuk menemukan cara untuk mengurangi jumlah pekerjaan yang terjadi selama bagian penting siklus proses halaman ini. Properti content-visibility CSS adalah salah satu cara untuk melakukannya, dan dengan senang hati kami mengumumkan bahwa properti ini kini Baru tersedia di Dasar Pengukuran mulai September 2024.
content-visibility adalah properti CSS yang memberi tahu agen pengguna untuk menunda rendering elemen hingga mendekati area pandang. Untuk halaman yang memiliki banyak elemen DOM, hal ini dapat bermanfaat, karena artinya pemuatan awal halaman akan memulai lebih sedikit pekerjaan rendering. Sebagai gantinya, pekerjaan terjadi tepat sebelum pengguna perlu melihatnya.
content-visibility: auto ke area konten yang dikelompokkan akan meningkatkan performa rendering 7x pada pemuatan awal. Baca terus untuk mempelajari lebih lanjut.
Untuk mengaktifkan pengoptimalan ini bagi elemen di luar layar, terapkan aturan content-visibility: auto ke elemen tersebut di CSS situs Anda:
.render-me-later {
content-visibility: auto;
}
content-visibility beroperasi berdasarkan beberapa perilaku yang ditentukan untuk properti contain dalam pembatasan CSS. Tujuan pembatasan CSS adalah untuk menyediakan isolasi ke bagian-bagian hierarki DOM. Ini memungkinkan operasi rendering dibatasi ke bagian tertentu dari hierarki DOM, sehingga tata letak menjadi tidak valid dan diulangi untuk subset hierarki DOM saja. Meskipun menerapkannya untuk performa rendering, Anda harus cukup memahami berbagai nilai properti contain, dan cara menggunakannya secara efektif.
Saat content-visibility: auto diterapkan ke elemen, elemen tersebut mengambil beberapa properti yang disediakan oleh properti contain secara otomatis. Akibatnya, elemen yang terpengaruh pada awalnya akan dirender dengan tinggi 0px, yang secara efektif berarti elemen tersebut tidak dirender.
Namun, hal ini memiliki beberapa efek samping. Misalnya, scrollbar halaman dapat bergeser dan mengubah tinggi saat pengguna men-scroll ke elemen yang sebelumnya tidak dirender yang dirender tepat pada waktunya agar pengguna dapat melihatnya. Untuk mengurangi hal ini, terapkan properti contain-intrinsic-size.
Karena content-visibility baru-baru ini tersedia di Dasar Pengukuran Baru, Anda mungkin memiliki beberapa kekhawatiran tentang pengguna dengan browser yang belum diupdate untuk menggunakan properti baru. Mengingat content-visibility adalah properti CSS, Anda tidak perlu terlalu khawatir. Browser yang memahaminya akan menggunakannya, dan browser yang tidak memahaminya tidak akan menggunakannya. Artinya, selain manfaat performa yang Anda dapatkan dari browser yang mendukung content-visibility, Anda dapat mengharapkan bahwa halaman sebagian besar akan berfungsi sama.
content-visibility memberikan manfaat tambahan—dan jika ada kasus saat Anda dapat menggunakannya untuk mengurangi pekerjaan rendering selama pemuatan halaman, sebaiknya pertimbangkan untuk menggunakannya guna memastikan halaman Anda memiliki daya pemrosesan sebanyak mungkin saat halaman tersebut sangat membutuhkannya. Setelah fitur berguna ini tersedia di Dasar Pengukuran, Anda dapat menggunakannya, sehingga pengguna dapat memanfaatkan pekerjaan rendering yang dihindari hingga diperlukan.