Menunda rendering konten berat

Halaman web dengan konten yang luas—seperti scroll tanpa batas, dasbor yang kompleks, atau artikel yang padat dapat mengalami rendering awal yang lambat dan interaksi yang lambat. Teknologi web modern memungkinkan Anda menunda workload rendering untuk konten yang tidak langsung terlihat, sehingga meningkatkan performa secara signifikan tanpa mengorbankan aksesibilitas atau ekspektasi pengguna.

Untuk mengoptimalkan rendering, Anda dapat menggunakan properti content-visibility CSS dan atribut hidden="until-found" HTML. Meskipun keduanya membantu performa, keduanya memiliki kasus penggunaan yang berbeda.

Kapan harus menggunakan yang mana

Cara menerapkan content-visibility: auto

Memilih konten di luar layar

WAJIB: Anda HARUS mengidentifikasi dengan cermat elemen mana yang menerima content-visibility: auto.

• LAKUKAN penargetan pada blok tata letak mandiri yang besar dan benar-benar berada di bawah paruh atas awal (misalnya, item kartu dalam feed tanpa batas, komentar di bagian bawah, atau bagian tata letak yang berat di bagian bawah).
• JANGAN terapkan properti ini ke elemen dalam area tampilan paruh atas awal. Tindakan ini memaksa browser mengevaluasi batas visibilitas sebelum rendering, yang secara paradoks menunda performa pemuatan halaman yang penting.
• LAKUKAN penargetan elemen dengan struktur DOM internal yang dalam atau kompleks untuk memaksimalkan penghematan biaya rendering.

Langkah-langkah implementasi

1. WAJIB: Identifikasi bagian berat yang dipastikan berada di luar layar saat pemuatan awal.
2. WAJIB: Terapkan content-visibility: auto ke setiap elemen di luar layar ini.
3. WAJIB: Berikan perkiraan ukuran struktur tata letak menggunakan contain-intrinsic-size pada setiap elemen.

Cara menggunakan contain-intrinsic-size

WAJIB: Anda HARUS menyambungkan content-visibility: auto dengan contain-intrinsic-size. Jika tidak, browser akan dipaksa untuk menciutkan elemen ke tinggi 0 px saat berada di luar layar, sehingga menyebabkan pergeseran tata letak yang parah dan scrollbar melompat saat pengguna men-scroll.

Properti singkat CSS contain-intrinsic-size berfungsi sebagai dimensi placeholder. Dengan menggunakan kata kunci auto, browser dapat "mengingat" ukuran yang tepat setelah elemen akhirnya dirender, menggunakan ukuran yang dihitung tersebut di atas placeholder jika elemen keluar dari layar lagi.

Kode contoh

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

Cara menerapkan content-visibility: hidden

1. Identifikasi bagian yang berat: Temukan blok tata letak yang awalnya disembunyikan (misalnya, baris tambahan dalam tabel data besar).
2. Terapkan CSS: Tambahkan content-visibility: hidden ke elemen.
3. Menampilkan elemen: Jika elemen harus ditampilkan, ubah properti content-visibility menjadi visible atau auto.

Kode contoh

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Karena content-visibility: hidden mengecualikan elemen dan turunannya dari hierarki aksesibilitas dan penelusuran temukan dalam halaman, JANGAN gunakan jika konten harus tetap dapat ditemukan saat disembunyikan. Jika Anda memerlukan konten tersembunyi agar tetap dapat ditelusuri melalui fitur Cari di halaman native, gunakan hidden="until-found" seperti yang dijelaskan dalam Menelusuri konten tersembunyi.

Praktik Terbaik

• ANJURAN: Gunakan contain-intrinsic-size dengan content-visibility: auto. Jika tidak, tinggi akan dihitung ulang saat di-scroll, sehingga menyebabkan lompatan tata letak area pandang atau gangguan visual.
• JANGAN terapkan content-visibility: auto ke elemen di dalam area tampilan paruh atas awal, karena hal ini akan menunda rendering halaman penting.
• Verifikasi Aksesibilitas WAJIB: Saat menerapkan content-visibility: auto, Anda HARUS memverifikasi keterjangkauan keyboard berurutan. Dalam konfigurasi teknologi pendukung tertentu, node di luar layar yang menggunakan content-visibility: auto dapat dikecualikan dari hierarki aksesibilitas atau rute navigasi berurutan hingga fokus dipindahkan secara paksa ke dalamnya. Uji navigasi linear di seluruh batas di luar layar hanya menggunakan keyboard.

Strategi penggantian

content-visibility penggantian

Jika content-visibility tidak didukung, browser akan mengabaikannya. Pada umumnya, content-visibility: auto tidak memerlukan penggantian, meskipun tanpa penggantian, peningkatan performa akan hilang. Browser yang tidak didukung akan membuat elemen content-visibility: hidden terlihat sepenuhnya. Gunakan deteksi fitur untuk menerapkan penggantian.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}