Lazy Φόρτωση εικόνων: Πλήρης οδηγός συν 3 τρόποι για την εφαρμογή του

Lazy Φόρτωση εικόνων: Πλήρης οδηγός συν 3 τρόποι για την εφαρμογή του

Lazy Φόρτωση εικόνων: Πλήρης οδηγός συν 3 τρόποι για την εφαρμογή του
СОДЕРЖАНИЕ
02 июня 2020

Lazy Φόρτωση εικόνων: Πλήρης οδηγός


Καθώς η λειτουργικότητα και η διαδραστικότητα αυξάνονται στον Ιστό, έχει σημειωθεί σταθερή αύξηση του μεγέθους της ιστοσελίδας τα τελευταία χρόνια. Από τις αρχές του 2018, το μέσο μέγεθος σελίδας στο Διαδίκτυο ήταν πάνω από 2 MB! Πώς να το πολεμήσετε; Λίγο κάτι που ονομάζεται τεμπέλης φόρτωση εικόνων είναι μία από τις καλύτερες λύσεις.

Σε αυτόν τον οδηγό, περνάμε όλες τις περιπλοκές των τεμπέλης φόρτωσης εικόνων, και μιλήστε για τρεις διαφορετικούς τρόπους εφαρμογής του.

Ας ξεκινήσουμε με τον πίνακα περιεχομένων των επόμενων:

  • Γιατί η τεμπέλη φόρτωση έχει σημασία?
  • Τι είναι ο τεμπέλης φόρτωση?
  • Οφέλη της τεμπέλης φόρτωσης
  • Τι πρέπει να λάβετε υπόψη όταν τεμπέλης φόρτωση εικόνων
  • Επιλογή 1: Εφαρμόστε τεμπέλης φόρτωση από το μηδέν (φιλικός για αρχάριους: ⭐ / 5)
  • Επιλογή 2: Χρησιμοποιήστε μια προσθήκη JavaScript (φιλικός για αρχάριους: ⭐⭐ / 5)
  • Επιλογή 3: Χρησιμοποιήστε μια προσθήκη WordPress (φιλικός για αρχάριους: ⭐⭐⭐⭐⭐ / 5)
  • συμπέρασμα

Γιατί η τεμπέλη φόρτωση έχει σημασία?

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

Χωρίς καμία βελτιστοποίηση, το πρόγραμμα περιήγησης ιστού του χρήστη κατεβάζει όλους τους πόρους προτού αποδώσει πλήρως μια σελίδα. Αυτό οδηγεί σε αυξημένους χρόνους φόρτωσης, που μπορούν να τραβήξουν τους ανθρώπους μακριά. Το WooCommerce εκτιμάται ότι για κάθε 100ms βελτίωσης ταχύτητας σελίδας, ένας ιστότοπος ηλεκτρονικού εμπορίου μπορεί να αυξήσει τα έσοδα κατά 1%.

Σε ένα τέτοιο σενάριο, το να κάνεις ό, τι χρειάζεται για να βελτιστοποιήσεις τους χρόνους φόρτωσης έχει πολύ νόημα. Και δεδομένου ότι οι εικόνες είναι ο κύριος συντελεστής στο μέγεθος της ιστοσελίδας, ξεκινώντας από αυτές είναι μια καλή ιδέα. Αυτό είναι όπου η τεμπέλης φόρτωση μπαίνει στο παιχνίδι.

Τι είναι ο τεμπέλης φόρτωση?

Για να καταλάβετε πώς λειτουργεί η τεμπέλη φόρτωση, ακολουθεί ένα γρήγορο κινούμενο GIF που δείχνει πώς αποδίδονται οι εικόνες στο CodeinWP.

Επίδειξη Lazy Loading ImagesΕπίδειξη τεμπέλης φόρτωσης στο CodeinWP

Όταν φορτώνεται η σελίδα, όλες οι εικόνες δεν λαμβάνονται αμέσως. Όταν κάνετε κύλιση προς τα κάτω σε μια εικόνα, θα δείτε πρώτα μια θολή έκδοση της και η πραγματική εικόνα αρχίζει να φορτώνεται στο παρασκήνιο. Αυτή η θολή εικόνα είναι μια έκδοση χαμηλής ευκρίνειας της τελικής εικόνας, σε κλάσμα του μεγέθους. Αυτό το φαινόμενο της αναβολής της λήψης και της απόδοσης της εικόνας έως ότου ο χρήστης μετακινηθεί πάνω του είναι ακριβώς αυτό που ονομάζεται τεμπέλης φόρτωση.

