Οι ταπεινοί <img>
στοιχείο έχει αποκτήσει κάποιες υπερδυνάμεις με τα χρόνια. Δεδομένου του πόσο κεντρικό είναι η βελτιστοποίηση εικόνας στον ιστό, ας μάθουμε τι μπορεί να κάνει και πώς μπορεί να συμβάλει στη βελτίωση της εμπειρίας χρήστη και της Core Web Vital. Θα καλύψω τη βελτιστοποίηση εικόνας σε μεγαλύτερο βάθος στο Smashing Magazine νέο βιβλίο για τη Βελτιστοποίηση εικόνας.
Μερικές συμβουλές για να ξεκινήσουμε:
- Για μια νηστεία Μεγαλύτερο περιεχόμενο με ικανοποίηση:
- Ζητήστε έγκαιρα την εικόνα του βασικού ήρωα σας.
- Χρησιμοποιήστε srcset + αποτελεσματικές σύγχρονες μορφές εικόνας.
- Αποφύγετε τη σπατάλη pixel (συμπίεση, μην προβάλλετε εικόνες με υπερβολικά υψηλό DPR).
- Τεμπελική φόρτωση εικόνων εκτός οθόνης (μειώστε τη διαμάχη δικτύου για βασικούς πόρους).
- Για χαμηλό Αθροιστική αλλαγή διάταξης:
- Ορίστε διαστάσεις (πλάτος, ύψος) στις εικόνες σας.
- Χρησιμοποιήστε τα πλαίσια αναλογίας διαστάσεων ή αναλογίας διαστάσεων CSS για να δεσμεύσετε χώρο διαφορετικά.
- Για χαμηλό αντίκτυπο σε Πρώτη καθυστέρηση εισαγωγής:
- Αποφύγετε εικόνες που προκαλούν διαμάχη δικτύου με άλλους κρίσιμους πόρους όπως CSS και JS. Αν και δεν αποκλείουν την απόδοση, μπορούν να επηρεάσουν έμμεσα την απόδοση της απόδοσης.
Note: Σύγχρονα στοιχεία εικόνας που βασίζονται σε <img>
, αρέσει Next.js <Image>
(για το React) και Εικόνα Nuxt (για το Vue) προσπαθήστε να εμπλουτίσετε όσο το δυνατόν περισσότερες από αυτές τις έννοιες από προεπιλογή. Θα το καλύψουμε αργότερα. Μπορείτε φυσικά να το κάνετε και χειροκίνητα χρησιμοποιώντας το <img>
στοιχείο άμεσα. Εάν χρησιμοποιείτε το 11ty για τους στατικούς ιστότοπούς σας, δοκιμάστε το Πρότυπο ιστολογίου 11ty υψηλής απόδοσης.
Πώς επηρεάζουν οι εικόνες την εμπειρία χρήστη και τα βασικά στοιχεία του Ιστού;
Ίσως έχετε ακούσει για το Core Web Vitals (CWV). Είναι μια πρωτοβουλία της Google να μοιράζεται ενοποιημένες οδηγίες για ποιοτικά σήματα που μπορούν να είναι καθοριστικά για την παροχή μιας εξαιρετικής εμπειρίας χρήστη στον ιστό. Το CWV είναι μέρος ενός συνόλου σήματα εμπειρίας σελίδας Η Αναζήτηση Google θα αξιολογήσει την κατάταξη. Οι εικόνες μπορούν να επηρεάσουν το CWV με διάφορους τρόπους.
Σε πολλές σύγχρονες εμπειρίες ιστού, οι εικόνες τείνουν να είναι το μεγαλύτερο ορατό στοιχείο όταν μια σελίδα ολοκληρώνει τη φόρτωση. Αυτές περιλαμβάνουν εικόνες Ηρώων, εικόνες από καρουσέλ, ιστορίες και πανό. Μεγαλύτερο περιεχόμενο με ικανοποίηση Το (LCP) είναι μια μέτρηση Core Web Vitals που μετρά πότε γίνεται ορατό το μεγαλύτερο στοιχείο περιεχομένου (εικόνες, κείμενο) στη θύρα προβολής ενός χρήστη, όπως μία από αυτές τις εικόνες.
Αυτό επιτρέπει σε ένα πρόγραμμα περιήγησης να προσδιορίσει πότε το κύριο περιεχόμενο της σελίδας έχει ολοκληρωθεί η απόδοση. Όταν μια εικόνα είναι το μεγαλύτερο στοιχείο περιεχομένου, το πόσο αργά φορτώνει αυτή η εικόνα μπορεί να επηρεάσει το LCP. Εκτός από την εφαρμογή συμπίεσης εικόνας (π.χ Squoosh, Αιχμηρός, ImageOptim ή ένα CDN εικόνας), και χρησιμοποιώντας μια σύγχρονη μορφή εικόνας, μπορείτε να τροποποιήσετε το <img>
στοιχείο για προβολή της πιο κατάλληλης απόκρισης έκδοσης μιας εικόνας ή φόρτωσή της.
Οι αλλαγές διάταξης μπορεί να αποσπούν την προσοχή των χρηστών. Φανταστείτε ότι έχετε αρχίσει να διαβάζετε ένα άρθρο όταν ξαφνικά στοιχεία αλλάζουν γύρω από τη σελίδα, σας απορρίπτουν και σας ζητούν να βρείτε ξανά τη θέση σας. Αθροιστική αλλαγή διάταξης (CLS, μια μέτρηση Core Web Vitals) μετρά την αστάθεια του περιεχομένου. Οι πιο συνηθισμένες αιτίες του CLS περιλαμβάνουν εικόνες χωρίς διαστάσεις (βλ. παρακάτω) που μπορεί να πιέσουν προς τα κάτω το περιεχόμενο όταν φορτωθούν και κουμπώσουν στη θέση τους. Η αγνόησή τους σημαίνει ότι το πρόγραμμα περιήγησης ενδέχεται να μην μπορεί να κρατήσει αρκετό χώρο πριν από τη φόρτωσή τους.
Είναι δυνατό οι εικόνες να μπλοκάρουν το εύρος ζώνης και τη CPU ενός χρήστη κατά τη φόρτωση της σελίδας. Μπορούν να παρεμποδίσουν τον τρόπο φόρτωσης κρίσιμων πόρων, ιδίως σε αργές συνδέσεις και φορητές συσκευές κατώτερης τεχνολογίας που οδηγούν σε κορεσμό εύρους ζώνης. Πρώτη καθυστέρηση εισαγωγής (FID) είναι μια μέτρηση Core Web Vitals που αποτυπώνει την πρώτη εντύπωση ενός χρήστη για τη διαδραστικότητα και την ανταπόκριση ενός ιστότοπου. Με τη μείωση της χρήσης CPU του κύριου νήματος, το FID μπορεί επίσης να μειωθεί.
Lighthouse
Σε αυτόν τον οδηγό, θα χρησιμοποιήσουμε το Lighthouse για να εντοπίσουμε ευκαιρίες βελτίωσης του Core Web Vitals. Lighthouse είναι ένα αυτοματοποιημένο εργαλείο ανοιχτού κώδικα για τη βελτίωση της ποιότητας των ιστοσελίδων. Μπορείτε να το βρείτε στο chromedevtools σουίτα εργαλείων εντοπισμού σφαλμάτων και εκτελέστε την σε οποιαδήποτε ιστοσελίδα, δημόσια ή που απαιτεί έλεγχο ταυτότητας. Μπορείτε επίσης να βρείτε το Lighthouse σε PageSpeed Insights, CI και WebPageTest.
Λάβετε υπόψη ότι το Lighthouse είναι ένα εργαλείο εργαστηρίου. Αν και είναι ιδανικό για την αναζήτηση ευκαιριών για τη βελτίωση της εμπειρίας χρήστη σας, προσπαθήστε πάντα να συμβουλεύεστε δεδομένα πραγματικού κόσμου για μια πλήρη εικόνα του τι βλέπουν οι πραγματικοί χρήστες.
Τα Βασικά
Για να τοποθετήσουμε μια εικόνα σε μια ιστοσελίδα, χρησιμοποιούμε το <img>
στοιχείο. Αυτό είναι ένα κενό στοιχείο — έχει χωρίς ετικέτα κλεισίματος — απαιτείται τουλάχιστον ένα χαρακτηριστικό για να είναι χρήσιμο: src
, η πηγή. Εάν καλείται μια εικόνα donut.jpg και υπάρχει στην ίδια διαδρομή με το έγγραφό σας HTML, μπορεί να ενσωματωθεί ως εξής:
<img src="donut.jpg">
Για να διασφαλίσουμε ότι η εικόνα μας είναι προσβάσιμη, προσθέτουμε το alt
Χαρακτηριστικό. Η τιμή αυτού του χαρακτηριστικού θα πρέπει να είναι μια περιγραφή κειμένου της εικόνας και χρησιμοποιείται ως εναλλακτική στην εικόνα όταν δεν μπορεί να εμφανιστεί ή να δει. για παράδειγμα, ένας χρήστης που έχει πρόσβαση στη σελίδα σας μέσω ενός προγράμματος ανάγνωσης οθόνης. Ο παραπάνω κωδικός με ένα alt
καθορισμένο φαίνεται ως εξής:
<img src="donut.jpg" alt="A delicious pink donut.">
Στη συνέχεια, προσθέτουμε width
και height
γνωρίσματα για να καθορίσετε το πλάτος και το ύψος της εικόνας, αλλιώς γνωστές ως διαστάσεις της εικόνας. Οι διαστάσεις μιας εικόνας μπορούν συνήθως να βρεθούν κοιτάζοντας αυτές τις πληροφορίες μέσω της εξερεύνησης αρχείων του λειτουργικού σας συστήματος (Cmd + I
σε macOS).
<img src="donut.jpg" alt="A delicious pink donut." width="400" height="400">
Όταν width
και height
καθορίζονται σε μια εικόνα, το πρόγραμμα περιήγησης γνωρίζει πόσο χώρο πρέπει να κρατήσει για την εικόνα μέχρι να γίνει λήψη. Ξεχνάτε να συμπεριλάβετε τις διαστάσεις της εικόνας μπορεί να προκαλέσει αλλαγές διάταξης, καθώς το πρόγραμμα περιήγησης δεν είναι σίγουρο πόσο χώρο θα χρειαστεί η εικόνα.
Τα σύγχρονα προγράμματα περιήγησης ορίζουν πλέον την προεπιλεγμένη αναλογία διαστάσεων των εικόνων με βάση την αναλογία εικόνας width
και height
χαρακτηριστικά, επομένως είναι πολύτιμο να τα ορίσετε για να αποτρέψετε τέτοιες αλλαγές διάταξης.
Προσδιορίστε το μεγαλύτερο περιεκτικό στοιχείο ζωγραφικής
Το Lighthouse έχει μια επιθεώρηση "Μεγαλύτερο Περιεχόμενο Στοιχείο Βαφής" που προσδιορίζει ποιο στοιχείο ήταν το μεγαλύτερο περιεχόμενο χρώματος. Αν τοποθετήσετε το δείκτη του ποντικιού πάνω από το στοιχείο, θα το επισημάνετε στο κύριο παράθυρο του προγράμματος περιήγησης.
Εάν αυτό το στοιχείο είναι μια εικόνα, αυτές οι πληροφορίες είναι μια χρήσιμη υπόδειξη που μπορεί να θέλετε να βελτιστοποιήσετε τη φόρτωση αυτής της εικόνας. Μπορεί επίσης να σας φανεί χρήσιμο LCP Bookmarklet από την Annie Sullivan χρήσιμο για γρήγορη αναγνώριση του στοιχείου LCP με ένα κόκκινο ορθογώνιο με ένα μόνο κλικ.
Σημείωση: Το μεγαλύτερο υποψήφιο στοιχείο ζωγραφικής με περιεχόμενο μπορεί να αλλάξει μέσω της φόρτωσης της σελίδας. Για αυτόν τον λόγο, είναι πολύτιμο όχι μόνο να δούμε τι μπορεί να λέει συνθετικά εργαλεία όπως το Lighthouse, αλλά και να συμβουλευτείτε τι πραγματικούς χρήστες δείτε.
Τοποθέτηση του ποντικιού πάνω από μια εικόνα στα Εργαλεία προγραμματιστών του Chrome Στοιχεία Ο πίνακας θα εμφανίσει τις διαστάσεις της εικόνας καθώς και το εγγενές μέγεθος της εικόνας.
Προσδιορίστε τις αλλαγές διάταξης από εικόνες χωρίς διαστάσεις
Προς την περιορίσει Η αθροιστική αλλαγή διάταξης που προκαλείται από εικόνες χωρίς διαστάσεις, περιλαμβάνει χαρακτηριστικά μεγέθους πλάτους και ύψους στις εικόνες και τα στοιχεία βίντεο. Αυτή η προσέγγιση διασφαλίζει ότι το πρόγραμμα περιήγησης μπορεί να εκχωρήσει τη σωστή ποσότητα χώρου στο έγγραφο κατά τη φόρτωση της εικόνας. Το Lighthouse θα τονίσει εικόνες χωρίς πλάτος και ύψος:
Βλέπω Η ρύθμιση ύψους και πλάτους στις εικόνες είναι και πάλι σημαντική για μια καλή καταγραφή σχετικά με τη σημασία της σκέψης σχετικά με τις διαστάσεις και την αναλογία εικόνας.
Αποκριτικές εικόνες
Τι γίνεται με την εναλλαγή ανάλυσης εικόνας; Ένα πρότυπο <img>
μας επιτρέπει μόνο να παρέχουμε ένα μόνο αρχείο προέλευσης στο πρόγραμμα περιήγησης. Αλλά με το srcset
και sizes
χαρακτηριστικά, μπορούμε να παρέχουμε πολλές πρόσθετες εικόνες πηγής (και υποδείξεις), ώστε το πρόγραμμα περιήγησης να επιλέξει την καταλληλότερη. Αυτό μας επιτρέπει να παρέχουμε εικόνες που είναι μικρότερες ή μεγαλύτερες.
<img src="donut-800w.jpg" alt="A delicious pink donut." width="400" height="400" srcset="donut-400w.jpg 400w, donut-800w.jpg 800w" sizes="(max-width: 640px) 400px, 800px">
Η srcset
Το χαρακτηριστικό ορίζει το σύνολο εικόνων από το οποίο μπορεί να επιλέξει το πρόγραμμα περιήγησης, καθώς και το μέγεθος κάθε εικόνας. Κάθε συμβολοσειρά εικόνας χωρίζεται με κόμμα και περιλαμβάνει:
- όνομα αρχείου πηγής (
donut-400w.jpg
); - ένας χώρος;
- και το εγγενές πλάτος της εικόνας που καθορίζεται σε pixel (
400w
), ή έναν περιγραφέα πυκνότητας pixel (1x
,1.5x
,2x
, και ούτω καθεξής).
Η sizes
Το χαρακτηριστικό καθορίζει ένα σύνολο συνθηκών, όπως πλάτη οθόνης και ποιο μέγεθος εικόνας είναι καλύτερο να επιλέξετε όταν πληρούνται αυτές οι συνθήκες. παραπάνω, (max-width:640px
) είναι μια συνθήκη μέσων που ρωτά "εάν το πλάτος της θύρας προβολής είναι 640 pixel ή λιγότερο" και 400px
είναι το πλάτος της υποδοχής, η εικόνα θα γεμίσει όταν η συνθήκη του μέσου είναι αληθής. Αυτό αντιστοιχεί συνήθως στα σημεία διακοπής απόκρισης της σελίδας.
Αναλογία εικονοστοιχείων συσκευής (DPR) / Περιορισμός πυκνότητας εικονοστοιχείων
Το Device Pixel Ratio (DPR) αντιπροσωπεύει τον τρόπο με τον οποίο ένα εικονοστοιχείο CSS μεταφράζεται σε φυσικά εικονοστοιχεία σε μια οθόνη υλικού. Υψηλής ανάλυσης και οι οθόνες αμφιβληστροειδούς χρησιμοποιούν περισσότερα φυσικά εικονοστοιχεία για να αναπαραστήσουν εικονοστοιχεία CSS για εικόνες που είναι πιο ευκρινείς και έχουν πιο λεπτομερή γραφικά.
Το ανθρώπινο μάτι μπορεί να μην είναι σε θέση να διακρίνει τη διαφορά μεταξύ εικόνων που είναι DPR 2x-3x έναντι ακόμη υψηλότερης ανάλυσης. Η προβολή εικόνων με υπερβολικά υψηλό DPR είναι ένα κοινό πρόβλημα για τους ιστότοπους που χρησιμοποιούν μόχλευση <img srcset>
και μια σουίτα μεγεθών εικόνας.
Μπορεί να είναι δυνατό να χρησιμοποιήσετε το DPR-capping για να εξυπηρετήσετε στους χρήστες σας μια εικόνα με πιστότητα 2x ή 3x για να αποτρέψετε μεγάλα ωφέλιμα φορτία εικόνων. Κελάδημα ανώτατο όριο την πιστότητα της εικόνας τους στο 2x, με αποτέλεσμα 33% ταχύτερους χρόνους φόρτωσης εικόνων στο χρονοδιάγραμμα. Βρήκαν ότι το 2x ήταν ένα γλυκό σημείο και για τις δύο νίκες καλής απόδοσης χωρίς υποβάθμιση στις μετρήσεις ποιότητας.
Σημείωση: Αυτή η προσέγγιση στο όριο DPR δεν είναι προς το παρόν δυνατή εάν χρησιμοποιούνται περιγραφείς "w".
Προσδιορίστε εικόνες που μπορούν να έχουν καλύτερο μέγεθος
Το Lighthouse περιλαμβάνει έναν αριθμό ελέγχων βελτιστοποίησης εικόνας για να σας βοηθήσει να κατανοήσετε εάν οι εικόνες σας θα μπορούσαν να συμπιεστούν καλύτερα, να παραδοθούν σε μια πιο βέλτιστη σύγχρονη μορφή εικόνας ή να αλλάξετε το μέγεθος.
Ακόμη και εκείνες οι εικόνες που αποκρίνονται (δηλαδή έχουν μέγεθος σε σχέση με τη θύρα προβολής) θα πρέπει να έχουν ένα σύνολο πλάτους και ύψους. Στα σύγχρονα προγράμματα περιήγησης, αυτά τα χαρακτηριστικά καθορίζουν μια αναλογία διαστάσεων που βοηθά στην αποφυγή αλλαγών διάταξης, ακόμη και αν τα απόλυτα μεγέθη παρακάμπτονται από το CSS.
Όταν δεν χρησιμοποιώ CDN εικόνας ή πλαίσιο, μου αρέσει να χρησιμοποιώ responsivebreakpoints.com για τον προσδιορισμό των βέλτιστων σημείων διακοπής εικόνας και τη δημιουργία <img>
srcset κώδικας για τις αποκριτικές εικόνες μου.
Εξυπηρέτηση σύγχρονων μορφών εικόνας
Η καλλιτεχνική διεύθυνση μας επιτρέπει να προβάλλουμε διαφορετικές εικόνες ανάλογα με την εμφάνιση του χρήστη. Ενώ οι αποκριτικές εικόνες φορτώνουν διαφορετικά μεγέθη της ίδιας εικόνας, η καλλιτεχνική κατεύθυνση μπορεί να φορτώσει πολύ διαφορετικές εικόνες με βάση την οθόνη.
Το πρόγραμμα περιήγησης μπορεί να επιλέξει ποια μορφή εικόνας θα εμφανίζεται χρησιμοποιώντας το <picture>
στοιχείο. ο <picture>
στοιχείο υποστηρίζει πολλαπλές <source>
στοιχεία και ένα ενιαίο <img>
στοιχείο, το οποίο μπορεί να παραπέμπει σε πηγές για διαφορετικές μορφές, όπως AVIF, WebP και τελικά JPEG XL.
<picture> <source srcset="puppy.jxl" type="image/jxl"> <source srcset="puppy.avif" type="image/avif"> <source srcset="puppy.webp" type="image/webp"> <source srcset="puppy.jpg" type="image/jpeg"> <img src="puppy.jpg" alt="Cute puppy">
</picture>
Σε αυτό το παράδειγμα, το πρόγραμμα περιήγησης θα αρχίσει να αναλύει τις πηγές και θα σταματήσει όταν βρει την πρώτη υποστηριζόμενη αντιστοίχιση. Εάν δεν βρεθεί αντιστοίχιση, το πρόγραμμα περιήγησης φορτώνει την πηγή που καθορίζεται <img>
ως εναλλακτική. Αυτή η προσέγγιση λειτουργεί καλά για την προβολή οποιασδήποτε σύγχρονης μορφής εικόνας που δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης. Να είστε προσεκτικοί με παραγγελία <source>
στοιχεία καθώς έχει σημασία η παραγγελία. Μην τοποθετείτε τις σύγχρονες πηγές μετά από μορφές παλαιού τύπου, αλλά τοποθετήστε τις πριν. Τα προγράμματα περιήγησης που το καταλαβαίνουν θα τα χρησιμοποιούν και αυτά που δεν το καταλαβαίνουν θα μετακινηθούν σε ευρύτερα υποστηριζόμενα πλαίσια.
Η κατανόηση των μυριάδων επιλογών μορφής εικόνας εκεί έξω σήμερα μπορεί να είναι μια διαδικασία που προκαλεί σύγχυση, αλλά μπορεί να βρείτε το Clodinary's σύγκριση σύγχρονων μορφών εικόνας βοηθητικός:
Μπορείτε επίσης να βρείτε το Malte Ubl's Επιλογέας ρυθμίσεων ποιότητας AVIF και WebP χρήσιμο για την επιλογή ρυθμίσεων ποιότητας που ταιριάζουν με την ποιότητα ενός JPEG σε μια συγκεκριμένη δεδομένη ρύθμιση ποιότητας.
Προσδιορίστε εικόνες που θα μπορούσαν να σερβιριστούν σε πιο μοντέρνα μορφή
Το Lighthouse (παρακάτω) υπογραμμίζει πιθανές εξοικονομήσεις από την προβολή εικόνων σε μορφή επόμενης γενιάς.
Σημείωση: Έχουμε μια ανοιχτό ζήτημα για να τονίσει καλύτερα τις πιθανές εξοικονομήσεις για το AVIF στο Lighthouse.
Μπορεί επίσης να βρείτε αξία στη χρήση εργαλείων ελέγχου εικόνας, όπως π.χ Εργαλείο ανάλυσης εικόνας της Cloudinary για μια βαθύτερη ματιά στις ευκαιρίες συμπίεσης εικόνας για όλες τις εικόνες μιας σελίδας. Ως μπόνους, μπορείτε να κάνετε λήψη συμπιεσμένων εκδόσεων προτεινόμενων μορφών εικόνας όπως το WebP:
Μου αρέσει επίσης να χρησιμοποιώ Squoosh για την υποστήριξη μορφών αιχμής, όπως το JPEG XL, καθώς προσφέρει έναν τρόπο χαμηλής τριβής πειραματισμού με σύγχρονες μορφές εκτός CLI ή CDN.
Υπάρχουν πολλοί τρόποι για να προσεγγίσετε τα ζητήματα μεγεθών καθώς και το srcset και τα μεγέθη μπορούν να χρησιμοποιηθούν και τα δύο <picture>
και <img>
. όταν έχετε αμφιβολίες, χρησιμοποιήστε <img>
με srcset/μεγέθη για μεμονωμένες εικόνες που έχουν απλή διάταξη. Χρήση <picture>
για την εξυπηρέτηση πολλαπλών μορφών, πολύπλοκης διάταξης και καλλιτεχνικής διεύθυνσης.
Το Chrome DevTools σάς επιτρέπει να απενεργοποιήσετε τις σύγχρονες μορφές εικόνας (διαδήλωση), όπως WebP, AVIF ή JPEG XL, για να δοκιμάσετε διαφορετικά εναλλακτικά για αυτά στο απόδοση κατάλογο:
Το CanIUse διαθέτει τις πιο πρόσφατες λεπτομέρειες υποστήριξης προγράμματος περιήγησης WebP, AVIF και jpeg xl.
Διαπραγμάτευση περιεχομένου
Μια εναλλακτική λύση στον χειροκίνητο χειρισμό της επιλογής μορφής εικόνας χρησιμοποιώντας <picture>
είναι να βασιστείτε στο αποδοχή κεφαλίδας. Αυτό αποστέλλεται από τον πελάτη, επιτρέποντας στον διακομιστή να παρέχει μια μορφή εικόνας που ταιριάζει καλύτερα στον χρήστη. CDN όπως Akamai, Συννεφιά και Cloudflare υποστηρίξτε το.
Εικόνα Lazy Loading
Τι γίνεται με τις εικόνες εκτός οθόνης που δεν είναι ορατές μέχρι ο χρήστης να κάνει κύλιση προς τα κάτω στη σελίδα; Στο παρακάτω παράδειγμα, όλες οι εικόνες στη σελίδα "φορτώνονται με ανυπομονησία" (η προεπιλογή στα προγράμματα περιήγησης σήμερα), με αποτέλεσμα ο χρήστης να κατεβάζει 1.1 MB εικόνων. Αυτό μπορεί να προκαλέσει πλήγμα στα σχέδια δεδομένων των χρηστών εκτός από την επίδραση της απόδοσης.
Χρήση του χαρακτηριστικό φόρτωσης on <img>
, μπορούμε να ελέγξουμε τη συμπεριφορά της φόρτωσης της εικόνας. loading="lazy"
lazy-φορτώνει εικόνες, αναβάλλοντας τη φόρτωσή τους μέχρι να φτάσουν σε μια υπολογισμένη απόσταση από το παράθυρο προβολής. loading="eager"
φορτώνει τις εικόνες αμέσως, ανεξάρτητα από την ορατότητά τους στο παράθυρο προβολής. eager
είναι η προεπιλογή, επομένως δεν χρειάζεται να προστεθεί ρητά (δηλαδή, απλώς χρησιμοποιήστε <img>
για ανυπόμονη φόρτωση).
Παρακάτω είναι ένα παράδειγμα lazy-loading an <img>
με μία μόνο πηγή:
<img src="donut.jpg" alt="A delicious pink donut." loading="lazy" width="400" height="400">
Με μητρική <img>
Lazy-loading, το προηγούμενο παράδειγμα κατεβάζει τώρα μόνο περίπου 90 KB εικόνων! Απλώς προσθέτοντας loading="lazy"
στις εικόνες μας εκτός οθόνης έχει τεράστιο αντίκτυπο. Ιδανικά θέλετε να φορτώσετε όλες τις εικόνες που υπάρχουν έξω από την αρχική θύρα προβολής και να το αποφύγετε για οτιδήποτε βρίσκεται εντός της αρχικής θύρας προβολής.
Η Lazy loading λειτουργεί επίσης με εικόνες που περιλαμβάνουν srcset
:
<img src="donut-800w.jpg" alt="A delicious donut" width="400" height="400" srcset="donut-400w.jpg 400w, donut-800w.jpg 800w" sizes="(max-width: 640px) 400px, 800px" loading="lazy">
Εκτός από την εργασία σε srcset
, το χαρακτηριστικό φόρτωσης λειτουργεί επίσης <img>
μέσα <picture>
:
<!-- Lazy-load images in <picture>. <img> is the one driving image loading so <picture> and srcset fall off of that -->
<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy">
</picture>
Η ενότητα "Ευκαιρίες του Φάρου" παραθέτει τυχόν εικόνες εκτός οθόνης ή κρυφές εικόνες σε μια σελίδα που μπορεί να φορτωθούν αργά, καθώς και τις πιθανές εξοικονομήσεις από αυτήν την ενέργεια.
Βλέπω CanIUse.com για υποστήριξη πιο πρόσφατου προγράμματος περιήγησης για εγγενή φόρτωση εικόνων.
Ζητήστε την εικόνα σας έγκαιρα
Βοηθήστε το πρόγραμμα περιήγησης να ανακαλύψει νωρίς την εικόνα LCP, ώστε να μπορεί να την ανακτήσει και να την αποδώσει με ελάχιστη καθυστέρηση. Όπου είναι δυνατόν, προσπαθήστε να το λύσετε ελαχιστοποιώντας καλύτερα τις αλυσίδες αιτημάτων στην εικόνα LCP, έτσι ώστε το πρόγραμμα περιήγησης να μην χρειάζεται πρώτα να ανακτήσει, να αναλύσει και να εκτελέσει JavaScript ή να περιμένει να αποδοθεί/ενυδατωθεί ένα στοιχείο για να ανακαλύψει την εικόνα.
<link rel=preload>
μπορεί να χρησιμοποιηθεί με <img>
για να επιτρέψετε στα προγράμματα περιήγησης να ανακαλύψουν σημαντικούς πόρους που θέλετε να φορτώσετε το συντομότερο δυνατό, προτού βρεθούν σε HTML.
<link rel="preload" as="image" href="donut.jpg">
Εάν βελτιστοποιείτε το LCP, η προφόρτωση μπορεί να σας βοηθήσει να αυξήσετε το πόσο σύντομα θα ανακτώνται οι εικόνες ήρωα που ανακαλύφθηκαν αργά (π.χ. αυτές που φορτώθηκαν από JavaScript ή οι εικόνες των ηρώων φόντου στο CSS). Η προφόρτωση μπορεί να κάνει ουσιαστική διαφορά, εάν χρειάζεται να δοθεί προτεραιότητα στις κρίσιμες εικόνες (όπως οι εικόνες του Hero) έναντι του φορτίου άλλων εικόνων σε μια σελίδα.
Σημείωση: Χρησιμοποιήστε την προφόρτιση με φειδώ και πάντοτε μετρήσει τον αντίκτυπό του στην παραγωγή. Εάν η προφόρτωση για την εικόνα σας είναι νωρίτερα στο έγγραφο από ό, τι είναι, αυτό μπορεί να βοηθήσει τα προγράμματα περιήγησης να την ανακαλύψουν (και να παραγγείλουν σε σχέση με άλλους πόρους). Όταν χρησιμοποιείται λανθασμένα, η προφόρτωση μπορεί να καθυστερήσει η εικόνα σας Πρώτη ικανοποιητική βαφή (π.χ. CSS, Γραμματοσειρές) — το αντίθετο από αυτό που θέλετε. Σημειώστε επίσης ότι για να είναι αποτελεσματικές τέτοιες προσπάθειες επαναπροσδιορισμού προτεραιοτήτων, πρέπει επίσης εξαρτάται από τους διακομιστές που δίνουν σωστή προτεραιότητα στα αιτήματα.
Η προφόρτωση μπορεί να χρησιμοποιηθεί για την ανάκτηση πηγών για ένα <img>
συγκεκριμένης μορφής:
<link rel="preload" as="image" href="donut.webp" type="image/webp">
Σημείωση: Αυτή η προσέγγιση προφορτώνει μόνο την πιο πρόσφατη μορφή όπου υποστηρίζεται, ωστόσο δεν μπορεί να χρησιμοποιηθεί για την προφόρτωση πολλών υποστηριζόμενων μορφών, καθώς θα προφορτώνονταν και οι δύο.
Η προφόρτωση μπορεί επίσης να χρησιμοποιηθεί για τη λήψη εικόνων με απόκριση οπότε η σωστή πηγή ανακαλύπτεται νωρίτερα:
<link rel="preload" as="image" href="donut.jpg" imagesrcset=" poster_400px.jpg 400w, poster_800px.jpg 800w, poster_1600px.jpg 1600w" imagesizes="50vw">
Φροντίστε να μην χρησιμοποιείτε υπερβολική προφόρτωση (όταν κάθε πόρος θεωρείται σημαντικός, κανένας από αυτούς δεν είναι πραγματικά). Κρατήστε το για σημαντικούς πόρους τους οποίους ο σαρωτής προφόρτωσης του προγράμματος περιήγησης ενδέχεται να μην μπορεί να βρει γρήγορα οργανικά.
Το Lighthouse προτείνει ευκαιρίες για εφαρμογή αυτής της βελτιστοποίησης στο Lighthouse 6.5 και νεότερη έκδοση.
Βλέπω CanIUse.com για την τελευταία υποστήριξη προγράμματος περιήγησης για σύνδεσμο rel=preload.
Αποκωδικοποίηση εικόνας
Τα προγράμματα περιήγησης πρέπει να αποκωδικοποιήσουν τις εικόνες που κατεβάζουν για να τις μετατρέψουν σε pixel στην οθόνη σας. Ωστόσο, ο τρόπος με τον οποίο τα προγράμματα περιήγησης χειρίζονται τις εικόνες αναβολής μπορεί να ποικίλλει. Κατά τη στιγμή της γραφής, το Chrome και το Safari παρουσιάζουν εικόνες και κείμενο μαζί – συγχρονισμένα – εάν είναι δυνατόν. Αυτό φαίνεται σωστό οπτικά, αλλά οι εικόνες πρέπει να αποκωδικοποιηθούν, πράγμα που μπορεί να σημαίνει ότι το κείμενο δεν εμφανίζεται μέχρι να ολοκληρωθεί αυτή η εργασία. ο decoding
χαρακτηριστικό ενεργό <img>
σας επιτρέπει να σηματοδοτήσετε μια προτίμηση μεταξύ σύγχρονης και ασύγχρονης αποκωδικοποίησης εικόνας.
<img src="donut-800w.jpg" alt="A delicious donut" width="400" height="400" srcset="donut-400w.jpg 400w, donut-800w.jpg 800w" sizes="(max-width: 640px) 400px, 800px" loading="lazy" decoding="async">
decoding="async"
προτείνει ότι είναι εντάξει να αναβληθεί η αποκωδικοποίηση εικόνας, πράγμα που σημαίνει ότι το πρόγραμμα περιήγησης μπορεί να ραστεροποιήσει και να εμφανίσει περιεχόμενο χωρίς εικόνες, ενώ προγραμματίζει μια ασύγχρονη αποκωδικοποίηση που είναι εκτός της κρίσιμης διαδρομής. Μόλις ολοκληρωθεί η αποκωδικοποίηση της εικόνας, το πρόγραμμα περιήγησης μπορεί να ενημερώσει την παρουσίαση ώστε να περιλαμβάνει εικόνες. decoding=sync
υποδηλώνει ότι η αποκωδικοποίηση για μια εικόνα δεν πρέπει να αναβληθεί και decoding="auto"
επιτρέπει στο πρόγραμμα περιήγησης να κάνει αυτό που κρίνει ότι είναι καλύτερο.
(Ενημερώθηκε: 5 Μαΐου 2021): Η αποκωδικοποίηση εικόνων δεν είναι "ασυγχρονισμός" (χωρίς αποκλεισμό ράστερ) από προεπιλογή. Εάν συνέβαινε αυτό, το υπερβολικό περιεχόμενο στον ιστό θα κατέληγε να αναβοσβήνει κατά τη φόρτωση. Ωστόσο, όλοι οι αποκωδικοποιητές είναι εκτός του κύριου νήματος.
Note: Βλέπω CanIUse.com για την πιο πρόσφατη υποστήριξη του προγράμματος περιήγησης για το χαρακτηριστικό αποκωδικοποίησης.
Χώροι κράτησης θέσης
Τι γίνεται αν θέλετε να δείξετε στον χρήστη ένα σύμβολο κράτησης θέσης κατά τη φόρτωση της εικόνας; ο background-image
Η ιδιότητα CSS μας επιτρέπει να ορίσουμε εικόνες φόντου σε ένα στοιχείο, συμπεριλαμβανομένου του <img>
ετικέτα ή οποιοδήποτε γονικό στοιχείο κοντέινερ. Μπορούμε να συνδυάσουμε background-image
με background-size: cover
για να ορίσετε το μέγεθος της εικόνας φόντου ενός στοιχείου και να κλιμακώσετε την εικόνα όσο το δυνατόν μεγαλύτερη χωρίς να τεντώσετε την εικόνα.
Τα σύμβολα κράτησης θέσης είναι συχνά ενσωματωμένα URL δεδομένων με κωδικοποίηση Base64, τα οποία είναι σύμβολα κράτησης θέσης εικόνας χαμηλής ποιότητας (LQIP) ή σύμβολα θέσης εικόνας SVG (SQIP). Αυτό επιτρέπει στους χρήστες να λαμβάνουν μια πολύ γρήγορη προεπισκόπηση της εικόνας, ακόμη και σε αργές συνδέσεις δικτύου, πριν φορτωθεί η πιο ευκρινής τελική εικόνα για να την αντικαταστήσει.
<img src="donut-800w.jpg" alt="A delicious donut" width="400" height="400" srcset="donut-400w.jpg 400w, donut-800w.jpg 800w" sizes="(max-width: 640px) 400px, 800px" loading="lazy" decoding="async" style="background-size: cover; background-image: url(data:image/svg+xml;base64,[svg text]);">
Σημείωση: Δεδομένου ότι οι διευθύνσεις URL δεδομένων Base64 μπορεί να είναι αρκετά μεγάλες, [svg text]
υποδεικνύεται στο παραπάνω παράδειγμα για τη βελτίωση της αναγνωσιμότητας.
Με ένα ενσωματωμένο σύμβολο κράτησης θέσης SVG, δείτε πώς φαίνεται τώρα το παράδειγμα από νωρίτερα όταν φορτώνεται σε μια πολύ αργή σύνδεση. Παρατηρήστε πώς εμφανίζεται στους χρήστες μια προεπισκόπηση αμέσως πριν από τη λήψη οποιωνδήποτε εικόνων πλήρους μεγέθους:
Υπάρχει μια ποικιλία σύγχρονων λύσεων για σύμβολα κράτησης θέσης εικόνας (π.χ. χρώμα φόντου CSS, LQIP, SQIP, Θάμπωμα κατακερματισμού, Potrace). Η προσέγγιση που έχει περισσότερο νόημα για την εμπειρία χρήστη σας μπορεί να εξαρτάται από το πόσο προσπαθείτε να προσφέρετε μια προεπισκόπηση του τελικού περιεχομένου, να εμφανίσετε την πρόοδο (π.χ. προοδευτική φόρτωση) ή απλώς να αποφύγετε ένα οπτικό φλας όταν τελικά φορτωθεί η εικόνα. είμαι προσωπικά ενθουσιασμένος για Υποστήριξη JPEG XL για πλήρη προοδευτική απόδοση.
Συμπερίληψη εν τέλει μιας ενσωματωμένης διεύθυνσης URL δεδομένων για την εικόνα κράτησης θέσης χαμηλής ποιότητας που προβάλλεται στον αρχικό κώδικα HTML εντός του <img>
's styles αποφεύγει την ανάγκη για πρόσθετο αίτημα δικτύου. Θα θεωρούσα βέλτιστο ένα μέγεθος κράτησης θέσης <= 1-2 KB. Το LCP θα λάβει υπόψη το εγγενές μέγεθος της εικόνας κράτησης θέσης Έτσι, ιδανικά στοχεύστε η "προεπισκόπηση" να ταιριάζει με το εγγενές μέγεθος της πραγματικής εικόνας που φορτώνεται.
Σημείωση: Υπάρχει ένα ανοιχτό ζήτημα για να συζητήσετε τον παράγοντα συντελεστή στην προοδευτική φόρτωση ειδικά στη μέτρηση Largest Contentful Paint.
Τεμπέλης-απόδοση περιεχομένου εκτός οθόνης
Στη συνέχεια, ας συζητήσουμε το CSS content-visibility
ιδιότητα, η οποία επιτρέπει στο πρόγραμμα περιήγησης να παραλείπει την απόδοση, τη διάταξη και τη ζωγραφική για στοιχεία μέχρι να χρειαστούν. Αυτό μπορεί να βοηθήσει στη βελτιστοποίηση της απόδοσης φόρτωσης σελίδας εάν μεγάλο μέρος του περιεχομένου της σελίδας σας είναι εκτός οθόνης, συμπεριλαμβανομένου περιεχομένου που χρησιμοποιεί <img>
στοιχεία. content-visibility:auto
κουτί μείωση πόση εργασία CPU πρέπει να κάνει το πρόγραμμα περιήγησης λιγότερη δουλειά εκ των προτέρων, συμπεριλαμβανομένης της αποκωδικοποίησης εικόνας εκτός οθόνης.
section { content-visibility: auto;
}
Η content-visibility
Ωστόσο, η ιδιοκτησία μπορεί να λάβει διάφορες τιμές, auto
είναι αυτή που προσφέρει οφέλη απόδοσης. Τμήματα της σελίδας με content-visibility: auto
λάβετε περιορισμό για τη διάταξη, τη βαφή και τον περιορισμό στυλ. Εάν το στοιχείο είναι εκτός οθόνης, θα λαμβάνει επίσης περιορισμό μεγέθους.
Τα προγράμματα περιήγησης δεν ζωγραφίζουν το περιεχόμενο της εικόνας για εικόνες που επηρεάζονται από την ορατότητα του περιεχομένου, επομένως αυτή η προσέγγιση μπορεί να εξοικονομήσει χρήματα.
section { content-visibility: auto; contain-intrinsic-size: 700px; }
Μπορείτε να ζευγαρώσετε content-visibility
με contain-intrinsic-size
που παρέχει το φυσικό μέγεθος του στοιχείου εάν επηρεάζεται από τον περιορισμό του μεγέθους. ο 700px
Η τιμή σε αυτό το παράδειγμα προσεγγίζει το πλάτος και το ύψος κάθε τεμαχισμένου τμήματος.
Βλέπω CanIUse.com για την τελευταία υποστήριξη προγράμματος περιήγησης για ορατότητα περιεχομένου CSS.
Next.js Image Component
Το Next.js περιλαμβάνει πλέον ένα Στοιχείο εικόνας με αρκετές από τις παραπάνω βέλτιστες πρακτικές. Το στοιχείο εικόνας χειρίζεται τη βελτιστοποίηση εικόνας, δημιουργώντας εικόνες με απόκριση (αυτοματοποίηση <img srcset>
) και lazy-loading εκτός από πολλές άλλες δυνατότητες. Αυτή είναι μόνο μία από τις βελτιστοποιήσεις που προέκυψαν από τις ομάδες Chrome και Next.js συνεργάζεται με τους ιστότοπους που το υιοθετούν να βλέπουν έως και 60% καλύτερο LCP και 100% καλύτερο CLS.
Στο παρακάτω παράδειγμα Next.js, το πρότυπο <img>
Το στοιχείο χρησιμοποιείται για πρώτη φορά για τη φόρτωση 3 εικόνων ντόνατ που έχουν ληφθεί από το Unsplash.
import Head from 'next/head';
export default function Index() { return ( <div> <Head> <title>Create Next App</title> </Head> <main> <div> <img src="/donut1.jpeg" alt="Donut" height={700} width={700} /> <img src="/donut2.jpeg" alt="Donut" height={700} width={700} /> <img src="/donut3.jpeg" alt="Donut" height={700} width={700} /> </div> </main> </div> );
}
Όταν αυτή η σελίδα φορτώνεται με ανοιχτό τον πίνακα δικτύου DevTools, βλέπουμε ότι οι εικόνες μας είναι πολύ μεγάλες σε μέγεθος (325KB + 4.5MB + 3.6MB = 8.4MB συνολικά), όλες φορτώνονται ανεξάρτητα από το αν ο χρήστης μπορεί να τις δει και είναι πιθανότατα όχι τόσο βελτιστοποιημένο όσο θα μπορούσαν να είναι.
Η φόρτωση εικόνων σε αυτά τα μεγέθη δεν είναι απαραίτητη, ιδιαίτερα εάν ο χρήστης μας βρίσκεται σε φορητή συσκευή. Ας χρησιμοποιήσουμε τώρα το στοιχείο εικόνας Next.js. Το εισάγουμε από το 'next/image' και αντικαθιστούμε όλα μας <img>
παραπομπές με <Image>
.
import Head from 'next/head';
import Image from 'next/image'; export default function Index() { return ( <div> <Head> <title>Next.js Image Component</title> </Head> <main> <div> <Image src="/donut1.jpeg" alt="Donut" height={700} width={700} /> <Image src="/donut2.jpeg" alt="Donut" height={700} width={700} /> <Image src="/donut3.jpeg" alt="Donut" height={700} width={700} /> </div> </main> </div> );
}
Μπορούμε να φορτώσουμε ξανά τη σελίδα μας και να ρίξουμε μια δεύτερη ματιά στον πίνακα δικτύου DevTools. Τώρα μόνο 1 εικόνα φορτώνεται από προεπιλογή (η μόνη που είναι ορατή στη θύρα προβολής), είναι σημαντικά μικρότερη από την αρχική (~33KB έναντι 325KB) και χρησιμοποιεί μια πιο σύγχρονη μορφή (WebP).
Σημείωση: Το Next.js θα βελτιστοποιήσει δυναμικά τις εικόνες κατόπιν αιτήματος και θα τις αποθηκεύσει σε μια τοπική κρυφή μνήμη. Στη συνέχεια, η βελτιστοποιημένη εικόνα εμφανίζεται για επόμενα αιτήματα έως ότου ολοκληρωθεί η λήξη.
Το Next.js μπορεί επίσης να δημιουργήσει πολλές εκδόσεις της εικόνας για την προβολή πολυμέσων σε μικρότερες οθόνες στο σωστό μέγεθος. Κατά τη φόρτωση της σελίδας με προσομοίωση κινητού (τηλέφωνο Pixel), μια ακόμη μικρότερη εικόνα 16 KB εμφανίζεται για την πρώτη μας εικόνα.
Όταν ένας χρήστης κάνει κύλιση προς τα κάτω στη σελίδα, οι πρόσθετες εικόνες φορτώνονται αργά. Σημειώστε ότι δεν χρειαζόταν καμία πρόσθετη διαμόρφωση ή προσαρμογή εδώ — το στοιχείο έκανε το σωστό από προεπιλογή.
Οι βελτιστοποιήσεις απόδοσης που προσφέρονται από το στοιχείο εικόνας Next.js μπορούν να βοηθήσουν στη βελτίωση της μεγαλύτερης περιεκτικότητας ζωγραφικής. Για να μάθετε περισσότερα σχετικά με το στοιχείο, συμπεριλαμβανομένων των διαφορετικών λειτουργιών διάταξης που υποστηρίζει, ανατρέξτε στο Τεκμηρίωση Next.js. Ένα εξάρτημα με παρόμοιες δυνατότητες είναι διαθέσιμο για Nuxt.js.
Ποια είναι τα παραδείγματα επιχειρήσεων που βελτιώνουν το LCP μέσω βελτιστοποιήσεων εικόνας;
vodafone Βρέθηκαν ότι μια βελτίωση κατά 31% στο LCP αύξησε τις πωλήσεις κατά 8%. Οι βελτιστοποιήσεις τους για τη βελτίωση του LCP περιελάμβαναν την αλλαγή μεγέθους της εικόνας του ήρωα, τη βελτιστοποίηση των SVG και τη χρήση ερωτημάτων μέσων για τον περιορισμό της φόρτωσης εικόνων εκτός οθόνης.
Αγροφί Βρέθηκαν ότι η βελτίωση κατά 70% στο LCP συσχετίστηκε με μια μείωση κατά 76% στην εγκατάλειψη φορτίου. Οι βελτιστοποιήσεις τους στο LCP περιελάμβαναν α Εξοικονόμηση 2.5 δευτερολέπτων από την αλλαγή της πρώτης μεγάλης εικόνας τους από το να βρίσκονται πίσω από JavaScript (ενυδάτωση από την πλευρά του πελάτη) στο να βρίσκονται απευθείας στο κύριο έγγραφο HTML.
Γαλλικός οίκος μόδας Chloè χρησιμοποίησαν το Link Preload για να προφορτώσουν τις 1x και 2x εικόνες Hero τους, οι οποίες προηγουμένως περιορίζονταν από ένα σενάριο αποκλεισμού απόδοσης. Αυτό βελτίωσε τη μεγαλύτερη περιεχόμενη ζωγραφική τους κατά 500 ms με βάση τα δεδομένα Αναφοράς Chrome UX σε διάστημα 28 ημερών.
Οι βελτιστοποιήσεις στη αθροιστική αλλαγή διάταξης βοήθησαν το YAHOO! Η Ιαπωνία αύξησε τις προβολές της σελίδας Ειδήσεις ανά περίοδο σύνδεσης κατά 15%. Προσδιόρισαν ότι οι αλλαγές προκλήθηκαν μετά τη φόρτωση των εικόνων των ηρώων τους και τη λήψη τους για την πρώτη προβολή. Χρησιμοποίησαν Κουτιά αναλογίας διαστάσεων να κρατήσουν χώρο πριν φορτωθεί η εικόνα τους.
Τα δεδομένα εργαστηρίου είναι μόνο μέρος του παζλ. Χρειάζεστε επίσης δεδομένα πεδίου.
Πριν ξεκινήσουμε, θα ήθελα να μοιραστώ μια γρήγορη υπενθύμιση σχετικά με τη σημασία της εξέτασης της εμπειρίας εικόνας που μπορεί να έχουν οι πραγματικοί σας χρήστες. Εργαστηριακά εργαλεία όπως το Lighthouse μετρούν την απόδοση σε ένα συνθετικό περιβάλλον (προσομοίωση κινητού) που περιορίζεται στη φόρτωση σελίδας, ενώ σε πεδίο ή δεδομένα πραγματικού κόσμου (π.χ. RUM, Αναφορά Chrome UX) βασίζονται σε πραγματικούς χρήστες καθ' όλη τη διάρκεια ζωής της σελίδας.
Είναι σημαντικό να ελέγξτε πόσο ρεαλιστικά είναι τα αποτελέσματα του εργαστηρίου σας συγκρίνοντάς τα με τυπικούς χρήστες στο πεδίο. Για παράδειγμα, εάν το εργαστηριακό σας CLS είναι πολύ χαμηλότερο από το 75ο εκατοστημόριο CLS στο πεδίο, ενδέχεται να μην μετράτε τις αλλαγές διάταξης καθώς τις αντιμετωπίζουν οι πραγματικοί χρήστες.
Το CLS μετράται κατά τη διάρκεια του πλήρης διάρκεια ζωής μιας σελίδας, επομένως η συμπεριφορά του χρήστη (αλληλεπιδράσεις, κύλιση, κλικ) μπορεί να έχει αντίκτυπο στα στοιχεία που αλλάζουν. Για τις εικόνες, το εργαστήριο CLS ενδέχεται να μην έχει βελτίωση από τη διόρθωση των διαστάσεων της εικόνας που λείπουν, εάν οι εικόνες τυχαίνει να βρίσκονται πολύ κάτω από τη σελίδα που απαιτεί κύλιση. Αυτό είναι μόνο ένα μέρος όπου αξίζει τον κόπο να συμβουλευτείτε δεδομένα πραγματικών χρηστών.
Για το LCP είναι πολύ πιθανό ότι το Το υποψήφιο στοιχείο μπορεί να αλλάξει ανάλογα με παράγοντες όπως οι χρόνοι φόρτωσης (ο υποψήφιος LCP θα μπορούσε αρχικά να είναι μια παράγραφος κειμένου και στη συνέχεια μια μεγάλη εικόνα ήρωα), εξατομίκευση ή ακόμα και διαφορετικές αναλύσεις οθόνης. Ο έλεγχος LCP του Lighthouse είναι ένα καλό μέρος για να ξεκινήσετε, αλλά ρίξτε μια ματιά στο τι βλέπουν οι πραγματικοί χρήστες για να έχετε την πλήρη εικόνα.
Όποτε είναι δυνατόν, προσπαθήστε διαμορφώστε τις εργαστηριακές δοκιμές σας να αντικατοπτρίζει την πρόσβαση και τα πρότυπα συμπεριφοράς πραγματικών χρηστών. Ο Philip Walton έχει έναν εξαιρετικό οδηγό εντοπισμός σφαλμάτων Web Vitals στο πεδίο αξίζει να ελέγξετε για περισσότερες λεπτομέρειες.
Εκδοτική σημείωση: Addy's Book on Image Optimization
Είμαστε χαρούμενοι και τιμή μας που συνεργαστήκαμε με την Addy για να δημοσιεύσουμε ένα αφιερωμένο βιβλίο για τη βελτιστοποίηση εικόνας, και το βιβλίο είναι τώρα επιτέλους εδώ. Με σύγχρονες προσεγγίσεις για τη συμπίεση και την παράδοση εικόνας, τις τρέχουσες και τις αναδυόμενες μορφές εικόνας, τον τρόπο φόρτωσης, αποκωδικοποίησης και απόδοσης εικόνων από τα προγράμματα περιήγησης, CDN, καθυστερημένη φόρτωση, προσαρμοστική φόρτωση μέσων και τρόπο βελτιστοποίησης για τα Core Web Vitals. Όλα σε ένα, μοναδικό βιβλίο 528 σελίδων. Κατεβάστε ένα δωρεάν δείγμα PDF (12MB).
Εκτύπωση + eBook
$
40. 00
$
44. 00
Ποιοτικό σκληρό εξώφυλλο. Δωρεάν παγκόσμια ναυτιλία, από τα τέλη Μαΐου. 100 ημέρες εγγύηση επιστροφής χρημάτων.
Πάρτε το βιβλίο αμέσως — και σας ευχαριστώ για την υποστήριξή σας, όλους! ❤️
Τώρα που καλύψαμε τα θεμέλια του σύγχρονου <img>
tag, ρίξτε μια ματιά στο προέκδοση του βιβλίου Image Optimization για να κατανοήσετε βαθύτερα πώς οι εικόνες μπορούν να επηρεάσουν την απόδοση και το UX.
Σε όλο το βιβλίο, θα καλύψουμε προηγμένες τεχνικές βελτιστοποίησης εικόνας που επεκτείνονται σε μεγάλο βαθμό στις παραπάνω οδηγίες, καθώς και πώς να χρησιμοποιήσετε καλύτερα στοιχεία όπως <img>
και <picture>
για να κάνετε τις εικόνες σας να λάμπουν στο διαδίκτυο.
Μπορεί επίσης να σας ενδιαφέρει να διαβάσετε τον οδηγό του Malte Ubl για βελτιστοποίηση εικόνας, ο οδηγός του Jake Archibald για το Μορφή AVIF και της Katie Hempenius έξοχος καθοδήγηση στο web.dev.
Ευχαριστώ τους Yoav Weiss, Rick Viscomi και Vitaly για τις κριτικές τους.
(vf, yk, il)
Πηγή: https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
- "
- 100
- 11
- 2021
- 7
- Εγκατάλειψη
- Απόλυτος
- πρόσβαση
- Λογαριασμός
- Πρόσθετος
- Akamai
- Όλα
- Επιτρέποντας
- ανάλυση
- app
- γύρω
- Τέχνη
- άρθρο
- Ενεργητικό
- έλεγχος
- Πιστοποίηση
- αυτόματη
- Αυτοματοποιημένη
- ΚΑΛΎΤΕΡΟΣ
- βέλτιστες πρακτικές
- Μπλοκ
- πρόγραμμα περιήγησης
- χτίζω
- επιχειρήσεις
- ο οποίος
- περιπτώσεις
- πάλη
- Αιτία
- προκαλούνται
- αλλαγή
- έλεγχος
- Chrome
- κωδικός
- Κοινός
- συστατικό
- Διασυνδέσεις
- συμβουλευτικές
- Δοχείο
- Περιορισμός
- περιεχόμενο
- Ρεύμα
- ημερομηνία
- delay
- παράδοση
- διανομή
- Dev
- προγραμματιστές
- Συσκευές
- DID
- ανακάλυψαν
- απόσταση
- οδήγηση
- Νωρίς
- Σύνταξης
- Αποτελεσματικός
- Μηχανική
- Περιβάλλον
- Ανάπτυξη
- Δραστηριοτητες
- πείραμα
- εξαγωγή
- μάτι
- Μόδα
- FAST
- πιστότητα
- Τελικά
- Όνομα
- ταιριάζουν
- φλας
- μορφή
- Πλαίσιο
- Δωρεάν
- πλήρη
- λειτουργία
- gif
- GitHub
- καλός
- Αναζήτηση Google
- εξαιρετική
- Πράσινο
- καθοδηγήσει
- Χειρισμός
- υλικού
- κεφάλι
- εδώ
- Ψηλά
- Επισημάνετε
- Σπίτι
- Πως
- Πώς να
- HTTPS
- τεράστιος
- ιδέα
- προσδιορίσει
- εικόνα
- ανάλυση εικόνας
- Επίπτωση
- Συμπεριλαμβανομένου
- πληροφορίες
- Πρωτοβουλία
- θέματα
- IT
- Ιαπωνία
- το JavaScript
- Κλειδί
- large
- αργότερο
- που οδηγεί
- ΜΑΘΑΊΝΩ
- Περιωρισμένος
- LINK
- Λίστες
- φορτίο
- τοπικός
- Μακριά
- αγάπη
- MacOS
- Ταίριασμα
- Θέματα
- μέτρο
- Εικόνες / Βίντεο
- medium
- Metrics
- Κινητό
- κινητή συσκευή
- κινητές συσκευές
- μετακινήσετε
- Mozilla
- δίκτυο
- νέα
- προσφορά
- προσφορές
- ανοίξτε
- λειτουργίας
- Επιλογές
- τάξη
- ΑΛΛΑ
- χρώμα
- επίδοση
- εξατομίκευση
- εικόνα
- Εικονοκύτταρο
- Αφθονία
- παρόν
- Προβολή
- παραγωγή
- περιουσία
- δημόσιο
- δημοσιεύει
- παζλ
- ποιότητα
- Αντίδραση
- Αναγνώστης
- Ανάγνωση
- μείωση
- αναφέρουν
- πόρος
- Υποστηρικτικό υλικό
- ΠΕΡΙΦΕΡΕΙΑ
- Αποτελέσματα
- Retina
- Κριτικές
- τρέξιμο
- Safari
- εμπορικός
- Κλίμακα
- Οθόνη
- Αναζήτηση
- αίσθηση
- εξυπηρετούν
- σειρά
- τον καθορισμό
- Κοινοποίηση
- αλλαγή
- λάμψη
- Απλούς
- Sites
- Μέγεθος
- small
- Θραύση
- So
- Λύσεις
- SOLVE
- Χώρος
- ταχύτητα
- Spot
- Εκκίνηση
- ξεκίνησε
- κατάστημα
- ιστορίες
- προμήθεια
- υποστήριξη
- υποστηριζόνται!
- Υποστηρίζει
- γλυκός
- Πατήστε
- δοκιμή
- Η Πηγη
- Σκέψη
- ώρα
- συμβουλές
- Τουίτερ
- Unsplash
- Ενημέρωση
- us
- Χρήστες
- ux
- αξία
- Βίντεο
- Δες
- ορατότητα
- περιμένετε
- ιστός
- εντός
- Εργασία
- λειτουργεί
- παγκόσμιος
- αξία
- γραφή
- χρόνια