GeneratePress to bardzo lekki i stosunkowo dobry motyw WordPress dla SEO, zapewniający niskie zużycie zasobów i bardzo elastyczny kod. Jednak dał mi bóle głowy dla optymalizacji LCP na urządzeniach mobilnych dla wyświetlonego obrazu. Ten reprezentatywny obraz generuje bardzo duży LCP (największa farba) w Pagespeed Insights, zwłaszcza jeśli na blogu masz Pisma Java (AdSense, Tag Manager itp.), Które mogą blokować renderowanie.
Udało mi się jednak przezwyciężyć ten problem i udało mi się optymalizację wizerunku, a na koniec uzyskanie 100% wyniku wydajności na urządzeniach mobilnych i komputerów stacjonarnych.
Optymalizacja LCP na telefonie komórkowym dla wyświetlonego obrazu (GeneratePress)
Jeśli napotkasz ten problem, a Twoja witryna ma niski wynik wydajności na urządzeniach mobilnych z powodu reprezentatywnego obrazu, oto co musisz zrobić, aby zmniejszyć LCP.
1. Wyłącz dowolny system pamięci podręcznej podczas zmian i testowania. Wyłącza pamięć podręczną zarówno na poziomie serwera (FastCGI, Redis itp.), Jak i w modułach (WP Rocket, WP Super Cache itp.).
2. Zainstaluj i aktywuj moduł Regeneruj miniatury lub każdy inny moduł, który może regenerować twoje obrazy. Nawet jeśli wydaje się, że nie został zaktualizowany przez pewien czas, użyłem go.
3. Upewnij się, że wiesz, jakie są dokładne wymiary na stronie (na pulpicie) obrazu reprezentatywnego (wyświetlony obraz). Aby dowiedzieć się łatwiej, możesz użyć narzędzia z ekranu na komputerze Mac (lub Windows) i wybrać dokładnie region, w którym znajduje się obraz. Na krawędzi wyboru pokażesz dokładnie, jaka jest szerokość w wysokości.
4. Upewnij się, że wszystkie oryginalne zdjęcia mają ten sam rozmiar-zwłaszcza szerokość-po ich przesłaniu.
W moim przykładzie mam zdjęcie do maksymalnego rozmiaru 1200 × 677 pikseli.
5. Przejdź do ustawień multimediów WordPress (Ustawienia - multimedia) i ustawia określone wymiary swojego bloga (pełny rozmiar, średniej wielkości, miniatura).
W moim przypadku mam: 1200 × 677 (duży), 745 × 420 (średnia), 510 × 288 (miniatura).
6. Otwórz plik functions.php motywu i dodaj następujący 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 ImageZmiana "add_image_size('desktop-featured', 745, 420, true);„W przypadku wymiarów reprezentatywnego obrazu uzyskanego z punktu 4 .. również dostosuj resztę kodu, w którym pojawiają się te wymiary. Na przykład”$attr['sizes'] = '(max-width: 745px) 100vw, 745px';„.
Zapisuje zmiany.
7. Przejdź do narzędzi w WordPress (narzędzia) - regeneruj miniatury.
Na dole powinny pojawić się nowe wartości dodane powyżej:
- Finansowany na komputer:745 × 420 pikseli (wycięte do dopasowania)
- Udane urządzenia mobilne:400 × 226 pikseli (wycięte do dopasowania)
- Mobile-Feared-2x:800 × 451 pikseli (wycięte do dopasowania)
Jeśli pojawią się te wartości, wybierz regenerację miniatur tylko dla obrazów reprezentatywnych (tylko obrazy).
8. Przejdź do ustawień motywu i wybierz średni rozmiar dla „Polecanego obrazu” (GeneratePress).
Po zakończeniu regeneracji obrazów problem LCP na wyświetlonym obrazie Mobile należy rozwiązać.
Wystarczy przetestować w Chrome (latarnia morska) i włączona Pagespeed Insights Aby upewnić się, że wszystko działa tak, jak chcesz, a duży LCP został usunięty.
Jako uzupełnienie możesz dodawać współrzędne dla ekranów stacjonarnych siatkówki, zaczynając od ”add_image_size('desktop-featured', 1490, 840, true);„I wykonanie funkcji w kodzie.
Powiązany: Links do not have a discernible name. Lighthouse Fix
Jeśli nie zajmujesz się problemem LCP na urządzeniach mobilnych dla wyświetlonego obrazu (szczególnie dla GeneratePress), zostaw mi komentarz tutaj.