Παρόλο "τεμπέλης" γενικά συνδέεται αρνητικά, η αργή φόρτωση είναι στην πραγματικότητα μια καλή πρακτική και οδηγεί σε μείωση των χρόνων φόρτωσης σελίδας βελτιστοποιώντας τον ιστότοπό σας συνολικά.

Σημείωση. Σε αυτήν την ανάρτηση, εξετάζουμε τη διαδικασία τεμπέλης φόρτωσης εικόνων, αλλά η τεμπέλης φόρτωση δεν περιορίζεται μόνο σε εικόνες – μπορείτε να χρησιμοποιήσετε την ίδια ιδέα κατά την απόδοση οποιουδήποτε άλλου πόρου, όπως βίντεο, των σχολίων (υπάρχει μια ολόκληρη ενότητα για το πώς να το κάνετε αυτό) σε αυτήν την ανάρτηση), ακόμη και γραμματοσειρές.

Οφέλη της τεμπέλης φόρτωσης

Καθώς ο χρόνος φόρτωσης μιας ιστοσελίδας είναι σημαντικός παράγοντας για την εγκατάλειψη, η τεμπέλης φόρτωση εικόνων μπορεί να οδηγήσει σημαντικά σε αύξηση των χρηστών που παραμένουν στη σελίδα έως ότου φορτωθεί, γεγονός που θα μπορούσε τελικά να οδηγήσει σε υψηλότερες πωλήσεις ή μετατροπές.

Το άλλο σημαντικό όφελος της τεμπέλης φόρτωσης εικόνων είναι η μείωση των λογαριασμών του διακομιστή. Προβάλλετε μόνο εκείνες τις εικόνες στις οποίες μετακινείται ο θεατής και αποθηκεύετε το εύρος ζώνης για τμήματα της σελίδας που δεν προβλήθηκαν. Καθώς οι εικόνες αποτελούν κυρίαρχο μέρος του βάρους της σελίδας, αυτό θα μπορούσε να οδηγήσει σε δυνητικά χαμηλότερο κόστος διακομιστή.

Η φόρτωση όλων των εικόνων εκ των προτέρων είναι δυνητικά επιβλαβής και για τους αναγνώστες σας. Εάν ο χρήστης χρησιμοποιεί απεριόριστο πρόγραμμα δεδομένων για τον Ιστό, μάλλον δεν θα έχει σημασία. Ωστόσο, σε προγράμματα με περιορισμένα δεδομένα, αποθηκεύετε τα δεδομένα του θεατή σας με τεμπέλης φόρτωση εικόνων.

Τι πρέπει να λάβετε υπόψη όταν τεμπέλης φορτώνετε εικόνες

Τώρα που έχετε αποφασίσει να εφαρμόσετε τη σωστή φόρτωση στον ιστότοπό σας με τον σωστό τρόπο, ας εξετάσουμε μερικές βασικές σκέψεις για το πώς να το ολοκληρώσετε.

Προσδιορίστε τις εικόνες που θέλετε να φορτώσετε αργά

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

Μόνο οι εικόνες που είναι εκτός οθόνης και δεν συνεισφέρουν στη δομή της σελίδας θα πρέπει να λαμβάνονται υπόψη για καθυστερημένη φόρτωση. Συνήθως, αυτές είναι εικόνες στο  στοιχεία που εμφανίζονται στο κύριο μέρος της σελίδας.

Διαλέξτε τα σύμβολα κράτησης θέσης της εικόνας

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

Υπάρχουν δύο οδηγίες που συνήθως λαμβάνουν οι προγραμματιστές ως προς αυτό:

  • Χρησιμοποιήστε το κυρίαρχο χρώμα της εικόνας ως φόντο
  • Χρησιμοποιήστε μια έκδοση χαμηλής ποιότητας της εικόνας

placeholder χαμηλής ανάλυσηςΈνα παράδειγμα εκδόσεων εικόνων χαμηλής ποιότητας ως placeholder για οκνηρή φόρτωση

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

