Πώς να αναβάλλετε εικόνες εκτός οθόνης στο WordPress

Όλοι γνωρίζουμε ότι η ταχύτητα είναι πολύ σημαντική για το SEO και τη μετατροπή. Η γρήγορη δημιουργία ενός ιστότοπου μπορεί να βοηθήσει αυτόν τον ιστότοπο να καταταχθεί υψηλότερα στο Google. Και μπορεί επίσης να κάνει τους αναγνώστες σας χαρούμενους. Σε ποιον δεν αρέσει μια γρήγορη ιστοσελίδα;

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

Αν έχετε ελέγξει τον ιστότοπό σας μέσω εργαλείων ελέγχου ταχύτητας όπως το Google PageSpeed ​​Insight ή το Web.dev, μία από τις προειδοποιήσεις που μπορεί να λάβετε είναι η «αναβολή εικόνων εκτός οθόνης».

Σε αυτό το άρθρο, θα εξηγήσω τι σημαίνει αυτό, θα σας πω πώς να το διορθώσετε και θα προτείνω προσθήκες που μπορείτε να χρησιμοποιήσετε για να το διορθώσετε.

Ωστόσο, θα πρέπει να γνωρίζετε γιατί η αναβολή εικόνων εκτός οθόνης μπορεί να αυξήσει την ταχύτητα του κινητού σας. Οι πιο σημαντικοί παράγοντες που επηρεάζουν την ταχύτητά σας είναι η φιλοξενία και το θέμα σας. Εδώ στο BloggingTools, χρησιμοποιούμε το Cloudways επειδή είναι η ταχύτερη φιλοξενία WordPress. Εάν δεν έχετε την οικονομική δυνατότητα να αντέξετε οικονομικά το Cloudways, τότε οι Bluehost ή Hostinger είναι καλές επιλογές. Για το θέμα, χρησιμοποιούμε το ταχύτερο θέμα WordPress, γνωστό ως GeneratePress.

Τι σημαίνει αναβολή εικόνων εκτός οθόνης;

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

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

Αλλά όταν αναβάλλετε τις εικόνες εκτός οθόνης, οι εικόνες θα φορτώνονται μόνο όταν ο χρήστης κάνει κύλιση σε αυτές.

Λάβετε υπόψη ότι δεν μπορείτε να αναβάλλετε μόνο τις εικόνες, αλλά τα περισσότερα από τα στοιχεία του ιστότοπού σας μπορούν επίσης να αναβληθούν μέχρι να χρειαστούν.

Πώς να αναβάλλετε εικόνες εκτός οθόνης στο WordPress

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

Μόλις μπορέσετε να φορτώσετε αργά τις εικόνες και άλλα στοιχεία που εμποδίζουν τη γρήγορη φόρτωση της σελίδας σας. Η "αναβολή εικόνων εκτός οθόνης" από το Google PageSpeed ​​Insight και άλλα εργαλεία δοκιμών θα εξαφανιστεί.

Ακολουθήστε αυτά τα βήματα για να αναβάλετε τις εικόνες εκτός οθόνης στο WordPress:

1. Εγκαταστήστε ένα πρόσθετο φόρτωσης Lazy

Υπάρχουν πολλά lazy loading plugins που είναι διαθέσιμα δωρεάν στον κατάλογο προσθηκών WordPress. Μπορείτε να μεταβείτε στο Plugin, να προσθέσετε νέα και να πληκτρολογήσετε Lazy loading. Εγκαταστήστε οποιονδήποτε έχει καλές κριτικές.

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

Επίσης, εάν χρησιμοποιείτε το Jetpack και το autoptimize, έχουν χαλαρές επιλογές φόρτωσης.

2. Ενεργοποιήστε τις επιλογές lazy loading

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

3. Εκκαθαρίστε την προσωρινή μνήμη.

Μόλις ενεργοποιηθεί το lazy loading, διαγράψτε την προσωρινή μνήμη και αυτό είναι όλο!

Μπορείτε να δοκιμάσετε ξανά τον ιστότοπό σας, η προειδοποίηση θα πρέπει να φύγει!

Αναβολή εικόνων εκτός οθόνης Προσθήκη WordPress

Τα πρόσθετα Defer offsreen images είναι ίδια με τα πρόσθετα lazy loading. Εδώ είναι μερικά παρακάτω:

1. jetpack

Το Jetpack είναι ένα από τα πιο δημοφιλή πρόσθετα (plugins) για το WordPress με πάνω από 5 εκατομμύρια ενεργές εγκαταστάσεις. Εάν έχετε ήδη εγκατεστημένο το Jetpack, δεν χρειάζεται να εγκαταστήσετε κάποιο επιπλέον πρόσθετο για αργή φόρτωση.

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

2. Αυτόματη βελτιστοποίηση

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

Μεταβείτε στις ρυθμίσεις Autoptimize και, στη συνέχεια, κάντε κλικ στην καρτέλα εικόνων και ενεργοποιήστε τη Lazy loading.

3. WP Rocket

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

Μεταβείτε στις ρυθμίσεις WP Rocket και, στη συνέχεια, κάντε κλικ στο μέσο, ​​από εκεί μπορείτε να ενεργοποιήσετε την τεμπέλικη φόρτωση.

4. LiteSpeed ​​Cache

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

5. a3 Lazy Load

Αν χρειάζεστε μόνο ένα πρόσθετο για την αργή φόρτωση, τότε το a3 Lazy Load είναι ένα καλό πρόσθετο για αυτό. Απλώς μεταβείτε στο πρόσθετο > προσθήκη νέου. Αναζητήστε το a3 Lazy Load. Εγκαταστήστε το και ενεργοποιήστε το. Στη συνέχεια, μεταβείτε στις ρυθμίσεις του πρόσθετου και ενεργοποιήστε το lazy loading.

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

Συχνές Ερωτήσεις (FAQs)