GeneratePress adalah tema WordPress yang sangat ringan dan relatif baik untuk SEO, memastikan konsumsi sumber daya rendah dan kode yang sangat fleksibel. Namun, dia memberi saya beberapa sakit kepala untuk optimalisasi LCP di ponsel untuk gambar unggulan. Gambar representatif ini menghasilkan LCP yang sangat besar (cat terbesar) di Wawasan PageSpeed, terutama jika di blog Anda memiliki java kitab suci (AdSense, Tag Manager, dll.), Yang dapat memblokir rendering.
Namun, saya berhasil mengatasi masalah ini dan berhasil mengoptimalkan gambar unggulan, dan akhirnya untuk mendapatkan skor kinerja 100% di ponsel dan desktop.
Optimasi LCP di ponsel untuk gambar unggulan (GeneratePress)
Jika Anda mengalami masalah ini dan situs web Anda memiliki skor kinerja rendah pada perangkat seluler karena gambar yang representatif, inilah yang perlu Anda lakukan untuk mengurangi LCP.
1. Nonaktifkan sistem cache selama perubahan dan pengujian. Ini menonaktifkan cache baik di level server (FastCGI, Redis, dll.) Dan di modul (WP Rocket, WP Super Cache, dll.).
2. Pasang dan aktifkan modul Thumbnail Regenerasi atau modul lain yang dapat meregenerasi gambar Anda. Bahkan jika tampaknya belum diperbarui selama beberapa waktu, saya menggunakannya.
3. Pastikan Anda tahu apa dimensi yang tepat pada halaman (di desktop) dari gambar yang representatif (gambar unggulan). Untuk mengetahui lebih mudah, Anda dapat menggunakan alat tangkapan layar di Mac (atau Windows) dan memilih dengan tepat wilayah di mana gambar berada. Di tepi pilihan Anda akan menunjukkan dengan tepat apa lebarnya di puncaknya.
4. Pastikan semua gambar asli memiliki ukuran yang sama-terutama lebar ketika Anda mengunggahnya.
Dalam contoh saya, saya memiliki gambar dengan ukuran maksimum 1200 × 677 piksel.
5. Buka pengaturan media WordPress (Pengaturan - Media) dan menetapkan dimensi spesifik blog Anda (ukuran penuh, ukuran sedang, thumbnail).
Dalam kasus saya, saya memiliki: 1200 × 677 (besar), 745 × 420 (rata -rata), 510 × 288 (thumbnail).
6. Buka file functions.php tema dan tambahkan kode berikut:
// START Fix LCP Featured Image
// Define dimensions for featured images
add_image_size('desktop-featured', 745, 420, true); // Standard desktop size
add_image_size('mobile-featured', 400, 226, true); // Standard mobile size
add_image_size('mobile-featured-2x', 800, 451, true); // Retina size (2x)
// Set the image size for mobile and desktop
add_filter('generate_page_header_default_size', function($size) {
if (is_single()) {
return wp_is_mobile() ? 'mobile-featured' : 'desktop-featured';
}
return $size;
}, 20);
// Adjust image attributes (srcset, sizes, width, height)
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
if (has_post_thumbnail() && $attachment->ID === get_post_thumbnail_id() && is_single()) {
if (wp_is_mobile()) {
// Images for mobile (1x and 2x)
$image1x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured');
$image2x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured-2x');
if ($image1x) {
$attr['src'] = $image1x[0]; // Force src to 400x226
$attr['width'] = $image1x[1];
$attr['height'] = $image1x[2];
}
// Set srcset for high-density displays
$srcset = [];
if ($image1x) $srcset[] = $image1x[0] . ' 400w';
if ($image2x) $srcset[] = $image2x[0] . ' 800w';
$attr['srcset'] = implode(', ', $srcset);
$attr['sizes'] = '(max-width: 400px) 100vw, 400px';
} else {
// Standard image for desktop
$image = wp_get_attachment_image_src($attachment->ID, 'desktop-featured');
if ($image) {
$attr['src'] = $image[0]; // Force src to 745x420
$attr['width'] = $image[1];
$attr['height'] = $image[2];
// Set srcset for desktop (without Retina)
$srcset = [];
if ($image) $srcset[] = $image[0] . ' 745w';
$attr['srcset'] = implode(', ', $srcset);
$attr['sizes'] = '(max-width: 745px) 100vw, 745px';
}
}
}
return $attr;
}, 20, 3);
// Remove the link around the image (if necessary)
add_filter('generate_featured_image_output', function($output) {
if (is_single()) {
$output = preg_replace('/<a href="[^"]*">/', '', $output);
$output = str_replace('</a>', '', $output);
}
return $output;
});
// END Fix LCP Featured ImageMengubah "add_image_size('desktop-featured', 745, 420, true);"Dengan dimensi gambar perwakilan Anda, yang diperoleh dari titik 4 .. Juga, sesuaikan sisa kode di mana dimensi ini muncul. Misalnya,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Menyimpan perubahan.
7. Pergi ke Alat di WordPress (Alat) - Regenerate Thumbnails.
Di bagian bawah harus muncul nilai -nilai baru Anda yang ditambahkan di atas:
- Fitur Desktop:745 × 420 piksel (potong sesuai)
- Mobile-featured:400 × 226 piksel (potong sesuai)
- Mobile-Feansured-2x:800 × 451 piksel (potong sesuai)
Jika nilai -nilai ini muncul, pilih untuk meregenerasi thumbnail hanya untuk gambar yang representatif (hanya gambar unggulan).
8. Pergi ke pengaturan tema dan pilih ukuran rata -rata untuk "gambar unggulan" (GeneratePress).
Setelah regenerasi gambar berakhir, masalah LCP pada ponsel unggulan harus diselesaikan.
Anda hanya perlu menguji di Chrome (Mercusuar) dan seterusnya Wawasan PageSpeed Untuk memastikan semuanya berfungsi sesuai keinginan Anda dan LCP besar telah dihapus.
Sebagai pelengkap, Anda dapat menambahkan koordinat untuk layar desktop retina, dimulai dengan "add_image_size('desktop-featured', 1490, 840, true);"Dan menyelesaikan fungsi dalam kode.
Terkait: Links do not have a discernible name. Lighthouse Fix
Jika Anda tidak menangani masalah LCP di ponsel untuk gambar unggulan (terutama untuk GeneratePress), tinggalkan saya komentar di sini.
