Πώς διορθώνεται η παράδοση εικόνων στο PageSpeed Insights

1. 01Ανοίξτε τη σελίδα σε PageSpeed Insights ή Lighthouse. Επιλέξτε αναφορά κινητού ή υπολογιστή, αναπτύξτε την ενότητα βελτίωσης παράδοσης εικόνων και σημειώστε το επισημασμένο URL και την προτεινόμενη αλλαγή.
2. 02Βρείτε την εικόνα στη σελίδα. Στα εργαλεία προγραμματιστή συγκρίνετε τη ληφθείσα εικόνα με τις εμφανιζόμενες διαστάσεις, λαμβάνοντας υπόψη την πυκνότητα οθόνης. Ελέγξτε την επιλεγμένη πηγή, όχι μόνο το πρωτότυπο στη βιβλιοθήκη.
3. 03Αν η παραδιδόμενη εικόνα έχει υπερβολικά εικονοστοιχεία, διορθώστε πρώτα προσαρμοστικές διαστάσεις ή ρυθμίσεις θέματος. Αν οι διαστάσεις ταιριάζουν, συγκρίνετε συμπίεση ή άλλη υποστηριζόμενη μορφή.
4. 04Ετοιμάστε αντίγραφο στις σωστές διαστάσεις σε επεξεργαστή. Χρησιμοποιήστε τον συμπιεστή εικόνων Bitinz για κατάλληλα αρχεία και ελέγξτε κείμενο, άκρες, διαφάνεια και διαβαθμίσεις πριν αντικαταστήσετε οτιδήποτε.
5. 05Δημοσιεύστε την αντικατάσταση ή την αλλαγή προτύπου. Βεβαιωθείτε ότι η σελίδα ζητά τη νέα εικόνα αντί για παλιά προσωρινά αποθηκευμένη έκδοση και επαναλάβετε με την ίδια ρύθμιση συσκευής.

Το Chrome εκτιμά εξοικονόμηση από το μέγεθος λήψης και αποδοτική αναλογία bytes ανά εικονοστοιχείο για τη μορφή. Δεν επισημαίνονται εικόνες με εκτίμηση κάτω από 4 KiB. Είναι όριο αναφοράς, όχι προτεινόμενο μέγιστο μέγεθος.

Το Lighthouse 13 αντικατέστησε τους παλιούς ελέγχους εικόνων με αυτή την ανάλυση· το Lighthouse 12 είχε ήδη κάνει τις αναλύσεις προεπιλεγμένη προβολή. Ειδοποιήσεις μορφής, διαστάσεις και βαριά κίνηση μπορεί να θέλουν διαφορετικές λύσεις. Για ολόκληρη τη διαδικασία δείτε συμπίεση εικόνων για ιστότοπο.

• WordPress: ελέγξτε το μέγεθος που επιλέγεται στο μπλοκ ή θέμα και την πραγματική σήμανση srcset και sizes. Το WordPress δημιουργεί προσαρμοστικές εκδόσεις, αλλά ειδικό πρότυπο ή ανακριβής περιγραφή διάταξης μπορεί να δώσει ακατάλληλο μέγεθος. Αλλάζοντας μόνο το πρωτότυπο μπορεί να παραμείνουν παλιά παραγόμενα αντίγραφα.
• Shopify: οι εικόνες ήδη βελτιστοποιούνται μέσω του CDN Shopify, μαζί με την επιλογή μορφής. Το Shopify λέει ότι η χειροκίνητη συμπίεση πριν τη μεταφόρτωση δεν χρειάζεται. Ελέγξτε το πλάτος που ζητά το θέμα και την προσαρμοστική σήμανση αντί να υποβαθμίζετε ξανά την πηγή. Ο προγραμματιστής θέματος μπορεί να ελέγξει image_url και image_tag.
• Next.js: χρησιμοποιήστε τις προσαρμοστικές ρυθμίσεις του στοιχείου Image και δώστε στο sizes τιμή που ταιριάζει στη διάταξη, ειδικά με fill. Χωρίς σωστή τιμή, μια στενή εικόνα μπορεί να θεωρηθεί πλήρους πλάτους και να ληφθεί μεγαλύτερη έκδοση. Μόνο η αλλαγή ποιότητας δεν διορθώνει τη διάταξη.

Κρατήστε επεξεργάσιμο πρωτότυπο. Για ανεξάρτητα παραδιδόμενες εικόνες συγκρίνετε πραγματικό μέγεθος και εμφάνιση· η σύγκριση JPG, PNG και WebP βοηθά. Το Bitinz δεν αλλάζει διαστάσεις. Η μετατροπή WebP μπορεί να μεγαλώσει το αρχείο, οπότε κρατήστε όποια έκδοση ταιριάζει στη σελίδα.

Για τακτικές δημοσιεύσεις, το API προγραμματιστών επεξεργάζεται κατάλληλα αρχεία με λογαριασμό και μηνιαίο όριο. Δεν διορθώνει τη σήμανση θέματος ή την προσαρμοστική διάταξη. Ελέγξτε ξανά τη σελίδα αφού συνδεθεί ο αυτοματισμός.

• Το επισημασμένο URL αντιστοιχεί στην εικόνα και έκδοση που αλλάξατε.
• Ο φυλλομετρητής επιλέγει κατάλληλη πηγή σε διαφορετικές οθόνες.
• Η συμπίεση διατηρεί χρήσιμες λεπτομέρειες, διαφάνεια και ομαλές διαβαθμίσεις.
• Η κύρια ορατή εικόνα δεν καθυστερεί λόγω ακατάλληλης ρύθμισης αναβαλλόμενης φόρτωσης.
• Η νέα αναφορά χρησιμοποιεί την ίδια συσκευή· ελέγχθηκαν επίσης πραγματική εμφάνιση και φόρτωση.