चित्रित छवि के लिए मोबाइल पर एलसीपी को हल करता है (जेनरेटप्रेस)

GenatePress SEO के लिए एक बहुत ही हल्का और अपेक्षाकृत अच्छा वर्डप्रेस थीम है, जो कम संसाधन की खपत और एक बहुत लचीला कोड सुनिश्चित करता है। हालांकि, उन्होंने मुझे विशेष रुप से प्रदर्शित छवि के लिए मोबाइल पर एलसीपी के अनुकूलन के लिए कुछ सिरदर्द दिए। यह प्रतिनिधि छवि में एक बहुत बड़ा एलसीपी (सबसे बड़ा पेंट) उत्पन्न करता है पेजस्पीड इनसाइट्स, खासकर अगर ब्लॉग में आपके पास जावा शास्त्र (AdSense, Tag Manager, आदि) हैं, जो रेंडरिंग को अवरुद्ध कर सकते हैं।

हालांकि, मैं इस समस्या को दूर करने में कामयाब रहा और विशेष रुप से प्रदर्शित छवि को अनुकूलित करने में सफल रहा, और अंत में मोबाइल और डेस्कटॉप पर 100% प्रदर्शन स्कोर प्राप्त करने के लिए।

चित्रित छवि के लिए मोबाइल पर अनुकूलन एलसीपी (जेनरेटप्रेस)

यदि आप इस समस्या का सामना करते हैं और आपकी वेबसाइट में प्रतिनिधि छवि के कारण मोबाइल उपकरणों पर कम प्रदर्शन स्कोर है, तो यहां आपको एलसीपी को कम करने के लिए क्या करना है।

1। परिवर्तन और परीक्षण के दौरान किसी भी कैश सिस्टम को अक्षम करें। यह सर्वर स्तर (FastCGI, Redis, आदि) और मॉड्यूल (WP रॉकेट, WP सुपर कैश, आदि) दोनों पर कैश को अक्षम करता है।

2। मॉड्यूल को स्थापित और सक्रिय करें थंबनेल को पुनर्जीवित करें या कोई अन्य मॉड्यूल आपकी छवियों को पुन: उत्पन्न करने में सक्षम है। यहां तक ​​कि अगर ऐसा लगता है कि कुछ समय के लिए अपडेट नहीं किया गया है, तो मैंने इसका इस्तेमाल किया।

3। सुनिश्चित करें कि आप जानते हैं कि प्रतिनिधि छवि (चित्रित छवि) के पृष्ठ (डेस्कटॉप पर) पर सटीक आयाम क्या हैं। आसान जानने के लिए, आप मैक (या विंडोज) पर स्क्रीनशॉट टूल का उपयोग कर सकते हैं और उस क्षेत्र का चयन कर सकते हैं जहां चित्र है। चयन किनारे पर आप आपको दिखाएंगे कि इसकी ऊंचाई में चौड़ाई क्या है।

4। सुनिश्चित करें कि सभी मूल चित्रों में एक ही आकार है-विशेष रूप से चौड़ाई-जब आप उन्हें अपलोड करते हैं।

मेरे उदाहरण में मेरे पास 1200 × 677 पिक्सेल के अधिकतम आकार की तस्वीर है।

5। वर्डप्रेस (सेटिंग्स - मीडिया) की मीडिया सेटिंग्स पर जाएं और अपने ब्लॉग (पूर्ण आकार, मध्यम आकार, थंबनेल) के विशिष्ट आयामों को सेट करता है।

मेरे मामले में मेरे पास: 1200 × 677 (बड़ा), 745 × 420 (औसत), 510 × 288 (थंबनेल)।

6। थीम की फ़ंक्शन .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। वर्डप्रेस (टूल्स) में टूल्स पर जाएं - थंबनेल को पुनर्जीवित करें।

नीचे अपने नए मान जो ऊपर जोड़े गए दिखाई देना चाहिए:

• डेस्कटॉप-फ़ीचर्ड:745 × 420 पिक्सेल (फिट करने के लिए कट)
• मोबाइल-फीचर्ड:400 × 226 पिक्सेल (फिट करने के लिए कट)
• मोबाइल-फीटर्ड -2x:800 × 451 पिक्सेल (फिट करने के लिए कट)

यदि ये मान दिखाई देते हैं, तो केवल प्रतिनिधि छवियों (केवल विशेष रुप से प्रदर्शित चित्र) के लिए थंबनेल को पुन: उत्पन्न करने के लिए चुनें।

8। थीम सेटिंग्स पर जाएं और "फीचर्ड इमेज" (जेनरेटप्रेस) के लिए औसत आकार चुनें।

छवियों के उत्थान के समाप्त होने के बाद, चित्रित छवि मोबाइल पर एलसीपी समस्या को हल किया जाना चाहिए।

आपको बस क्रोम (लाइटहाउस) और पर परीक्षण करने की आवश्यकता है पेजस्पीड इनसाइट्स यह सुनिश्चित करने के लिए कि सब कुछ काम करता है जैसा आप चाहते हैं और बिग एलसीपी को हटा दिया गया है।

एक पूरक के रूप में, आप रेटिना डेस्कटॉप स्क्रीन के लिए निर्देशांक जोड़ सकते हैं, "के साथ शुरू करते हैं" "add_image_size('desktop-featured', 1490, 840, true);"और कोड में कार्यों को पूरा करना।

संबंधित: Links do not have a discernible name. Lighthouse Fix

यदि आप विशेष रुप से प्रदर्शित छवि (विशेष रूप से जेनरेटप्रेस के लिए) के लिए मोबाइल पर एलसीपी समस्या को नहीं संभालते हैं, तो मुझे यहां टिप्पणी छोड़ दें।