Gesaan
Elemen Largest Contentful Paint biasanya merupakan imej wira yang responsif. Reka bentuk pengoptimuman menggunakan fetchpriority, loading, preload, dan srcset, termasuk keperluan eksperimen, pengunduran (rollback), dan kebolehcapaian.
Senario dan kekangan
Desktop dan mudah alih menggunakan imej LCP yang berbeza, manakala halaman juga memuatkan fon, CSS kritikal, dan analitik. Pelayar menjadualkan sumber sendiri dan keutamaan hanyalah satu pembayang (hint); pelaksanaan tidak berkelakuan serupa di semua tempat.
Perkara yang diuji
Calon harus membezakan masa penemuan, strategi pemuatan, dan keutamaan permintaan. fetchpriority=high meningkatkan keutamaan giliran relatif sesuatu sumber, loading=eager/lazy mengawal penangguhan, dan preload mengisytiharkan sumber lebih awal. Menggabungkannya boleh menduplikasi permintaan atau menjejaskan CSS dan fon.
Pendekatan rujukan
Gunakan data lapangan dan panel prestasi untuk mengenal pasti elemen LCP dan rantaian permintaan. Tetapkan keutamaan tinggi hanya pada imej LCP yang disahkan di bahagian atas lipatan (above-the-fold). Gunakan srcset dan sizes untuk memilih satu aset yang sesuai; jangan pramuat (preload) kedua-dua calon desktop dan mudah alih. Elakkan keutamaan tinggi pada senarai imej dan jangan gunakan pemuatan malas (lazy-load) pada imej wira. Lakukan eksperimen ke atas LCP, penyiapan CSS kritikal, jumlah bait, dan tugas panjang sebelum meluaskan trafik.
Butiran kritikal
Calon responsif mesti sepadan dengan imagesrcset dan imagesizes bagi pramuat; jika tidak, satu imej mungkin dipramuat dan imej lain yang dipaparkan. Periksa keutamaan Rangkaian, pemula (initiator), capaian cache, dan susunan permintaan pada peranti kelas rendah serta rangkaian perlahan. Kekalkan suis ciri (feature switch) dan versi pengunduran.
Perangkap biasa
Menganggap high sebagai muat turun paksa; menandakan setiap imej sebagai high; menggunakan preload dan bukannya markup imej yang betul; hanya menyemak Lighthouse; mengabaikan alt, dimensi, dan pengauditan cache rentas asal (cross-origin); atau mendakwa peningkatan tanpa garis dasar.
Rubrik penilaian
Jawapan yang kukuh menerangkan pemilihan LCP, konflik keutamaan, ketekalan responsif, metrik eksperimen, dan syarat pengunduran sambil mengakui perbezaan pelayar. Jawapan yang lemah hanya menamakan satu atribut tanpa mengesahkan giliran permintaan atau hasil lapangan.
Soalan susulan
Bilakah anda akan menggunakan preload tanpa fetchpriority?
Pertimbangkan preload apabila sesuatu sumber tidak dapat ditemui awal dalam HTML dan benar-benar memerlukan permintaan awal. Jika pelayar sudah menemui imej dengan pantas, pembayang keutamaan yang lebih kecil mungkin lebih mudah untuk diundur; ukur kedua-dua pilihan tersebut.
Bagaimana jika LCP bertambah baik tetapi fon menjadi lebih perlahan?
Bandingkan susunan permintaan dan lebar jalur untuk CSS kritikal, fon, dan imej. Rendahkan keutamaan imej yang tidak kritikal atau alih keluar preload yang bertindih, laraskan pemuatan fon, dan ukur semula.
Bagaimanakah anda mengekalkan kebolehcapaian semasa mengoptimumkan imej?
Kekalkan teks alt yang tepat dan dimensi eksplisit atau pemegang tempat aspect-ratio untuk mengelakkan anjakan reka letak. Pastikan kandungan yang bermakna kekal pada lebar jalur rendah atau dengan imej dilumpuhkan, dan uji menggunakan teknologi bantuan.