Ekstraksi Imej Kritikal untuk LCP dan SEO

Dikemaskini kali terakhir: June 28, 2026

Ekstraksi imej kritikal bermaksud mencari satu imej yang mengawal tanggapan visual pertama sesebuah halaman. Pada banyak halaman produk, halaman pendaratan, dan catatan blog, imej itu ialah hero, foto produk utama, atau ilustrasi besar di atas lipatan (above-the-fold). Jika anda mengenal pastinya pada peringkat awal, anda boleh memuat awal (preload) atau mengutamakan fail yang betul berbanding mempercepatkan setiap imej secara sama rata.

Jawapan pantas: bagaimana anda mengekstrak imej kritikal?

Gunakan pengekstrakan imej kritikal untuk menamakan imej yang paling mungkin menjadi elemen Largest Contentful Paint, kemudian berikan rawat perlindungan pemuatan khas kepada fail itu. Biasanya ini bermakna imej kelihatan terbesar dalam viewport awal mendapat fetchpriority="high", tiada lazy loading, dimensi stabil, dan kadang-kadang <link rel="preload">.

Jangan pra-muatkan setiap fail besar. Pra-muatkan imej hero atau produk hanya apabila pelayar web (browser) akan menemukannya lewat, seperti di dalam CSS, karusel, komponen yang dirender oleh klien, atau tumpukan <picture> responsif dengan pemilihan sumber yang kompleks.

Selepas perubahan, sahkan hasilnya. Dokumentasi Largest Contentful Paint Google mentakrifkan LCP di sekitar elemen kandungan kelihatan terbesar, dan PageSpeed Insights akan menunjukkan elemen mana yang diukur. Chrome DevTools juga harus menunjukkan permintaan imej kritikal pada awal air terjun (waterfall).

Gunakan susunan ini:

1. Muatkan halaman pada viewport mudah alih yang realistik.
2. Cari imej atau poster terbesar di atas lipatan (above-the-fold).
3. Semak sama ada PageSpeed atau Lighthouse melaporkannya sebagai LCP.
4. Buang loading="lazy" daripada imej itu.
5. Tambah dimensi atau nisbah aspek.
6. Tambah fetchpriority="high" apabila ia adalah <img>.
7. Pra-muatkan hanya apabila penemuan itu lewat.
8. Kekalkan imej di bawah lipatan (below-fold) sebagai lazy.
9. Uji semula selepas perubahan susun atur, CMS, atau salinan hero.

Apakah yang dikira sebagai imej kritikal?

Imej kritikal ialah imej yang ditunggu oleh pelawat sebelum halaman itu terasa berguna. Ia sering kali, tetapi tidak selalu, adalah elemen LCP. Logo kecil di bahagian atas halaman mungkin dimuatkan dahulu, tetapi ia jarang mengawal kesediaan yang dirasakan. Imej hero yang mengambil separuh skrin telefon biasanya melakukannya.

Gunakan saiz dirender, kedudukan viewport, dan tujuan bersama-sama. Imej kecil dalam menu navigasi kelihatan, tetapi ia bukan kandungan utama. Imej latar belakang di sebalik tajuk mungkin kritikal jika ia adalah elemen yang paling besar kelihatan. Imej kad sosial dalam metadata penting untuk perkongsian, tetapi ia tidak diambil untuk halaman yang dirender melainkan templat itu juga memaparkannya.

Panduan LCP Google menyenaraikan elemen <img>, elemen imej di dalam SVG, imej poster video, dan imej latar belakang CSS sebagai calon yang mungkin. Ini bermakna pengekstrakannya tidak boleh berhenti pada mencari tag <img> pertama. Anda perlu memeriksa halaman yang dirender.

Untuk kerja berkaitan, simpan senarai semak pengoptimuman imej untuk SEO yang lebih luas berdekatan. Pengambilan imej kritikal menentukan keutamaan; pemampatan, nama fail, alt text, dan kandungan berstruktur masih menentukan sama ada imej itu berguna selepas ia dimuatkan.

Mana imej yang patut diberi preload atau keutamaan tinggi?

Beri keutamaan tinggi kepada satu imej: imej LCP yang mungkin pada halaman semasa. Jika dua calon hampir sama, pilih yang paling besar untuk peranti mudah alih dahulu, kerana Core Web Vitals mudah alih biasanya lebih sukar untuk dilalui.

Gunakan fetchpriority="high" apabila imej kritikal adalah <img> biasa atau <img> sandaran dalam elemen <picture>. Panduan keutamaan fetch Google menjelaskan bahawa petunjuk ini mengubah keutamaan sumber pelayar tanpa mengubah laluan penemuan markup.

