Materi
Halaman produk Kopi Gayo Lestari menunjukkan foto kemasan besar di layar pertama, galeri di bawahnya, dan satu script ulasan. Data lapangan menunjukkan LCP lambat dan teks yang melompat saat galeri dimuat. Misi ini menggabungkan pelajaran 11 sampai 13 dengan pelajaran 8: perbaiki atribut pemuatan di HTML, lalu baca angka CLS dan LCP dari data tetap.
Ketiga perbaikan menyasar sub-bagian yang berbeda. Menghapus lazy dan menambah fetchpriority="high" pada foto kemasan memendekkan jeda muat sumber daya LCP. Dimensi pada galeri menghapus satu sumber pergeseran tata letak. defer pada ulasan.js mencegah parser berhenti sebelum foto kemasan ditemukan. Angka ambang web.dev tidak dipakai sebagai kunci di misi ini; yang dinilai adalah hitungan dari tabel dan atribut di HTML, karena keduanya tetap benar walaupun ambangnya kelak berubah.
| Pergeseran tata letak (data tetap) | Waktu | Skor | Setelah input? |
|---|---|---|---|
| Banner promo muncul | 300 ms | 0,04 | tidak |
| Galeri tanpa dimensi | 800 ms | 0,03 | tidak |
| Font berganti | 1.500 ms | 0,02 | tidak |
| Ulasan disisipkan | 4.200 ms | 0,06 | tidak |
| Ulasan kedua | 4.600 ms | 0,05 | tidak |
| Menu dibuka setelah klik | 6.000 ms | 0,20 | ya, 120 ms setelah klik |
