Baiki Largest Contentful Paint Lambat

Perbaiki imej Largest Contentful Paint (LCP) yang lambat dalam 4 langkah: ubah saiznya mengikut saiz paparan, tukarkannya kepada WebP atau AVIF, pramuat imej tersebut, dan tetapkan fetchpriority kepada tinggi. 2 langkah pertama memberikan sebahagian besar peningkatan dan tidak memerlukan sebarang perubahan pada penanda halaman anda.

Pada kebanyakan halaman, elemen largest contentful paint ialah satu imej hero, yang bermaksud LCP sebenarnya adalah persoalan tentang satu fail dan bukannya tentang keseluruhan tapak anda. Memperbaiki satu fail tersebut biasanya mengubah ukuran lebih banyak daripada pengoptimuman lain yang tersedia.

Apa yang diukur oleh LCP

LCP merekodkan tempoh masa yang diambil oleh elemen kelihatan yang paling besar untuk dipaparkan, diukur dari masa halaman mula dimuatkan. Google menganggap 2.5 saat atau kurang sebagai baik, 2.5 hingga 4 saat sebagai memerlukan penambahbaikan, dan lebih daripada 4 saat sebagai lemah.

Elemen yang diukur biasanya merupakan imej, kadangkala blok teks pengepala, dan ia sentiasa sesuatu yang kelihatan tanpa menatal. Elemen ini boleh berubah antara peranti, memandangkan imej hero yang mendominasi susun atur desktop mungkin berada di bawah lipatan pada telefon.

Mencari elemen yang bertanggungjawab

Jalankan Lighthouse dan baca entri elemen Largest Contentful Paint, yang menamakan elemen tepat yang sedang diukur. Meneka hanya membuang masa, kerana elemen tersebut sering kali bukan elemen yang disangkakan oleh orang ramai.

Periksa pada peranti mudah alih serta desktop, memandangkan susun atur adalah berbeza dan begitu juga jawapannya. Data lapangan daripada pelawat sebenar adalah lebih dipercayai daripada satu ujian makmal, kerana keadaan rangkaian di luar sana jauh lebih berbeza berbanding dalam ujian. Jika kedua-duanya tidak sepadan, percayai data lapangan dan gunakan ujian makmal untuk diagnosis.

Perbaiki imej mengikut urutan impak

Untuk meningkatkan LCP pada imej, lakukan 6 langkah ini mengikut urutan.

1. Ubah saiz imej kepada saiz terbesar yang akan dipaparkan, digandakan untuk skrin berketumpatan tinggi.
2. Tukarkannya kepada WebP, atau kepada AVIF jika imej tersebut besar dan berbentuk fotografi.
3. Mampatkan kepada sasaran di bawah 200 KB untuk imej hero, yang boleh dicapai pada lebar penuh pada kebanyakan reka bentuk.
4. Tambah atribut lebar dan tinggi supaya penyemak imbas menempah ruang dan tiada anjakan susun atur berlaku.
5. Pramuat imej dalam kepala halaman supaya penyemak imbas mula mendapatkannya dengan segera.
6. Tetapkan fetchpriority kepada tinggi pada elemen imej, yang memberitahu penyemak imbas bahawa fail ini adalah yang paling penting.

Langkah 1 dan 2 biasanya memberikan sebahagian besar penambahbaikan, dan kedua-dua langkah ini tidak memerlukan anda menyentuh penanda halaman sama sekali.

Mengapa mengubah saiz lebih baik daripada memampatkan

Dimensi mengawal sebahagian besar saiz fail, jadi mengubah saiz mengurangkan lebih banyak saiz berbanding sebarang tetapan kualiti. Foto bersaiz 4000 piksel yang dipaparkan pada 1200 piksel membawa 11 kali lebih banyak data piksel daripada yang boleh ditunjukkan oleh halaman.

Baris ketiga menunjukkan mengapa mengubah saiz perlu didahulukan. Mengubah saiz sahaja mengatasi memampatkan sahaja, dan gabungan kedua-duanya mengatasi kedua-duanya sekali. Angka ini berbeza mengikut imej dan sambungan, manakala urutannya kekal konsisten.

Pramuat dan fetchpriority

Pramuat memberitahu penyemak imbas untuk mendapatkan imej hero sebelum ia selesai menganalisis halaman, yang biasanya menjimatkan 200 hingga 500 milisaat. Tetapan ini penting kerana penyemak imbas menemui imej agak lewat dalam proses analisis.

Pramuat satu imej sahaja. Pramuat beberapa imej akan menghilangkan manfaatnya, kerana penyemak imbas kemudiannya akan membahagikan perhatiannya sama seperti yang sepatutnya berlaku. Menetapkan fetchpriority kepada tinggi mencapai hasil yang sama dengan kurang penanda dan sering kali sudah mencukupi untuk imej yang sedia ada dalam HTML awal.

Kesilapan yang memburukkan lagi LCP

