„GenerApterPress“ yra labai lengva ir gana gera „WordPress“ SEO tema, užtikrinanti mažą išteklių vartojimą ir labai lankstų kodą. Tačiau jis man davė keletą galvos skausmų, kaip optimizuoti LCP mobiliajame telefone, kad būtų rodomas vaizdas. Šis reprezentacinis vaizdas sukuria labai didelę LCP (didžiausius dažus) „Pagespeed“ įžvalgos, ypač jei tinklaraštyje turite „Java“ šventraščius („Adsense“, „Tag Manager“ ir kt.), Kurie gali užkirsti kelią perteikimui.
Tačiau man pavyko įveikti šią problemą ir sėkmingai optimizuoti rodomą vaizdą ir galiausiai gauti 100% našumo balą mobiliajame ir darbalaukyje.
„Optimization LCP“ mobiliajame telefone, skirtas rodomam vaizdui (generatePress)
Jei susiduriate su šia problema ir dėl reprezentacinio vaizdo, jūsų svetainėje yra mažai mobiliųjų įrenginių rezultatų, štai ką reikia padaryti, kad sumažintumėte LCP.
1. Išjunkite bet kurią talpyklos sistemą pakeitimų ir bandymų metu. Tai išjungia talpyklą tiek serverio lygyje („FastCGI“, „Redis“ ir kt.), Ir moduliuose („WP Rocket“, „WP Super Cache“ ir kt.).
2. Įdiekite ir suaktyvinkite modulį Regeneruoti miniatiūras ar bet kuris kitas modulis, galintis regeneruoti jūsų vaizdus. Net jei atrodo, kad jis kurį laiką nebuvo atnaujintas, aš jį panaudojau.
3. Įsitikinkite, kad žinote, kokie yra tikslūs reprezentacinio vaizdo puslapyje (darbalaukyje) matmenys (rodomas vaizdas). Norėdami lengviau sužinoti, galite naudoti „Mac“ (arba „Windows“) ekrano kopijos įrankį ir pasirinkti tiksliai regioną, kuriame yra paveikslėlis. Pasirinkimo krašte parodysite tiksliai, koks plotis yra jo aukštyje.
4. Įsitikinkite, kad visos originalios nuotraukos turi tokį patį dydį, ypač pločio, kai juos įkeliate.
Savo pavyzdyje turiu paveikslėlį, kurio maksimalus dydis yra 1200 × 677 pikselių.
5. Eikite į „WordPress“ žiniasklaidos nustatymus („Nustatymai“ - „Media“) ir nustato konkrečius jūsų tinklaraščio matmenis (viso dydžio, vidutinio dydžio, miniatiūros).
Mano atveju turiu: 1200 × 677 (didelis), 745 × 420 (vidurkis), 510 × 288 (miniatiūra).
6. Atidarykite „Funfunctions.Php“ temos failą ir pridėkite šį kodą:
// 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 ImagePakeisti “add_image_size('desktop-featured', 745, 420, true);"Su jūsų reprezentatyvaus vaizdo matmenimis, gautais iš 4 punkto. Taip pat sureguliuokite likusį kodą, kuriame atsiranda šie matmenys. Pavyzdžiui,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Taupo pakeitimus.
7. Eikite į įrankius „WordPress“ (įrankiai) - atsinaujinkite miniatiūras.
Apačioje turėtų būti jūsų naujos vertės, pridėtos aukščiau:
- staliniai kompiuteriai:745 × 420 pikselių (supjaustykite iki tinkamos)
- Mobilusis vaistas:400 × 226 pikselių (supjaustykite iki tinkamos)
- mobiliojo telefono-2x:800 × 451 pikselių (supjaustykite iki tinkamos)
Jei šios vertės atsiranda, pasirinkite atkurti miniatiūras tik reprezentaciniams vaizdams (rodomi tik vaizdai).
8. Eikite į temos nustatymus ir pasirinkite vidutinį „rodomo vaizdo“ dydį (generatePress).
Atnaujinus vaizdus, reikia išspręsti LCP problemą, esančią vaizdo mobiliajame vaizdo įraše.
Jums tereikia išbandyti chromuose (švyturyje) ir įjungti „Pagespeed“ įžvalgos Norėdami įsitikinti, kad viskas veikia taip, kaip norite, o didelis LCP buvo pašalintas.
Kaip papildymą, galite pridėti „Retina“ darbalaukio ekranų koordinates, pradedant nuo “add_image_size('desktop-featured', 1490, 840, true);"Ir kodo funkcijų užpildymas.
Susijęs: Links do not have a discernible name. Lighthouse Fix
Jei nesigilinate į LCP problemą „Mobile“, kad gautumėte rodomą vaizdą (ypač „GenerAptEpress“), palikite man pakomentuoti čia.
