פותר LCP בנייד לתמונה מוצגת (MeaneTepress)

CentratePress הוא נושא וורדפרס קל מאוד וטוב יחסית עבור SEO, ומבטיח צריכת משאבים נמוכה וקוד גמיש מאוד. עם זאת, הוא נתן לי כמה כאבי ראש לאופטימיזציה של LCP בנייד לתמונה המוצגת. תמונה מייצגת זו מייצרת LCP גדול מאוד (צבע גדול ביותר) תובנות מהירותבמיוחד אם בבלוג יש לך כתבי Java (Adsense, מנהל תגיות וכו '), שיכולים לחסום את העיבוד.

עם זאת, הצלחתי להתגבר על בעיה זו ולהצליח לבצע אופטימיזציה של תמונה מוצגת, ולבסוף לקבל ציון ביצועים של 100% בנייד ובשולחן העבודה.

אופטימיזציה של LCP בנייד לתמונה מוצגת (MeaneTepress)

אם אתה נתקל בבעיה זו ולאתר שלך יש ציון ביצועים נמוך במכשירים ניידים בגלל התמונה הייצוגית, הנה מה שאתה צריך לעשות כדי לצמצם את ה- LCP.

1. השבת כל מערכת מטמון במהלך שינויים ובדיקה. זה מבטל את המטמון הן ברמת השרת (FastCGI, Redis וכו ') וגם במודולים (Rocket WP, WP Super Cache, וכו').

2. התקן והפעיל את המודול תמונות ממוזערות התחדשות או כל מודול אחר המסוגל לחדש את התמונות שלך. גם אם נראה שזה לא עודכן מזה זמן, השתמשתי בזה.

3. וודא שאתה יודע מהם הממדים המדויקים בדף (בשולחן העבודה) של התמונה הייצוגית (תמונה מוצגת). כדי לגלות קל יותר, אתה יכול להשתמש בכלי צילום המסך ב- Mac (או Windows) ולבחור בדיוק את האזור בו התמונה נמצאת. בקצה הבחירה תראה לך בדיוק מה הרוחב בגובהו.

4. וודא שלכל התמונות המקוריות יש גודל זהה-במיוחד הרוחב-כשאתה מעלה אותן.

בדוגמה שלי יש לי את התמונה לגודל המרבי של 1200 × 677 פיקסלים.

5. עבור להגדרות המדיה של WordPress (הגדרות - מדיה) וקבע את הממדים הספציפיים של הבלוג שלך (גודל מלא, גודל בינוני, תמונה ממוזערת).

במקרה שלי יש לי: 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. עבור אל כלים ב- WordPress (כלים) - התחדשות ממוזערת.

בתחתית אמורים להופיע הערכים החדשים שלך שנוספו למעלה:

• תכונת שולחן עבודה:745 × 420 פיקסלים (חתוך להתאמה)
• תוספות ניידות:400 × 226 פיקסלים (חתוך להתאמה)
• Mobile-Feypured-2X:800 × 451 פיקסלים (חתוך להתאמה)

אם ערכים אלה מופיעים, בחרו לחדש תמונות ממוזערות רק לתמונות מייצגות (תמונות מוצגות בלבד).

8. עבור להגדרות הנושא ובחר את הגודל הממוצע של "תמונה מוצגת" (CenferAtePress).

לאחר סיום ההתחדשות של התמונות, יש לפתור את בעיית ה- LCP במובייל המוצג.

אתה רק צריך לבדוק ב- Chrome (מגדלור) ועוד תובנות מהירות כדי לוודא שהכל עובד כרצונך וה- LCP הגדול הוסר.

כהשלמה, אתה יכול להוסיף קואורדינטות למסכי שולחן העבודה של הרשתית, החל מ ""add_image_size('desktop-featured', 1490, 840, true);"והשלמת הפונקציות בקוד.

קָשׁוּר: Links do not have a discernible name. Lighthouse Fix

אם אינך מטפל בבעיית ה- LCP בנייד לתמונה מוצגת (במיוחד עבור MeaneTepress), השאר לי תגובה כאן.