GeneratePress는 SEO에 대해 매우 가볍고 비교적 좋은 WordPress 테마로 낮은 리소스 소비와 매우 유연한 코드를 보장합니다. 그러나 그는 특집 이미지를 위해 모바일에서 LCP를 최적화하기 위해 두통을 주었다. 이 대표적인 이미지는 매우 큰 LCP (가장 큰 페인트)를 생성합니다. Pagespeed Insights특히 블로그에 Java 성경 (애드 센스, 태그 관리자 등)이있는 경우 렌더링을 차단할 수 있습니다.
그러나이 문제를 극복하고 주요 이미지를 최적화하고 모바일 및 데스크탑에서 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. 테마의 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 (Tools)의 도구로 이동 - 축소판을 재생하십시오.
하단에는 위에 추가 된 새 값이 나타납니다.
- 데스크탑 기능 :745 × 420 픽셀 (잘 맞추기)
- 모바일 기능 :400 × 226 픽셀 (잘 맞추기)
- 모바일 기능 2x :800 × 451 픽셀 (잘 맞추기)
이러한 값이 나타나면 대표 이미지에 대해서만 썸네일을 재생하도록 선택하십시오 (특집 이미지 만).
8. 테마 설정으로 이동하여 "특집 이미지"(GeneratePress)의 평균 크기를 선택하십시오.
이미지의 재생이 종료 된 후, 특집 이미지 모바일의 LCP 문제를 해결해야합니다.
크롬 (등대)에서 테스트하면됩니다. Pagespeed Insights 모든 것이 원하는대로 작동하고 큰 LCP가 제거되었습니다.
보완대로 Retina 데스크탑 화면에 대한 좌표를 추가하여 시작할 수 있습니다. "add_image_size('desktop-featured', 1490, 840, true);"코드의 함수를 완료합니다.
관련된: Links do not have a discernible name. Lighthouse Fix
주요 이미지 (특히 GeneratePress의 경우)에 대한 모바일의 LCP 문제를 처리하지 않으면 여기에 의견을 남겨주세요.