Gunakan preload apabila penemuan adalah masalahnya. Rujukan rel="preload" MDN menerangkan preload sebagai cara untuk meminta sumber lebih awal semasa pemuatan halaman. Ini membantu apabila URL imej muncul dalam CSS, tiba selepas hidrasi, atau berada di sebalik markup yang tidak dapat ditemui oleh pelayar dengan cukup cepat.

Untuk imej responsif biasa, markup boleh kelihatan seperti ini:

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Black leather backpack shown open with laptop sleeve visible"
>

Jika imej adalah latar belakang CSS dan anda belum boleh memindahkannya ke HTML, preload aset yang sama yang akan digunakan oleh pandangan awal (initial viewport):

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

Panduan pra-muat imej meliputi sintaks dengan lebih terperinci. Peraturan penting di sini adalah lebih sempit: preload selepas pengekstrakkan, bukan sebelum itu.

Bagaimana anda mengelakkan pemuatan malas (lazy-loading) imej yang salah?

Lazy loading sepatutnya berada di bawah viewport pertama. Ia adalah kesilapan pada imej kritikal yang diekstrak kerana ia memberitahu pelayar untuk menunggu sehingga pemeriksaan susun atur dan jarak berlaku. Panduan lazy loading peringkat pelayar Google memberi amaran terhadap lazy-loading imej yang serta-merta kelihatan.

Audit komponen imej global dengan teliti. Banyak rangka kerja menjadikan lazy loading sebagai lalai kerana kebanyakan imej berada di bawah lipatan (below the fold). Lalai itu merosakkan halaman di mana imej hero dibungkus dalam komponen yang sama seperti thumbnail galeri.

Periksa tempat-tempat ini:

1. Penderia imej teks kaya CMS.
2. Komponen galeri produk.
3. Komponen imej penutup blog.
4. Utiliti latar belakang hero halaman utama.
5. Slider yang menyembunyikan semua slaid sehingga JavaScript berjalan.
6. Komponen placeholder yang menukar data-src ke dalam src.
7. Blok personalisasi pihak ketiga.
8. Pembungkus pengujian A/B yang melambatkan penandaan hero.

Pembaikannya biasanya kecil. Tambah pilihan priority, aboveFold, atau isLcp pada komponen dan minta pemilik templat memilihnya secara eksplisit. Imej badan di bawah lipatan masih harus menggunakan lazy loading asli, terutamanya panduan panjang dengan tangkapan skrin dan rajah.

Untuk halaman yang berat pada peranti mudah alih, padankan ini dengan panduan pengoptimuman imej mudah alih. Hero yang diberi keutamaan dengan betul masih berprestasi buruk jika telefon memuat turun potongan desktop 2400 px untuk slot 390 px.

Bagaimana anda harus mengekstrak imej dari halaman sebenar?

Mula di pelayar (browser), bukan di perpustakaan aset (asset library). Perpustakaan aset memberitahu anda apa yang wujud; pelayar pula memberitahu anda apa yang diterima oleh pengguna.

Gunakan aliran kerja manual ini:

1. Buka halaman pada lebar 390 px dan muat semula dengan cache dimatikan.
2. Catatkan imej terbesar yang kelihatan sebelum menatal (scrolling).
3. Periksa elemen itu dan catatkan URL akhirnya.
4. Semak sama ada ia adalah <img>, <picture>, poster video, atau latar belakang CSS.
5. Sahkan lebar dan tinggi yang dirender.
6. Bandingkan lebar fail yang dimuat turun dengan slot yang dirender.
7. Cari loading="lazy" atau penetapan src tertunda JavaScript.
8. Semak DevTools Network untuk masa mula permintaan dan keutamaan (priority).
9. Jalankan PageSpeed Insights dan catatkan elemen LCP.
10. Ulang pada desktop jika hero berubah mengikut breakpoint.

Untuk audit templat, buat jadual ekstraksi kecil sebelum menyunting kod:

Saya menjana rajah dalam artikel ini sebagai fail WebP dan mengekalkan setiap satu di bawah 40 KB. Itu bukan sasaran universal untuk foto, tetapi ia adalah peringatan berguna: imej yang diekstrak harus disesuaikan saiznya sebelum ia menerima keutamaan (priority). Jika fail itu masih besar, gunakan image compression deep dive dan batch resize guide sebelum penghantaran.

Bagaimana anda mengesahkan imej kritikal dalam alat?

Pengesahan mempunyai dua tugas. Pertama, membuktikan imej yang dipilih adalah elemen LCP sebenar atau calon LCP yang serius. Kedua, membuktikan pelayar menemukannya cukup awal.

Gunakan PageSpeed Insights untuk konteks lapangan dan makmal. Panel diagnostik biasanya menamakan elemen LCP, dan tangkapan skrin membantu mengesahkan sama ada elemen yang dilaporkan sepadan dengan hero visual halaman tersebut. Gunakan Lighthouse atau DevTools Performance apabila anda memerlukan jejak tempatan.

