Pertanyaan
Elemen largest contentful paint biasanya berupa gambar hero yang responsif. Rancang pengoptimalan menggunakan fetchpriority, loading, preload, dan srcset, termasuk persyaratan eksperimen, rollback, dan aksesibilitas.
Skenario dan batasan
Desktop dan seluler menggunakan gambar LCP yang berbeda, sementara halaman juga memuat font, CSS penting, dan analitik. Browser menjadwalkan sumber daya sendiri dan prioritas hanyalah sebuah petunjuk (hint); implementasi tidak berperilaku sama persis di semua tempat.
Yang diuji dari topik ini
Kandidat harus memisahkan antara waktu penemuan (discovery timing), strategi pemuatan (loading strategy), dan prioritas permintaan (request priority). fetchpriority=high meningkatkan prioritas antrean relatif suatu sumber daya, loading=eager/lazy mengontrol penundaan pemuatan, dan preload mendeklarasikan sumber daya lebih awal. Menggabungkannya dapat menduplikasi permintaan atau mengorbankan CSS dan font.
Pendekatan referensi
Gunakan data lapangan (field data) dan panel performa untuk mengidentifikasi elemen LCP serta rantai permintaannya. Tetapkan prioritas tinggi hanya pada gambar LCP yang sudah dikonfirmasi berada di bagian atas halaman (above-the-fold). Gunakan srcset dan sizes untuk memilih satu aset yang sesuai; jangan melakukan preload untuk kandidat desktop dan seluler sekaligus. Hindari prioritas tinggi pada daftar gambar dan jangan menerapkan lazy-load pada gambar hero. Lakukan eksperimen pada LCP, penyelesaian CSS penting, total bita, dan long task sebelum memperluas lalu lintas (traffic).
Detail penting
Kandidat responsif harus cocok dengan atribut preload imagesrcset dan imagesizes; jika tidak, satu gambar mungkin di-preload sedangkan gambar lain yang dirender. Periksa prioritas Network, inisiator, cache hit, dan urutan permintaan pada perangkat low-end dan jaringan lambat. Siapkan sakelar fitur (feature switch) dan versi rollback.
Jebakan umum
Menganggap high sebagai unduhan paksa; menandai setiap gambar dengan high; menggunakan preload alih-alih markup gambar yang benar; hanya memeriksa skor Lighthouse; mengabaikan alt, dimensi, dan caching cross-origin; atau mengklaim adanya peningkatan tanpa garis dasar (baseline).
Rubrik evaluasi
Jawaban yang kuat menjelaskan pemilihan LCP, konflik prioritas, konsistensi responsif, metrik eksperimen, dan gerbang rollback sambil mengakui adanya perbedaan browser. Jawaban yang lemah hanya menyebutkan satu atribut tanpa memvalidasi antrean permintaan atau hasil di lapangan.
Pertanyaan lanjutan
Kapan Anda akan menggunakan preload tanpa fetchpriority?
Pertimbangkan preload saat sumber daya tidak dapat ditemukan sejak awal dalam HTML dan benar-benar membutuhkan permintaan lebih dini. Jika browser sudah menemukan gambar tersebut dengan cepat, petunjuk prioritas yang lebih kecil mungkin lebih mudah di-rollback; ukur efektivitas dari kedua pilihan tersebut.
Bagaimana jika LCP membaik tetapi pemuatan font menjadi lebih lambat?
Bandingkan urutan permintaan dan bandwidth untuk CSS penting, font, serta gambar. Turunkan prioritas gambar yang tidak penting atau hapus preload duplikat, sesuaikan pemuatan font, dan lakukan pengukuran ulang.
Bagaimana cara Anda menjaga aksesibilitas saat mengoptimalkan gambar?
Pertahankan teks alt yang akurat dan dimensi eksplisit atau placeholder aspect-ratio untuk mencegah pergeseran tata letak (layout shifts). Pastikan konten yang bermakna tetap tersedia pada bandwidth rendah atau saat gambar dinonaktifkan, dan lakukan pengujian dengan teknologi asistif.