GeneratePress е много лека и сравнително добра тема на WordPress за SEO, гарантираща ниско потребление на ресурси и много гъвкав код. Въпреки това той ми даде някои главоболия за оптимизацията на LCP на мобилен телефон за представеното изображение. Това представително изображение генерира много голям LCP (най -голямата боя) в Прозрения на страници, особено ако в блога имате Java Writpions (Adsense, Tag Manager и т.н.), които могат да блокират изобразяването.
Въпреки това успях да преодолея този проблем и да успея да оптимизирам представеното изображение и накрая да получа 100% оценка на производителността на мобилни и работния плот.
Оптимизация LCP на мобилен телефон за представено изображение (GeneratePress)
Ако срещнете този проблем и уебсайтът ви има ниска ефективност на мобилни устройства заради представителното изображение, ето какво трябва да направите, за да намалите LCP.
1. Деактивирайте всяка кеш система по време на промени и тестване. Той деактивира кеша както на ниво сървър (fastcgi, redis и т.н.), така и при модули (WP ракета, WP Super Cache и др.).
2. Инсталирайте и активирайте модула Регенерира миниатюри или всеки друг модул, способен да регенерира вашите изображения. Дори и да изглежда, че не е актуализиран от известно време, аз го използвах.
3. Уверете се, че знаете какви са точните размери на страницата (на работния плот) на представителното изображение (представено изображение). За да разберете по -лесно, можете да използвате инструмента за екранна снимка на Mac (или Windows) и да изберете точно региона, където е картината. На ръба на селекцията ще ви покажете точно каква е ширината на височината му.
4. Уверете се, че всички оригинални снимки имат един и същ размер-особено ширината--когато ги качвате.
В моя пример имам картината до максималния размер от 1200 × 677 пиксела.
5. Отидете в медийните настройки на WordPress (Настройки - медии) и задава специфичните измерения на вашия блог (пълен размер, среден размер, миниатюра).
В моя случай имам: 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 (Lighthouse) и нататък Прозрения на страници За да сте сигурни, че всичко работи както искате, и големият LCP е премахнат.
Като допълнение можете да добавите координати за настолни екрани на ретината, като започнете с "add_image_size('desktop-featured', 1490, 840, true);"И попълване на функциите в кода.
Свързани: Links do not have a discernible name. Lighthouse Fix
Ако не се справите с LCP проблема на Mobile за представено изображение (особено за GeneratePress), оставете ме коментар тук.