Gunakan DevTools Network untuk tingkah laku permintaan:

1. Filter mengikut permintaan imej.
2. Muat semula dengan cache dimatikan.
3. Sahkan imej kritikal bermula berhampiran bahagian atas air terjun (waterfall).
4. Semak sama ada keutamaan adalah High atau dinaik taraf awal.
5. Sahkan imej di bawah lipatan tidak bersaing pada masa yang sama.
6. Semak kod status, jenis kandungan, saiz pemindahan, dan header cache.

Gunakan pemeriksaan HTML yang dirender untuk kesilapan markup:

1. Imej kritikal mempunyai src atau srcset yang boleh ditemui dalam markup awal.
2. Ia tidak mempunyai loading="lazy".
3. Ia mempunyai width dan height, atau nisbah aspek CSS yang stabil.
4. Teks altnya menerangkan subjek yang kelihatan apabila imej itu adalah kandungan.
5. URL CDN mengembalikan respons 200 yang boleh di-crawl.

Untuk carian, [amalan terbaik SEO imej] Google juga menekankan nama fail yang deskriptif, teks alt, dan teks sekeliling yang berguna. Ekstraksi imej kritikal meningkatkan keutamaan pemuatan, tetapi imej yang sama masih memerlukan konteks carian.

Apa yang merosakkan ekstraksi imej kritikal?

Kegagalan yang paling biasa adalah merawat setiap halaman seolah-olah ia mempunyai hero yang sama. Indeks blog, halaman produk, dan halaman harga boleh mempunyai calon LCP yang berbeza. Langkah ekstraksi mesti berlaku pada tahap templat dan pada tahap titik pecah (breakpoint).

Berhati-hati dengan perangkap ini:

1. Pra-memuat imej Open Graph. Imej kad sosial mungkin tidak pernah dipaparkan pada halaman tersebut.
2. Memuatkan secara malas (lazy-loading) foto produk pertama. Galeri produk sering mewarisi nilai lalai thumbnail.
3. Mengutamakan setiap slaid karusel. Hanya slaid yang pertama kelihatan boleh menjadi kritikal semasa muat.
4. Mengabaikan pemotongan mudah alih (mobile crops). Desktop dan mudah alih boleh memilih imej LCP yang berbeza.
5. Menggunakan latar belakang CSS untuk kandungan bermakna. Ia lebih sukar diutamakan dan kurang boleh diakses.
6. Melupakan dimensi. Keutamaan tidak menghalang anjakan susun atur (layout shift).
7. Menghantar satu sumber yang terlalu besar. Imej berkeutamaan tinggi 3 MB masih perlahan.
8. Hanya menguji pada Wi-Fi tempatan. 4G yang perlahan mendedahkan kelewatan penemuan.

Jika masalahnya kebanyakannya berat fail, mulakan dengan senarai semak pengoptimuman imej lengkap. Jika masalahnya adalah pilihan format, bandingkan AVIF vs WebP sebelum menukar peraturan penghantaran.

Ringkasan: senarai semak ekstraksi imej kritikal

Ekstraksi imej kritikal adalah keputusan kelajuan halaman, bukan latihan penamaan aset. Cari imej yang mengawal pandangan pertama, berikan hanya imej itu rawatan pemuatan awal, dan pastikan baki halaman tidak bersaing dengannya.

Sebelum menerbitkan, sahkan:

1. Imej LCP yang mungkin dinamakan dalam templat atau nota audit.
2. Calon mudah alih dan desktop diperiksa secara berasingan.
3. Imej kritikal tidak dimuatkan secara malas (lazy-loaded).
4. fetchpriority="high" digunakan untuk calon LCP <img> yang kelihatan.
5. Preload hanya digunakan apabila penemuan adalah lewat.
6. Fail yang dipilih telah diubah saiz dan dimampatkan (compressed).
7. Lebar dan tinggi, atau nisbah aspek, memperuntukkan ruang susun atur (layout space).
8. Imej di bawah lipatan (below-fold) kekal malas (lazy).
9. PageSpeed Insights melaporkan elemen LCP yang dijangka.
10. DevTools menunjukkan permintaan imej kritikal awal dalam air terjun (waterfall).
11. URL CDN mengembalikan 200 dengan jenis imej yang dijangka.
12. Imej mempunyai teks alt berguna dan kandungan penjelasan berdekatan.

Kredit Imej

• Latar depan, diagram calon LCP, pokok keputusan keutamaan, dan jejak pengesahan telah dijana untuk artikel ini dengan ImageMagick dan dieksport sebagai WebP.