Οι καλύτερες προσθήκες Lazy Load για το WordPres

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


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

Αποποίηση ευθυνών: Το WPExplorer είναι συνεργάτης για ένα ή περισσότερα προϊόντα που αναφέρονται παρακάτω. Εάν κάνετε κλικ σε έναν σύνδεσμο και ολοκληρώσετε μια αγορά, θα μπορούσαμε να κάνουμε προμήθεια.

Πώς μπορούμε να κάνουμε γρηγορότερη φόρτωση σελίδων με εικόνα?

Γιατί οι εικόνες χρειάζονται χρόνο για φόρτωση; Λοιπόν, μπορούμε να το εξηγήσουμε έτσι – μια ιστοσελίδα αποτελείται από πολλά στοιχεία – κείμενο, εικόνες, μέσα, σενάριο και άλλα. Για να φορτώσει κάθε στοιχείο, το πρόγραμμα περιήγησής σας υποβάλλει ένα αίτημα στον ιστότοπο (που ονομάζεται αίτημα HTTP). Πολλά από τα στοιχεία, ειδικά οι εικόνες, είναι κατά βάρος byte και χρειάζονται χρόνο για φόρτωση. Κανονικά όλα τα στοιχεία προσπαθούν να φορτώσουν ταυτόχρονα και αυτό καθυστερεί τη φόρτωση ολόκληρης της ιστοσελίδας.

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

Τι είναι το Lazy Loading?

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

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

Πώς μπορεί να βοηθήσει το Lazy Loading

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

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

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

BJ Lazy Load

Για να αντικαταστήσετε όλες ή οποιαδήποτε από τις εικόνες της ανάρτησής σας, τις μικρογραφίες ανάρτησης, τις εικόνες gravatar και τα iframe περιεχομένου με ένα σύμβολο κράτησης θέσης, χρησιμοποιήστε το BJ Lazy Load. Μπορεί να αντικαταστήσει και τα iframe, και αυτό σημαίνει ότι μπορείτε να φορτώσετε τεκμηριωμένα ενσωματωμένα βίντεο από το YouTube και το Vimeo. Λειτουργεί επίσης για γραφικά widget. Χρησιμοποιώντας ένα απλό φίλτρο, οι εικόνες και τα iframe στο θέμα σας μπορεί να καθυστερήσουν.

bj-lazy-load

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

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

Οκνηρό φορτίο

Ένα συνήθως χρησιμοποιούμενο πρόσθετο για την προσθήκη τεμπέλης φόρτωσης σε ιστότοπους WordPress, Οκνηρό φορτίο είναι μια απλή εγκατάσταση και ενεργοποίηση plugin. Μπορείτε να το δοκιμάσετε με αυτοπεποίθηση, γνωρίζοντας ότι έχει αναπτυχθεί χρησιμοποιώντας ένα μείγμα κώδικα από την ομάδα VIP του WordPress.com στο Automattic, την ομάδα επανασχεδιασμού TechCrunch 2011 και τον Jake Goldman (10up LLC).

τεμπέλης

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

Ajax Load More – Άπειρη κύλιση

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

ajax-load-περισσότερο

Επιπλέον, μπορείτε να χρησιμοποιήσετε το Shortcode Builder για να πλαισιώσετε προσαρμοσμένα ερωτήματα WordPress. Προσθέστε τον σύντομο κώδικα που δημιουργείται στις σελίδες που επιλέγετε μέσω του προγράμματος επεξεργασίας περιεχομένου ή απευθείας σε αρχεία προτύπων. Προβάλετε τη σελίδα από το μπροστινό μέρος και ελέγξτε το Ajax Load More φορτώνοντας το περιεχόμενο ακόμα και όταν κάνετε κύλιση προς τα κάτω.

Επιπλέον, το Ajax Load More λειτουργεί καλά με το WooCommerce και Easy Digital Downloads, οπότε είναι κατάλληλο για μεγάλες σελίδες προϊόντων.

Lazy Load για βίντεο

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

τεμπέλης-για-βίντεο

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

a3 Lazy Load

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

a3-τεμπέλης-φορτίο

Η προσθήκη προσφέρει υποστήριξη για περιεχόμενο σε iframes που τοποθετούνται οπουδήποτε στο περιεχόμενο ή τα widget. Ενσωματωμένα μέσα WordPress, πλαίσια Like στο Facebook με προφίλ, κουμπιά Like, κουμπιά προτεινόμενων, προφίλ Google+, χάρτες Google και άλλο παρόμοιο περιεχόμενο πολυμέσων μπορούν να επιλεγούν για τεμπέλης φόρτωση.

