Το GeneratePress είναι ένα πολύ ελαφρύ και σχετικά καλό θέμα WordPress για SEO, εξασφαλίζοντας μια χαμηλή κατανάλωση πόρων και έναν πολύ ευέλικτο κώδικα. Ωστόσο, μου έδωσε κάποιους πονοκεφάλους για τη βελτιστοποίηση του LCP στο κινητό για την προτεινόμενη εικόνα. Αυτή η αντιπροσωπευτική εικόνα δημιουργεί ένα πολύ μεγάλο LCP (μεγαλύτερο χρώμα) στο Σπες Σπες, ειδικά αν στο blog έχετε γραφές Java (Adsense, διαχειριστής ετικετών κ.λπ.), οι οποίες μπορούν να εμποδίσουν την απόδοση.
Ωστόσο, κατάφερα να ξεπεράσω αυτό το πρόβλημα και να επιτύχω τη βελτιστοποίηση της προτεινόμενης εικόνας και τελικά να πάρω 100% βαθμολογία απόδοσης σε κινητά και επιφάνεια εργασίας.
Βελτιστοποίηση LCP σε κινητό για προτεινόμενη εικόνα (GeneratePress)
Εάν αντιμετωπίσετε αυτό το πρόβλημα και ο ιστότοπός σας έχει χαμηλή βαθμολογία απόδοσης σε κινητές συσκευές λόγω της αντιπροσωπευτικής εικόνας, εδώ είναι αυτό που πρέπει να κάνετε για να μειώσετε το LCP.
1. Απενεργοποιήστε οποιοδήποτε σύστημα προσωρινής μνήμης κατά τη διάρκεια αλλαγών και δοκιμών. Απενεργοποιεί την προσωρινή μνήμη τόσο στο επίπεδο του διακομιστή (FastCGI, Redis κ.λπ.) όσο και σε ενότητες (WP Rocket, WP Super Cache, κλπ.).
2. Εγκαταστήστε και ενεργοποιήστε τη μονάδα Αναζωογονήστε τις μικρογραφίες ή οποιαδήποτε άλλη ενότητα μπορεί να αναγεννηθεί οι εικόνες σας. Ακόμα κι αν φαίνεται ότι δεν έχει ενημερωθεί για κάποιο χρονικό διάστημα, το χρησιμοποίησα.
3. Βεβαιωθείτε ότι γνωρίζετε ποιες είναι οι ακριβείς διαστάσεις στη σελίδα (στην επιφάνεια εργασίας) της αντιπροσωπευτικής εικόνας (εμφανιζόμενη εικόνα). Για να μάθετε ευκολότερα, μπορείτε να χρησιμοποιήσετε το εργαλείο screenshot σε Mac (ή Windows) και να επιλέξετε ακριβώς την περιοχή όπου βρίσκεται η εικόνα. Στην άκρη της επιλογής θα σας δείξετε ακριβώς ποιο είναι το πλάτος στο ύψος του.
4. Βεβαιωθείτε ότι όλες οι αρχικές εικόνες έχουν το ίδιο μέγεθος-ειδικά το πλάτος-όταν τις ανεβάζετε.
Στο παράδειγμά μου έχω την εικόνα στο μέγιστο μέγεθος των 1200 × 677 pixels.
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 στην προτεινόμενη εικόνα κινητής τηλεφωνίας πρέπει να λυθεί.
Απλά πρέπει να δοκιμάσετε το Chrome (φάρο) και επάνω Σπες Σπες Για να βεβαιωθείτε ότι όλα λειτουργούν όπως θέλετε και το μεγάλο LCP έχει αφαιρεθεί.
Ως συμπλήρωμα, μπορείτε να προσθέσετε συντεταγμένες για οθόνες επιφάνειας εργασίας αμφιβληστροειδούς, ξεκινώντας με "add_image_size('desktop-featured', 1490, 840, true);"Και ολοκληρώνοντας τις λειτουργίες στον κώδικα.
Σχετίζεται με: Links do not have a discernible name. Lighthouse Fix
Εάν δεν χειριστείτε το πρόβλημα LCP στο κινητό για την προτεινόμενη εικόνα (ειδικά για το GeneratePress), αφήστε μου να σχολιάσω εδώ.
