Generatepress ist ein sehr leichtes und relativ gutes WordPress -Thema für SEO, das einen geringen Ressourcenverbrauch und einen sehr flexiblen Code gewährleistet. Er gab mir jedoch einige Kopfschmerzen für die Optimierung von LCP auf Mobiltelefon für das vorgestellte Bild. Dieses repräsentative Bild erzeugt eine sehr große LCP (größte Farbe) in PageSpeed -ErkenntnisseVor allem, wenn Sie im Blog Java -Schrift (Adsense, Tag Manager usw.) haben, die das Rendering blockieren können.
Es gelang mir jedoch, dieses Problem zu überwinden und das Bild zu optimieren und schließlich eine 100% ige Leistungsbewertung auf Mobilgeräten und Desktop zu erhalten.
Optimierung LCP auf Mobilgeräte für das vorgestellte Bild (GenerationSepress)
Wenn Sie auf dieses Problem stoßen und Ihre Website aufgrund des repräsentativen Bildes einen geringen Leistungswert auf mobilen Geräten hat, müssen Sie Folgendes tun, um die LCP zu reduzieren.
1. Deaktivieren Sie jedes Cache -System bei Änderungen und Tests. Es deaktiviert Cache sowohl auf Serverebene (FastCGI, Redis usw.) als auch bei Modulen (WP -Rakete, WP Super Cache usw.).
2. Installieren und aktivieren Sie das Modul Miniaturansichten regenerieren oder ein anderes Modul, das Ihre Bilder regenerieren kann. Auch wenn es seit einiger Zeit nicht aktualisiert worden zu sein scheint, habe ich es verwendet.
3. Stellen Sie sicher, dass Sie wissen, wie genau die genauen Abmessungen auf der Seite (auf dem Desktop) des repräsentativen Bildes (vorgezogenes Bild) sind. Um einfacher herauszufinden, können Sie das Screenshot -Tool auf dem Mac (oder Windows) verwenden und genau den Bereich auswählen, in dem sich das Bild befindet. An der Auswahlkante zeigen Sie Ihnen genau, was die Breite in der Höhe ist.
4. Stellen Sie sicher, dass alle Originalbilder die gleiche Größe haben-insbesondere die Breite-wenn Sie sie hochladen.
In meinem Beispiel habe ich das Bild bis zur maximalen Größe von 1200 × 677 Pixel.
5. Gehen Sie zu den Medieneinstellungen von WordPress (Einstellungen - Medien) und legt die spezifischen Dimensionen Ihres Blogs (volle Größe, mittelgroße Größe, Miniaturansicht) fest.
In meinem Fall habe ich: 1200 × 677 (groß), 745 × 420 (Durchschnitt), 510 × 288 (Thumbnail).
6. Öffnen Sie die Datei functions.php des Themas und fügen Sie den folgenden Code hinzu:
// 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 ImageÄndern "add_image_size('desktop-featured', 745, 420, true);"Mit den Abmessungen Ihres repräsentativen Bildes, die von Punkt 4 erhalten wurden. Passen Sie auch den Rest des Codes an, in dem diese Dimensionen erscheinen. Zum Beispiel."$attr['sizes'] = '(max-width: 745px) 100vw, 745px';„.
Erspart Änderungen.
7. Gehen Sie zu Tools in WordPress (Tools) - Regenerieren Sie Miniaturansichten.
Unten sollte Ihre neuen Werte oben angezeigt werden:
- Desktop-Fectured:745 × 420 Pixel (geschnitten zu Anpassung)
- Mobile geschafft:400 × 226 Pixel (geschnitten zu Anpassung)
- Mobile geschafft-2x:800 × 451 Pixel (geschnitten zu Anpassung)
Wenn diese Werte erscheinen, entscheiden Sie sich, Miniaturansichten nur für repräsentative Bilder zu regenerieren (nur für Bilder).
8. Gehen Sie zu den Themeneinstellungen und wählen Sie die durchschnittliche Größe für "Featured Image" (generatepress).
Nach dem Ende der Regeneration der Bilder sollte das LCP -Problem auf dem vorgestellten Bildmobil gelöst werden.
Sie müssen nur in Chrom (Leuchtturm) und auf testen PageSpeed -Erkenntnisse Um sicherzustellen, dass alles so funktioniert, wie Sie möchten und die große LCP entfernt wurde.
Als Komplement können Sie Koordinaten für Retina -Desktop -Bildschirme hinzufügen, beginnend mit ""add_image_size('desktop-featured', 1490, 840, true);"Und die Funktionen im Code ausfüllen.
Verwandt: Links do not have a discernible name. Lighthouse Fix
Wenn Sie das LCP -Problem auf Mobilgeräten nicht für das vorgestellte Bild (insbesondere für GeneratePress) behandeln, lassen Sie mich hier einen Kommentar erhalten.