Επιπλέον, δεν υπάρχει σύγκρουση με το Accelerated Mobile Pages (AMP) – το τεμπέλης φορτίο δεν εφαρμόζεται στο /αμπέραζ τελικό σημείο Μόνο όταν το πρόγραμμα περιήγησης διαθέτει URL χωρίς /αμπέραζ αυτό το τεμπέλης φορτίο μπαίνει στο παιχνίδι.

WP YouTube Lyte

Εάν ο ιστότοπός σας βασίζεται σε μεγάλο βαθμό στο YouTube, WP YouTube Lyte μπορεί να σας ωφελήσει πολύ. Εισάγει “Lite YouTube Embeds” που μοιάζουν με τις ενσωματώσεις του YouTube. Αλλά τα βίντεο ζητούνται μόνο όταν κάνετε κλικ σε αυτό.

wp-youtube-lyte

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

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

Φόρτωση σελίδας με οθόνη φόρτωσης

Με Φόρτωση σελίδας με οθόνη φόρτωσης, Οι χρήστες μπορούν να έχουν μια ιδέα του χρόνου αναμονής πριν από τη φόρτωση της σελίδας. Η προσθήκη εμφανίζει μια οθόνη που δείχνει την πρόοδο φόρτωσης ως ποσοστό ολοκλήρωσης.

φόρτωση-σελίδα-με-φόρτωση-οθόνη

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

Μερικά περισσότερα πρόσθετα,

  • Το Load More είναι ένα χρήσιμο χαρακτηριστικό σε μεγάλες σελίδες προϊόντων. Αυτά βρίσκονται συνήθως στους ιστότοπους του WooCommerce. WooCommerce Infinite Scroll και Ajax Pagination μετατρέπει την προεπιλεγμένη σελιδοποίηση προϊόντων σε απεριόριστη κύλιση ή σελιδοποίηση Ajax. Για τον χρήστη, αυτό σημαίνει ότι δεν χρειάζεται να κάνουν επανειλημμένα κλικ στην «Επόμενη σελίδα». Όταν ένας χρήστης φτάσει στο κάτω μέρος της σελίδας, το επόμενο σύνολο προϊόντων ανακτάται και φορτώνεται αυτόματα. Διατίθενται διαφορετικές επιλογές σελιδοποίησης για φορητές συσκευές.
  •  Φόρτωση περισσότερων προϊόντων για το WooCommerce μπορεί να προστεθεί για να φορτώσει περισσότερα προϊόντα από την επόμενη σελίδα χρησιμοποιώντας το Ajax με απεριόριστη κύλιση ή ένα κουμπί Load More. Για εφέ κίνησης και προσαρμογή, μια επαγγελματική έκδοση είναι διαθέσιμο.
  • Εικόνες Lazyload και παρουσίαση διαφανειών – Με αυτό το πρόσθετο, μπορείτε να επιλέξετε να προσθέσετε ένα εφέ lightbox ή ένα προσαρμοσμένο εφέ γκαλερί σε οποιαδήποτε εικόνα, καθώς και καθυστέρηση φόρτωσης. Έρχεται με 3 εφέ και μπορείτε να προσθέσετε και τα δικά σας.
  • Rocket Lazy Load – Είναι εξαιρετικά ελαφρύ (λιγότερο από 2kb). Εισάγει ένα μικρό Javascript στην κεφαλίδα του ιστότοπού σας που λειτουργεί σε μικρογραφίες, όλες τις εικόνες σε μια ανάρτηση, σε ένα κείμενο widget ή avatar. Καθυστερεί τις εικόνες σε ολόκληρο τον ιστότοπο χωρίς τη χρήση βιβλιοθήκης JavaScript όπως το jQuery.
  • Crazy Lazy – Κάνει την ίδια δουλειά ενώ είναι ελαφρύ, εύκολο στην εγκατάσταση και χρήση και δεν χρειάζεται ρύθμιση. Οποιαδήποτε εικόνα μπορεί να αποκλειστεί προσθέτοντας απλώς ένα χαρακτηριστικό στην εικόνα.
  • Lazy Load XT – Είναι μια γρήγορη προσθήκη που λειτουργεί για εικόνες, καρέ, βίντεο YouTube και Vimeo. Είναι πλήρως προσαρμόσιμο.

Πολλοί ολισθητές αρέσουν Βασιλικό ρυθμιστικό και Ηλεκτρικό καρουσέλ WP ενσωματώνουν επίσης την αρχή του τεμπέλης φόρτωσης για να φορτώνουν εικόνες. Event Booking Pro υποστηρίζει ένα τεμπέλης ημερολόγιο φόρτωσης.

Συμπερασματικά

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me