在手机上解决LCP以获取特色图像（GeneratePress）

GeneratePress是SEO的非常轻巧且相对较好的WordPress主题，可确保资源消耗较低和非常灵活的代码。但是，他为在手机上优化LCP的特色图像时给了我一些头痛。该代表性图像在 PagesPeed Insights，尤其是在博客中您有Java经文（AdSense，Tag Manager等），可以阻止渲染。

但是，我设法克服了这个问题，并成功地优化了特色图像，最后在移动和桌面上获得了100％的性能得分。

手机上的优化LCP用于特色图像（GeneratePress）

如果您遇到此问题，并且由于代表性图像，您的网站在移动设备上的性能得分较低，那么这是减少LCP所需的操作。

1。在更改和测试过程中禁用任何缓存系统。它在服务器级别（FastCGI，Redis等）和模块（WP Rocket，WP Super Cache等）上禁用缓存。

2。安装并激活模块再生缩略图或任何能够再生图像的模块。即使似乎已经有一段时间没有更新，我也使用了它。

3。确保您知道代表图像（特色图像）页面（桌面上）的确切维度是什么。为了找到更容易的问题，您可以使用Mac（或Windows）上的屏幕快照工具，然后精确选择图片所在的区域。在选择边缘，您将准确地向您展示其高度的宽度。

4。确保所有原始图片具有相同的尺寸 - 尤其是宽度 - 当您上传它们时。

在我的示例中，我的图片最大尺寸为1200×677像素。

5。转到WordPress（设置 - 媒体）的媒体设置，并设置博客的特定维度（全尺寸，中等尺寸，缩略图）。

就我而言，我有：1200×677（大），745×420（平均），510×288（缩略图）。

6。打开主题的function.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已被删除。

作为补充，您可以为视网膜桌面屏幕添加坐标，从头开始。add_image_size('desktop-featured', 1490, 840, true);“并在代码中完成功能。

有关的： Links do not have a discernible name. Lighthouse Fix

如果您不处理手机上的LCP问题以获取特色图像（尤其是用于GeneratePress），请在此处发表评论。

帖子浏览量： 1,038