GeneratePress là một chủ đề WordPress rất nhẹ và tương đối tốt cho SEO, đảm bảo mức tiêu thụ tài nguyên thấp và mã rất linh hoạt. Tuy nhiên, anh ấy đã cho tôi một số đau đầu để tối ưu hóa LCP trên thiết bị di động cho hình ảnh đặc trưng. Hình ảnh đại diện này tạo ra một LCP rất lớn (sơn lớn nhất) trong Pagespeed Insights, đặc biệt là nếu trong blog bạn có Kinh thánh Java (AdSense, Trình quản lý thẻ, v.v.), có thể chặn kết xuất.
Tuy nhiên, tôi đã xoay sở để khắc phục vấn đề này và thành công trong việc tối ưu hóa hình ảnh nổi bật và cuối cùng để có được điểm hiệu suất 100% trên thiết bị di động và máy tính để bàn.
Tối ưu hóa LCP trên thiết bị di động cho hình ảnh nổi bật (GeneratePress)
Nếu bạn gặp phải vấn đề này và trang web của bạn có điểm hiệu suất thấp trên thiết bị di động vì hình ảnh đại diện, đây là những gì bạn cần làm để giảm LCP.
1. Vô hiệu hóa bất kỳ hệ thống bộ đệm nào trong quá trình thay đổi và thử nghiệm. Nó vô hiệu hóa bộ đệm cả ở cấp độ máy chủ (fastcgi, redis, v.v.) và tại các mô -đun (WP Rocket, WP Super Cache, v.v.).
2. Cài đặt và kích hoạt mô -đun Tái tạo hình thu nhỏ hoặc bất kỳ mô -đun nào khác có thể tái tạo hình ảnh của bạn. Ngay cả khi nó dường như chưa được cập nhật trong một thời gian, tôi đã sử dụng nó.
3. Hãy chắc chắn rằng bạn biết kích thước chính xác trên trang (trên máy tính để bàn) của hình ảnh đại diện (hình ảnh nổi bật) là gì. Để tìm hiểu dễ dàng hơn, bạn có thể sử dụng công cụ ảnh chụp màn hình trên Mac (hoặc Windows) và chọn chính xác khu vực có hình ảnh. Trên cạnh lựa chọn, bạn sẽ cho bạn thấy chính xác chiều rộng ở độ cao của nó.
4. Đảm bảo tất cả các hình ảnh gốc có cùng kích thước-đặc biệt là chiều rộng-khi bạn tải lên chúng.
Trong ví dụ của tôi, tôi có hình ảnh với kích thước tối đa là 1200 × 677 pixel.
5. Truy cập cài đặt phương tiện của WordPress (Cài đặt - phương tiện) và đặt các kích thước cụ thể của blog của bạn (kích thước đầy đủ, kích thước trung bình, hình thu nhỏ).
Trong trường hợp của tôi, tôi có: 1200 × 677 (lớn), 745 × 420 (trung bình), 510 × 288 (hình thu nhỏ).
6. Mở tệp function.php của chủ đề và thêm mã sau:
// 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 ImageThay đổi "add_image_size('desktop-featured', 745, 420, true);"Với kích thước của hình ảnh đại diện của bạn, thu được từ điểm 4 .. Ngoài ra, hãy điều chỉnh phần còn lại của mã nơi các kích thước này xuất hiện. Ví dụ:"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Lưu các thay đổi.
7. Chuyển đến các công cụ trong WordPress (Công cụ) - Tái tạo hình thu nhỏ.
Ở phía dưới sẽ xuất hiện các giá trị mới của bạn được thêm vào ở trên:
- Phù hợp với máy tính để bàn:745 × 420 pixel (cắt để phù hợp)
- Phù hợp với thiết bị di động:400 × 226 pixel (cắt để phù hợp)
- Phương pháp tính năng di động-2X:800 × 451 pixel (cắt để phù hợp)
Nếu các giá trị này xuất hiện, chọn để tái tạo hình thu nhỏ cho hình ảnh đại diện (chỉ hình ảnh đặc trưng).
8. Chuyển đến cài đặt chủ đề và chọn kích thước trung bình cho "hình ảnh nổi bật" (GeneratePress).
Sau khi sự tái sinh của hình ảnh kết thúc, vấn đề LCP trên Image Mobile nên được giải quyết.
Bạn chỉ cần kiểm tra trong chrome (ngọn hải đăng) và trên Pagespeed Insights Để đảm bảo mọi thứ hoạt động như bạn muốn và LCP lớn đã bị xóa.
Để bổ sung, bạn có thể thêm tọa độ cho màn hình máy tính để bàn Retina, bắt đầu bằng "add_image_size('desktop-featured', 1490, 840, true);"Và hoàn thành các chức năng trong mã.
Có liên quan: Links do not have a discernible name. Lighthouse Fix
Nếu bạn không xử lý vấn đề LCP trên thiết bị di động cho hình ảnh nổi bật (đặc biệt là cho GeneratePress), hãy để tôi nhận xét ở đây.