• Pemuatan malas (lazy loading) pada imej hero. Pemuatan malas melambatkan fail yang anda mahukan terlebih dahulu. Gunakan ia di bawah lipatan sahaja.
• Memuatkan imej hero melalui JavaScript. Imej yang dimasukkan melalui skrip tidak boleh mula dimuat turun sehingga skrip dijalankan.
• Menggunakan imej latar belakang CSS. Imej latar belakang ditemui lebih lewat daripada elemen img dan tidak boleh diutamakan dengan mudah.
• Pramuat beberapa imej. Keutamaan yang bersaing menghilangkan kelebihan sepenuhnya.
• Mengabaikan lebar dan tinggi. Anjakan susun atur merosakkan ukuran berbeza sementara ukuran ini bertambah baik.

Apabila elemen LCP ialah teks

LCP berasaskan teks biasanya dilambatkan oleh fon web dan bukannya oleh teks itu sendiri. Penyemak imbas mempunyai perkataan tersebut dengan segera tetapi menunggu fail fon sebelum memaparkannya.

Tetapkan font-display kepada swap supaya teks dipaparkan dalam fon sandaran dan bertukar apabila fon web tiba. Pramuat satu fail fon yang paling penting, dan subset fon kepada aksara yang benar-benar digunakan oleh halaman anda, yang sering kali mengurangkan saiz fon daripada 200 KB kepada di bawah 30 KB. Menyajikan fon daripada domain anda sendiri mengalih keluar sambungan tambahan ke pihak ketiga.

Masa tindak balas pelayan menetapkan had minimum

LCP tidak boleh lebih pantas daripada masa yang diambil oleh pelayan anda untuk mengembalikan bait pertama, jadi pelayan yang lambat mengehadkan setiap penambahbaikan lain. Sasarkan di bawah 600 milisaat untuk bait pertama.

Periksa angka tersebut sebelum mengoptimumkan imej, kerana tindak balas pelayan selama 2 saat menjadikan sasaran LCP 2.5 saat mustahil dicapai walau apa pun yang anda lakukan pada fail tersebut. Pengkacean, hos yang lebih pantas atau alamat rangkaian penghantaran kandungan menangani isu tersebut. Kerja imej kemudiannya menambah baik apa yang berbaki dan bukannya melawan had yang ditetapkan di tempat lain.

Skrip pihak ketiga turut melambatkan imej

Analitis, sepanduk kebenaran, widget sembang dan skrip pengiklanan bersaing dengan imej hero anda untuk lebar jalur dan masa pemprosesan. Imej yang dioptimumkan dengan sempurna masih dipaparkan lewat apabila terdapat 12 skrip dimuatkan sebelum imej tersebut.

Sepanduk kebenaran adalah yang paling merosakkan, kerana kebanyakannya menyekat pemaparan sehingga pelawat membuat pilihan. Muatkan skrip pihak ketiga dengan atribut defer atau async supaya ia tidak menahan halaman, dan audit jumlah skrip yang benar-benar diperlukan. Mengalih keluar 3 skrip penjejakan yang tidak digunakan sering kali meningkatkan LCP lebih banyak daripada pusingan pemampatan imej yang seterusnya.

Menguji perubahan dengan betul

Uji dalam tetingkap peribadi dengan sambungan dinyahdayakan, dan jalankan pengukuran sebanyak 3 kali dan bukannya mempercayai satu hasil sahaja. Skor berbeza antara larian dengan margin yang ketara.

Sahkan penyemak imbas benar-benar menerima fail yang lebih kecil. Buka alat pembangun, beralih ke tab Rangkaian, tapis mengikut imej dan muat semula. Saiz yang dipindahkan dan format akan muncul dalam senarai. Halaman yang masih menyajikan fail lama biasanya bermakna lapisan pengkacean sedang memegang versi terdahulu dan bukannya pengoptimuman itu gagal.

Mengekalkan LCP yang pantas selepas pembaikan

Tetapkan peraturan untuk imej hero dan bukannya membaikinya satu demi satu, kerana halaman baharu akan memperkenalkan semula masalah tersebut. Tapak yang dibaiki sekali akan merosot semula dalam masa beberapa bulan jika editor memuat naik terus dari kamera.

Persetujui lebar maksimum dan saiz fail maksimum untuk imej hero, tuliskan peraturan tersebut, dan gunakannya pada setiap halaman baharu. Peraturan seperti lebar 1920 piksel dan di bawah 200 KB adalah mudah untuk diperiksa dan merangkumi hampir setiap reka bentuk. Di tempat yang mempunyai beberapa orang penerbit, peraturan bertulis adalah lebih penting daripada teknik, memandangkan ukuran mencerminkan halaman yang paling teruk dan bukannya yang terbaik.

Menyediakan imej hero dalam satu langkah

Proses setiap imej hero di tapak secara bersama, memandangkan imej tersebut berkongsi satu spesifikasi dan satu saiz sasaran. Kebanyakan tapak mempunyai antara 10 hingga 100 imej hero merentasi halaman pendaratan, halaman kategori dan artikel.

Tetapkan lebar dan sasaran KB sekali sahaja, masukkan imej tersebut, dan setiap fail akan dikembalikan dengan padanan yang sesuai. Sehingga 500 imej boleh dijalankan bagi setiap kelompok, sepenuhnya di dalam penyemak imbas anda pada pemproses anda sendiri. Tiada apa-apa yang dimuat naik, jadi aset pementasan, halaman kempen yang belum diterbitkan dan kerja pelanggan kekal pada mesin anda sementara keseluruhan pustaka disediakan.