GeneratePress is een zeer licht en relatief goed WordPress -thema voor SEO, wat zorgt voor een lage resource verbruik en een zeer flexibele code. Hij gaf me echter wat hoofdpijn voor de optimalisatie van LCP op mobiel voor de afgebeelde afbeelding. Dit representatieve beeld genereert een zeer grote LCP (grootste verf) in Pagespeed -inzichten, vooral als je in de blog Java -geschriften hebt (Adsense, tag manager, enz.), Die de weergave kunnen blokkeren.
Ik slaagde er echter in om dit probleem te overwinnen en erin te slagen om de afbeelding te optimaliseren, en uiteindelijk om een 100% prestatiescore op mobiel en desktop te behalen.
Optimalisatie LCP op mobiel voor aanbevolen afbeelding (GeneratePress)
Als u dit probleem tegenkomt en uw website heeft een lage prestatiescore op mobiele apparaten vanwege de representatieve afbeelding, hier is wat u moet doen om de LCP te verminderen.
1. Schakel elk cachesysteem uit tijdens wijzigingen en testen. Het schakelt cache uit zowel op serverniveau (fastcgi, redis, etc.) als bij modules (WP Rocket, WP Super Cache, enz.).
2. Installeer en activeer de module Regenereren miniaturen of een andere module die uw afbeeldingen kan regenereren. Zelfs als het al een tijdje niet is bijgewerkt, gebruikte ik het.
3. Zorg ervoor dat u weet wat de exacte afmetingen op de pagina (op het bureaublad) van de representatieve afbeelding (aanbevolen afbeelding) zijn. Om het eenvoudiger te vinden, kunt u het screenshot -tool op Mac (of Windows) gebruiken en precies de regio selecteren waar de afbeelding is. Op de selectierand laat je je precies laten zien wat de breedte in zijn hoogte is.
4. Zorg ervoor dat alle originele foto's dezelfde grootte hebben-vooral de breedte wanneer u ze uploadt.
In mijn voorbeeld heb ik de foto tot de maximale grootte van 1200 × 677 pixels.
5. Ga naar de media -instellingen van WordPress (Instellingen - Media) en stelt de specifieke afmetingen van uw blog in (volledige grootte, middelgrote, miniatuur).
In mijn geval heb ik: 1200 × 677 (groot), 745 × 420 (gemiddeld), 510 × 288 (miniatuur).
6. Open het functies -bestand van het thema en voeg de volgende code toe:
// 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 ImageWijziging "add_image_size('desktop-featured', 745, 420, true);"Met de afmetingen van uw representatieve afbeelding, verkregen uit punt 4 .. Pas ook de rest van de code aan waar deze dimensies verschijnen. Bijvoorbeeld,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Bespaart wijzigingen.
7. Ga naar tools in WordPress (Tools) - Regenereer miniaturen.
Onderaan moeten uw nieuwe waarden hierboven zijn toegevoegd:
- Desktop-functie:745 × 420 pixels (gesneden te passen)
- mobiel400 × 226 pixels (gesneden te passen)
- Mobiel-Featured-2X:800 × 451 pixels (gesneden te passen)
Als deze waarden verschijnen, kiest u ervoor om miniaturen alleen te regenereren voor representatieve afbeeldingen (alleen aanbevolen afbeeldingen).
8. Ga naar de thema -instellingen en kies de gemiddelde grootte voor "Featured Image" (GeneratePress).
Nadat de regeneratie van de afbeeldingen eindigt, moet het LCP -probleem op de afgebeelde afbeelding mobiel worden opgelost.
U hoeft alleen maar te testen in Chrome (vuurtoren) en verder Pagespeed -inzichten Om ervoor te zorgen dat alles werkt zoals je wilt en de grote LCP is verwijderd.
Als aanvulling kunt u coördinaten toevoegen voor Retina Desktop -schermen, beginnend met "add_image_size('desktop-featured', 1490, 840, true);"En het voltooien van de functies in de code.
Verwant: Links do not have a discernible name. Lighthouse Fix
Als u het LCP -probleem niet op mobiel voor aanbevolen afbeelding afhandelt (vooral voor GeneratePress), laat me hier commentaar op.
