แก้ปัญหา LCP บนมือถือสำหรับภาพเด่น (GeneratePress)

GeneratePress เป็นธีม WordPress ที่เบาและค่อนข้างดีสำหรับ SEO ทำให้มั่นใจได้ว่าการใช้ทรัพยากรต่ำและรหัสที่ยืดหยุ่นมาก อย่างไรก็ตามเขาให้อาการปวดหัวแก่ฉันเพื่อเพิ่มประสิทธิภาพ LCP บนมือถือสำหรับภาพที่โดดเด่น ภาพตัวแทนนี้สร้าง LCP ที่มีขนาดใหญ่มาก (สีที่ใหญ่ที่สุด) ใน ข้อมูลเชิงลึก pagespeedโดยเฉพาะอย่างยิ่งถ้าในบล็อกคุณมีพระคัมภีร์ 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. เปิดไฟล์ 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 เพื่อให้แน่ใจว่าทุกอย่างทำงานได้ตามที่คุณต้องการและ LCP ขนาดใหญ่ได้ถูกลบออกไป

ในฐานะที่เป็นส่วนประกอบคุณสามารถเพิ่มพิกัดสำหรับหน้าจอเดสก์ท็อปเรตินาเริ่มต้นด้วย "add_image_size('desktop-featured', 1490, 840, true);"และการทำฟังก์ชั่นในรหัสให้เสร็จสมบูรณ์

ที่เกี่ยวข้อง: Links do not have a discernible name. Lighthouse Fix

หากคุณไม่จัดการกับปัญหา LCP บนมือถือสำหรับภาพที่โดดเด่น (โดยเฉพาะอย่างยิ่งสำหรับ GeneratePress) ให้แสดงความคิดเห็นที่นี่