GeneratePress - это очень легкая и относительно хорошая тема WordPress для SEO, обеспечивающая низкое потребление ресурсов и очень гибкий код. Тем не менее, он дал мне головные боли за оптимизацию LCP на мобильном телефоне для избранного изображения. Это представительное изображение генерирует очень большой LCP (самая большая краска) в PageSpeed Insights, особенно если в блоге у вас есть Священные Писания Java (Adsense, Manger и т. Д.), Которые могут заблокировать рендеринг.
Тем не менее, мне удалось преодолеть эту проблему и преуспеть в оптимизации фиксированного изображения, и, наконец, получить 100% показатель производительности на мобильных и настольных компьютерах.
Оптимизация LCP на мобильном телефоне для избранного изображения (GeneratePress)
Если вы столкнетесь с этой проблемой, и ваш сайт имеет низкую оценку производительности на мобильных устройствах из -за представительного изображения, вот что вам нужно сделать, чтобы уменьшить LCP.
1. Отключить любую систему кеша во время изменений и тестирования. Он отключает кэш как на уровне сервера (FASTCGI, REDIS и т. Д.) И в модулях (WP Rocket, WP Super Cache и т. Д.).
2. Установите и активируйте модуль Регенерируйте миниатюры или любой другой модуль, способный регенерировать ваши изображения. Даже если он, кажется, не был обновлен в течение некоторого времени, я использовал его.
3. Убедитесь, что вы знаете, каковы точные размеры на странице (на рабочем столе) репрезентативного изображения (изображение). Чтобы проще узнать, вы можете использовать инструмент экрана на Mac (или Windows) и выбрать точно область, где находится изображение. На краю отбора вы покажете вам, какая ширина в его высоте.
4. Убедитесь, что все оригинальные изображения имеют одинаковый размер, особенно ширина, когда вы их загружаете.
В моем примере у меня есть изображение до максимального размера 1200 × 677 пикселей.
5. Перейдите в настройки носителя WordPress (настройки - Media) и устанавливает конкретные размеры вашего блога (полный размер, средний размер, миниатюра).
В моем случае у меня есть: 1200 × 677 (большой), 745 × 420 (в среднем), 510 × 288 (миниатюр).
6. Откройте файл functions.php темы и добавьте следующий код:
// 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Изменять "add_image_size('desktop-featured', 745, 420, true);«С размерами вашего репрезентативного изображения, полученного из точки 4 .. также отрегулируйте остальную часть кода, где появляются эти измерения. Например».$attr['sizes'] = '(max-width: 745px) 100vw, 745px';«.
Сохраняет изменения.
7. Перейдите к инструментам в WordPress (инструменты) - регенерируйте миниатюры.
Внизу должны появиться ваши новые значения, добавленные выше:
- настольный фиксатор:745 × 420 пикселей (вырезанный в соответствии с подходящим)
- мобильный характер:400 × 226 пикселей (вырезанный по подходящему)
- мобильный фигура-2X:800 × 451 пикселей (вырезанный по подходящему)
Если эти значения появляются, выберите «Регенерировать миниатюры» только для представительных изображений (только с изображениями).
8. Перейдите к настройкам темы и выберите средний размер для «Показанный изображение» (GeneratePress).
После того, как регенерация изображений заканчивается, необходимо решить задачу LCP на представленном мобильном виде изображения.
Вам просто нужно проверить в Chrome (маяк) и на PageSpeed Insights Чтобы убедиться, что все работает так, как вы хотите, и большой LCP был удален.
В качестве дополнения вы можете добавить координаты для экранов на рабочем столе Retina, начиная с "add_image_size('desktop-featured', 1490, 840, true);"И завершение функций в коде.
Связанный: Links do not have a discernible name. Lighthouse Fix
Если вы не решаете проблему LCP на Mobile для избранного изображения (особенно для GeneratePress), оставьте мне комментарии здесь.