Παρόλο που μία τεχνική είναι η φόρτωση εικόνων μόλις εισέλθουν στη θύρα προβολής, ίσως θελήσετε να σκεφτείτε να προσθέσετε χρόνο προσωρινής αποθήκευσης προτού συμβεί – έτσι ώστε ο χρήστης να μην βλέπει ποτέ το placeholder.

Προσοχή στην αλλαγή της δομής της σελίδας κατά τη φόρτωση εικόνων

Πριν από τη φόρτωση μιας εικόνας, ενδέχεται να εμφανίζεται χρησιμοποιώντας διαστάσεις 0 px. Αυτό δεν είναι ιδανικό για τη διατήρηση της δομής του σχεδιασμού σας.

Αυτό μπορεί εύκολα να αλλάξει τη διάταξη της σελίδας και τη θέση του κειμένου. Μια απλή λύση είναι να προσθέσετε αμέσως τις σωστές διαστάσεις στην εικόνα – αυτό διασφαλίζει ότι το μέγεθος του στοιχείου εικόνας παραμένει το ίδιο μετά τη φόρτωση.

Με τις παραπάνω εκτιμήσεις, ας δούμε τώρα πώς μπορούμε πραγματικά να εφαρμόσουμε τεμπέλης φόρτωση σε έναν ιστότοπο WordPress.

Επιλογή 1: Εφαρμόστε τεμπέλης φόρτωση από το μηδέν

Ας δούμε πρώτα πώς να το κάνουμε αυτό χωρίς να χρησιμοποιήσουμε πρόσθετα. Αυτή η επιλογή συνιστάται για όσους από εσάς είστε άνετοι με το JavaScript. Στην ιδανική περίπτωση, πρέπει να ληφθούν τα ακόλουθα βήματα:

  1. Αποτροπή φόρτωσης εικόνας κατά τη φόρτωση σελίδας: Όταν καθορίζετε τη διεύθυνση URL ή τη διαδρομή της εικόνας στο χαρακτηριστικό src του  ετικέτα, η εικόνα θα ληφθεί από το πρόγραμμα περιήγησης κατά τη φόρτωση της σελίδας. Για να αποτρέψετε τη λήψη της εικόνας από το πρόγραμμα περιήγησης, πρέπει να καθορίσετε τη θέση της εικόνας στο χαρακτηριστικό data-src του  αντ ‘αυτού.
  2. Καταχωρίστε λειτουργίες χειριστή συμβάντων σε JavaScript για να ελέγξετε στοιχεία σε δύο συμβάντα: φόρτωση και κύλιση.
  3. Όταν ένα στοιχείο εισέρχεται στη θύρα προβολής, φορτώστε την τιμή του στοιχείου data-src στο στοιχείο src, το οποίο ενεργοποιεί το πρόγραμμα περιήγησης να φορτώσει την εικόνα.

Μια απλή εφαρμογή αυτής της διαδικασίας έχει εξηγηθεί από Ρόμπιν Όσμπορν και το demo είναι διαθέσιμο στο CodePen.

Επιλογή 1.1: Χρησιμοποιήστε το API παρατηρητή διασταύρωσης

Το API παρατηρητή διασταύρωσης βοηθά στον εντοπισμό στοιχείων DOM που βρίσκονται στη θύρα προβολής ανά πάσα στιγμή. Αυτός είναι ένας καθαρότερος τρόπος εφαρμογής τεμπέλης φορτίου χωρίς να γράφετε λειτουργίες χειριστή συμβάντων. Ο αριθμός γραμμών κώδικα για την εφαρμογή τεμπέλης φορτίου μειώνεται επίσης πολύ. Ωστόσο, η συμβατότητα του προγράμματος περιήγησης παραμένει πρόβλημα.

Το Ιστολόγιο Google Developers εξηγεί την εφαρμογή του διασταυρωτικού παρατηρητή API μέσω αυτό το demo CodePen.

Επιλογή 2: Χρησιμοποιήστε μια προσθήκη JavaScript

Οι δύο επιλογές που συζητήθηκαν παραπάνω χρειάζονται γνώση ενδιάμεσου επιπέδου για το JavaScript. Εάν αναζητάτε μια ευκολότερη εφαρμογή της τεμπέλης φόρτωσης χωρίς να χρησιμοποιήσετε ένα βαρύ πρόσθετο που βάζει φορτίο στο διακομιστή, μπορείτε να δοκιμάσετε την απλή προσθήκη JavaScript, bLazy.

ο bLazy βιβλιοθήκη σε μέγεθος μικρότερο από 2 KB δεν προσθέτει επιπλέον φορτίο στο ωφέλιμο φορτίο, ενώ σας επιτρέπει να χειρίζεστε εύκολα τεμπέλης φόρτωση εικόνων.

Για να χρησιμοποιήσετε τη βιβλιοθήκη bLazy, πρέπει να αρχικοποιήσετε  στοιχεία με τα ακόλουθα χαρακτηριστικά:

  • class: ορίστε την τάξη όλων  ετικέτες στο b-lazy
  • src: σύνδεσμος προς την εικόνα κράτησης θέσης
  • data-src: σύνδεσμος προς την εικόνα για φόρτωση
  • data-src-small: σύνδεσμος προς την εικόνα για φόρτωση σε οθόνες πλάτους μικρότερης των 420 pixel

Πρέπει να αρχικοποιήσετε τη βιβλιοθήκη bLazy σε λίγες γραμμές κώδικα και όλες οι εικόνες σας θα αποδίδονται μέσω της τεμπέλης φόρτωσης.

;(λειτουργία() {
// Αρχικοποίηση
var bLazy = νέο Blazy ();
}) ();

Μια επίδειξη CodePen είναι διαθέσιμη εδώ.

Επιλογή 3: Χρησιμοποιήστε μια προσθήκη WordPress

Υπάρχουν μερικές επιλογές εκεί έξω που μπορούν να σας δώσουν τεμπέλης φόρτωση. Κυρίως:

Όλες αυτές οι προσθήκες θα χειρίζονται αυτόματα την τεμπέλης φόρτωση για εσάς. Όλα διαθέτουν επίσης μερικά ωραία χαρακτηριστικά.

Για παράδειγμα, το Lazy Load by WP Rocket φορτώνει επίσης βίντεο στο YouTube και τα αντικαθιστά με μια μικρογραφία.

Το Optimole, εκτός από το ότι είναι η νεότερη προσθήκη στην οικογένεια ThemeIsle, σας προσφέρει επίσης βελτιστοποίηση εικόνας σταθερής εικόνας (όπως δοκιμάστηκε εδώ) με αρκετά προηγμένα χαρακτηριστικά από αυτή την άποψη. Για παράδειγμα, σας δίνει δυναμική αλλαγή μεγέθους με βάση το μέγεθος της οθόνης του χρήστη.


Βελτιστοποίηση εικόνας & Lazy Load από το Optimole Βελτιστοποίηση εικόνας & Lazy Load από το Optimole

Συγγραφέας: Optimole

Τρέχουσα έκδοση: 2.3.1

Τελευταία ενημέρωση: 21 Απριλίου 2020

optimole-wp.zip


96% βαθμολογίες


50.000 + Εγκαταστάσεις


Απαιτείται WP 4.7 +

Όπως και με τις περισσότερες προσθήκες, για να χαλαρώσετε τη φόρτωση, απλώς εγκαταστήστε την προσθήκη και ενεργοποιήστε τη λειτουργία στον πίνακα ελέγχου της προσθήκης:

Optimole για Lazy Φόρτωση εικόνων

συμπέρασμα

Αυτή η ανάρτηση διερεύνησε την ανάγκη και τα οφέλη της τεμπέλης φόρτωσης εικόνων. Συζητήσαμε επίσης τρεις διαφορετικούς τρόπους εφαρμογής της τεμπέλης φόρτωσης σε έναν ιστότοπο WordPress:

  • Εάν έχετε ενδιάμεση επάρκεια στο JavaScript, μπορείτε να εφαρμόσετε τεμπέλης φόρτωση από το μηδέν
  • Εάν γνωρίζετε κάποιο προγραμματισμό αλλά δεν θέλετε πρόσθετα, μια ελαφριά βιβλιοθήκη JavaScript, το bLazy είναι μια επιλογή
  • Εάν θέλετε μια λύση με ένα κλικ για τεμπέλης φόρτωση εικόνων στον ιστότοπό σας, θα πρέπει να αναζητήσετε μια προσθήκη όπως το Optimole

Τι πιστεύετε για τεμπέλης φόρτωση; Έχετε δοκιμάσει να το χρησιμοποιήσετε για να βελτιώσετε την απόδοση του ιστότοπού σας?

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector