Πώς να φορτώσετε Lazy εικόνες + βίντεο στο WordPress (και να αντικαταστήσετε το YouTube iFrames με μια εικόνα προεπισκόπησης) για καλύτερα αποτελέσματα GTmetrix

Ποιος είναι ο καλύτερος τρόπος τεμπέλης φόρτωση εικόνων και βίντεο στο WordPress?


Αυτό εξαρτάται από το αν χρησιμοποιείτε ήδη μια προσθήκη προσωρινής μνήμης που υποστηρίζει τεμπέλης φόρτωση (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Εάν η προσθήκη προσωρινής μνήμης υποστηρίζει τεμπέλης φόρτωση εικόνων και βίντεο, είναι καλύτερο να το χρησιμοποιήσετε για να αποφύγετε την εγκατάσταση επιπλέον προσθήκης. Αλλά αν η προσθήκη προσωρινής μνήμης δεν υποστηρίζει τεμπέλης φόρτωση, σας προτείνω να το χρησιμοποιήσετε (ειδικά το WP Rocket), αλλιώς ανέφερα εναλλακτικά πρόσθετα αργής φόρτωσης παρακάτω που μπορείτε να εγκαταστήσετε ξεχωριστά.

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

Τι σημαίνει να αντικαταστήσετε το YouTube Iframe με μια εικόνα προεπισκόπησης?
Εάν ενσωματώσετε βίντεο στον ιστότοπό σας στο WordPress, αυτό φορτώνει μόνο το “παχύ πρόγραμμα αναπαραγωγής YouTube” μόλις οι χρήστες κάνουν κλικ στο κουμπί Αναπαραγωγή. Με άλλα λόγια, το μόνο πράγμα που φορτώθηκε αρχικά είναι μια εικόνα προεπισκόπησης.

Θα πρέπει να φορτώσετε τεμπέλης εικόνες και βίντεο?
Δεν είμαι τεμπέλης φόρτωση εικόνων γιατί η συνεχής φόρτωση εικόνων καθώς κάνετε κύλιση προς τα κάτω στη σελίδα μπορεί να είναι ενοχλητική για τους χρήστες. Ωστόσο, όλες οι εικόνες μου έχουν βελτιστοποιηθεί σε 100% στο GTmetrix. Κάνω τεμπέλης φόρτωση βίντεο και αντικαθιστώ το iframe με μια εικόνα προεπισκόπησης. Δεδομένου ότι κάθε ενσωματωμένο βίντεο μπορεί να διαρκέσει 2 δευτερόλεπτα (πολύ βαρύτερο από μια εικόνα), το πλεονέκτημα της τεμπέλης φόρτωσης βίντεο είναι σημαντικό.

1. Πύραυλος WP

Το WP Rocket είναι η # 1 επιλογή μου για τεμπέλης φόρτωση και ήταν το # 1 cache plugin στις δημοσκοπήσεις στο Facebook.

Δεδομένου ότι έχει ήδη ενσωματωμένο τεμπέλης φόρτωσης, αυτό σημαίνει ότι δεν χρειάζεται να εγκαταστήσετε επιπλέον πρόσθετο. Αυτό είναι όλο το όφελος του WP Rocket. έρχεται με περισσότερες δυνατότητες από σχεδόν οποιαδήποτε άλλη προσθήκη cache (με αποτέλεσμα καλύτερους χρόνους φόρτωσης και βαθμολογίες GTmetrix), αλλά λιγότερα πρόσθετα στον ιστότοπό σας. Το WP Rocket έχει εκτεταμένη τεκμηρίωση για τεμπέλης φόρτωση και διαμόρφωση ρυθμίσεων WP Rocket.

Πύραυλος WP

Πώς να ενεργοποιήσετε το Lazy Load σε WP Rocket
Για να ενεργοποιήσετε την αργή φόρτωση στο WP Rocket, μεταβείτε στις Ρυθμίσεις > Πύραυλος WP > Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ > LazyLoad. Μπορείτε να το ενεργοποιήσετε για εικόνες, iframes και βίντεο και να αντικαταστήσετε το iframes του YouTube με μια εικόνα προεπισκόπησης.

Lazy Load Images WP Rocket

2. SG Optimizer

SiteGround εισήγαγε τεμπέλης φόρτωση στη μεγάλη ενημέρωση του SG Optimizer.

Φυσικά, πρέπει να είστε πελάτης του SiteGround για να χρησιμοποιήσετε αυτό το πρόσθετο (το οποίο θα έκανα για κοινή φιλοξενία, λαμβάνοντας υπόψη ότι είχαν βαθμολογηθεί ως ο # 1 οικοδεσπότης σε περισσότερες από 20 δημοσκοπήσεις στο Facebook). Το SG Optimizer είναι συγκρίσιμο με το WP Rocket, αλλά δεν διαθέτει σχεδόν τόσες δυνατότητες. Επομένως, εάν χρησιμοποιείτε το SiteGround για τον οικοδεσπότη σας, θα προτιμούσα ακόμα το WP Rocket έναντι του SG Optimizer.

SiteGround SG Optimizer

Πώς να ενεργοποιήσετε το Lazy Load In SG Optimizer
Για να ενεργοποιήσετε την αργή φόρτωση στο SG Optimizer, μεταβείτε στις Ρυθμίσεις > SG Optimizer > Προεπιλογές ανά ιστότοπο > Βελτιστοποίηση εικόνας. Μπορείτε να φορτώσετε τεμπέλης εικόνες, Gravatars, μικρογραφίες, εικόνες απόκρισης και widget. Εάν έχετε σχόλια στο ιστολόγιό σας, η τεμπέλη φόρτωση Gravatars μπορεί να βοηθήσει πολύ.

SG Optimizer Lazy Loading

3. Συνολική προσωρινή μνήμη W3

Εάν χρησιμοποιείτε ήδη το W3 Total Cache, έχουν επίσης ένα τεμπέλης επιλογή φόρτωσης.

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

Πρόσθετο W3 Total Cache

Πώς να ενεργοποιήσετε το Lazy Load In W3 Total Cache
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο W3 Total Cache, μεταβείτε στις Ρυθμίσεις > Γενικές Ρυθμίσεις > Εμπειρία χρήστη > Τεμπέλης φόρτωση. Ενεργοποιήστε το και μετά μεταβείτε στην Εμπειρία χρήστη > Τεμπέλης φόρτωση. Επιλέξτε την επεξεργασία ετικετών εικόνας HTML, εικόνων φόντου, εξαίρεσης λέξεων και μεθόδου ενσωμάτωσης σεναρίου.

W3 Συνολική προσωρινή μνήμη Lazy Loading

4. Litespeed Cache

Cache Litepseed τεμπέλης φόρτωση θα κάνει επίσης τη δουλειά (το Litespeed είναι καλά ελεγμένο plugin cache).

Πρόσθετο LiteSpeed ​​Cache

Πώς να ενεργοποιήσετε το Lazy Load στην προσωρινή μνήμη LiteSpeed
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο LiteSpeed ​​Cache, μεταβείτε στο LiteSpeed ​​Cache > Ρυθμίσεις > Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ > Ρυθμίσεις πολυμέσων. Εδώ μπορείτε να ενεργοποιήσετε τις εικόνες αργής φόρτωσης, iframes, να εξαιρέσετε εικόνες, να ζητήσετε αυτόματα βελτιστοποίηση μέσω cron job, να συμπεριλάβετε τη βιβλιοθήκη Javascript inline και να αλλάξετε άλλες ρυθμίσεις.

Lazy Load Εικόνες Βίντεο Litespeed Cache

5. Ταχεία απόδοση

Ταχεία απόδοση είναι μια άλλη προσθήκη cache που υποστηρίζει τεμπέληρη ​​φόρτωση. Η Swift έλαβε υπέροχες κριτικές στο WordPress Speed ​​Up Facebook Group, αλλά οι κριτικές στη σελίδα του WordPress plugin είναι μόνο περίπου 4 αστέρια. Δεν έχω δοκιμάσει το Swift Performance. Είμαι απόλυτα χαρούμενος με το WP Rocket.

Πρόσθετο Swift Performance Lite

Πώς να ενεργοποιήσετε το Lazy Load σε γρήγορη απόδοση
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο Swift Performance, μεταβείτε στις Ρυθμίσεις > Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ > Οκνηρό φορτίο. Εδώ θα έχετε την επιλογή να χαλαρώσετε τις εικόνες, να εξαιρέσετε ορισμένες εικόνες και να ενσωματώσετε εικόνες με τεμπέλης φόρτωση.

Lazy Load Images Swift Performance

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

Η αυτόματη βελτιστοποίηση χρησιμοποιείται συχνά με κεντρικούς υπολογιστές όπως το GoDaddy και το WP Engine, όπου έχουν το δικό τους ενσωματωμένο σύστημα προσωρινής αποθήκευσης και προσθήκες cache μαύρης λίστας. Σε αυτήν την περίπτωση (δεδομένου ότι θέλετε να φροντίσετε άλλες βελτιστοποιήσεις ταχύτητας), η αυτόματη βελτιστοποίηση είναι συνήθως η προσθήκη μετάβασης για αυτό. Ένα από τα πολλά χαρακτηριστικά του είναι τεμπέλης φόρτωση, αλλά σας επιτρέπει επίσης να βελτιστοποιήσετε HTML, CSS, JavaScript και Google Fonts.

Αυτόματη βελτιστοποίηση προσθήκης

Πώς να ενεργοποιήσετε το Lazy Load κατά την αυτόματη βελτιστοποίηση
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο Autoptimize, μεταβείτε στις Ρυθμίσεις > Εικόνες > Lazy Load Εικόνες. Έχετε επίσης την επιλογή να χρησιμοποιήσετε το CDN του ShortPixel το οποίο για βελτιστοποίηση εικόνας (αυτό είναι το πρόσθετο που χρησιμοποιώ).

Αυτόματη βελτιστοποίηση εικόνων Lazy Load

7. Χτυπήστε

Το Smush είναι ένα πρόσθετο βελτιστοποίησης εικόνας που υποστηρίζει τεμπέλης φόρτωση. Αναπτύχθηκε από το WPMU, ωστόσο προσωπικά χρησιμοποιώ το ShortPixel για συμπίεση χωρίς απώλειες, καθώς είναι το μόνο που έχω χρησιμοποιήσει που κάνει τις εικόνες μου 100% στο GTmetrix (και έχω δοκιμάσει πολλές προσθήκες βελτιστοποίησης εικόνας).

Πρόσθετο Smush

Πώς να ενεργοποιήσετε το Lazy Load In Smush
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο Smush, μεταβείτε στο Smush > Ταμπλό > Οκνηρό φορτίο. Μπορείτε να επιλέξετε τους τύπους αρχείων που θέλετε να φορτωθούν με τεμπέληδες (.jpeg, png, .gif, .svg, iframe) και αν θέλετε να είναι ενεργοποιημένο για περιεχόμενο, widget, μικρογραφίες, Gravatars. Έχει ακόμη και τις ρυθμίσεις κινούμενης εικόνας με τεράστιο φορτίο.

Smush Lazy Load

8. Lazy Load By WP Rocket

Lazy Load By WP Rocket είναι καλό αν δεν χρησιμοποιείτε WP Rocket αλλά θέλετε να φορτώσετε τεμπέλης εικόνες.

Πρόσθετο Lazy Load

Πώς να ενεργοποιήσετε το Lazy Load στο Lazy Load από το WP Rocket
Μεταβείτε στις Ρυθμίσεις > LazyLoad. Έχετε τη δυνατότητα να φορτώσετε τεμπέλης εικόνες, iframes & βίντεο και αντικαταστήστε τα βίντεο YouTube με μικρογραφία. Δεν υπάρχουν πολλές ρυθμίσεις για διαμόρφωση. Προσωπικά εύχομαι να υπήρχαν περισσότερα. Ίσως αυτός είναι ο λόγος για τον οποίο αυτό το πρόσθετο τεμπέλης φόρτωσης δεν έχει τις καλύτερες κριτικές.

Lazy Load By WP Rocket

9. A3 Lazy Load

A3 Lazy Load υποστηρίζει τεμπέλης φόρτωση και των δύο εικόνων και βίντεο.

a3 Lazy Load Plugin

Πώς να ενεργοποιήσετε το Lazy Load στο A3 Lazy Load
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο A3 Lazy Load, μεταβείτε στις ρυθμίσεις > A3 Lazy Load. Μπορείτε να διαμορφώσετε ρυθμίσεις για τεμπέλης φόρτωση εικόνων, βίντεο, iframe, Gravatars και να επιλέξετε ποιες περιοχές του ιστότοπού σας θέλετε να εφαρμόσετε τεμπέλης φόρτωση (συμπεριλαμβανομένου του κινητού). Υπάρχουν επίσης επιλογές για την ενεργοποίηση ενός τεμπέλης εφέ φόρτωσης, φόρτωσης χρώματος φόντου και της επιλογής εξαίρεσης διευθύνσεων URL και τύπων ανάρτησης.

a3 Ρυθμίσεις Lazy Load

10. BJ Lazy Load

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

Πρόσθετο BJ Lazy Load

Πώς να ενεργοποιήσετε το Lazy Load στο BJ Lazy Load
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο BJ Lazy Load, μεταβείτε στις Ρυθμίσεις > BJ Lazy Load. Οι ρυθμίσεις είναι σχετικά απλές και σας δίνουν τη δυνατότητα να φορτώνετε τεμπέληδες εικόνες, iframes, Gravatars και να αποκλείετε την αργή φόρτωση από περιεχόμενο, widget κειμένου και μικρογραφίες μετά. Υπάρχει επίσης μια επιλογή να συμπεριλάβετε μια εικόνα κράτησης θέσης, ένα όριο θύρας προβολής και να χρησιμοποιήσετε μια εικόνα προεπισκόπησης χαμηλής ανάλυσης όταν τεμπέλης φόρτωση.

Ρυθμίσεις BJ Lazy Load

11. Lazy Load για εικόνες

Lazy Load για εικόνες είναι καλό αν θέλετε να το κάνετε μόνο για εικόνες.

Προσθήκη Lazy Load for Images

Πώς να ενεργοποιήσετε το Lazy Load In για εικόνες
Δεν υπάρχουν ρυθμίσεις για διαμόρφωση στο πρόσθετο Lazy Load For Images (είναι αυτόματο).

12. Lazy Load για βίντεο

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

Lazy Load για βίντεο Προσθήκη

Πώς να ενεργοποιήσετε το Lazy Load στο Lazy Load για βίντεο
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο Lazy Load For Videos, μεταβείτε στις Ρυθμίσεις > Lazy Load για βίντεο. Επιλέξτε να φορτώνετε μόνο CSS / JS όταν χρειάζεται, προσαρμόστε το κουμπί αναπαραγωγής και εφαρμόστε προσαρμοσμένο CSS.

Lazy Load για βίντεο Προσθήκη

13. Lazy Load για σχόλια

Μπορείτε να φορτώσετε τεμπέλης σχόλια χρησιμοποιώντας το Lazy Load για σχόλια συνδέω.

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

Lazy Load για πρόσθετα σχολίων

Πώς να ενεργοποιήσετε το Lazy Load στο Lazy Load για σχόλια
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο Lazy Load For Comments, μεταβείτε στις Ρυθμίσεις > Συζήτηση > Lazy Load Σχόλια. Αυτή είναι η μόνη ρύθμιση παραμέτρων για αυτό το πρόσθετο, αλλά έχει καλές κριτικές.

Lazy Load Σχόλια

14. WP YouTube Lyte

WP YouTube Lyte είναι ένα από τα αγαπημένα μου (και τα καλύτερα ελεγμένα) πρόσθετα για τεμπέλης φόρτωση βίντεο. Δημιουργήθηκε από την ομάδα στο Autoptimize που τείνει να έχει καλές κριτικές plugin παντού.

Πρόσθετο WP YouTube Lyte

Πώς να ενεργοποιήσετε το Lazy Load στο WP YouTube Lyte
Για να ενεργοποιήσετε τη φόρτωση φόρτωσης στο WP YouTube Lyte, μεταβείτε στις Ρυθμίσεις > WP YouTube Lyte. Πιάσε το δικό σου Κλειδί API YouTube και εισαγάγετέ το στην Αυτόματη βελτιστοποίηση. Επιλέξτε το μέγεθος της συσκευής αναπαραγωγής σας, αν θέλετε να συμπεριλάβετε συνδέσμους, θέση παίκτη, δύναμη HD, ενεργήστε ως κανονικός σύνδεσμος YouTube / iframes και προσθέστε μικροδεδομένα. Η προσωρινή αποθήκευση μικρογραφιών τοπικά μπορεί συχνά να διορθώσει σφάλματα GTmetrix κατά την ενσωμάτωση βίντεο YouTube.

Μικρογραφίες YouTube GTmetrix

Wp Ρυθμίσεις YouTube Lyte

Χρειάζεστε ακόμα βοήθεια?

Έχω ένα υπέροχο βίντεο σχετικά με τη βελτιστοποίηση ταχύτητας WordPress:

Έχω επίσης σεμινάρια για τη βελτιστοποίηση των εικόνων, τη διαμόρφωση του WP Rocket, τη μείωση των χρόνων απόκρισης του διακομιστή και πολλά άλλα. Μπορώ να λάβω 100% (ή σχεδόν) βαθμολογίες GTmetrix σε σχεδόν όλες τις αναρτήσεις μου χρησιμοποιώντας αυτές τις συμβουλές. Αν έχετε απορίες, μη διστάσετε να μου σχολιάσετε – χαίρομαι που θα βοηθήσετε!

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

&# x2705; Ποιο πρόσθετο είναι καλύτερο για τεμπέλης φόρτωση εικόνων?

Εάν χρησιμοποιείτε ήδη μια προσθήκη προσωρινής μνήμης που υποστηρίζει τεμπέλης φόρτωση (π.χ. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), είναι καλύτερο να το δοκιμάσετε πρώτα. Διαφορετικά, η αυτόματη βελτιστοποίηση ή η προσθήκη Lazy Load από το WP Rocket είναι καλές προσθήκες τεμπέλης φόρτωσης.

&# x2705; Τι γίνεται με τεμπέλης φόρτωση βίντεο?

Το WP Rocket και μερικές άλλες προσθήκες προσωρινής μνήμης σάς επιτρέπουν να φορτώνετε τεμπέληνα βίντεο και να αντικαθιστάτε το iframe του YouTube με μια εικόνα προεπισκόπησης. Διαφορετικά, το WP YouTube Lyte θα λειτουργήσει.

&# x2705; Η τεμπέλης φόρτωση θα βλάψει την εμπειρία του χρήστη?

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

&# x2705; Τι κάνει η τεμπέλης φόρτωση?

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

&# x2705; Πώς να απενεργοποιήσετε το τεμπέλης φόρτωσης σε συγκεκριμένες σελίδες?

Τα περισσότερα πρόσθετα σάς επιτρέπουν να το κάνετε αυτό. Για παράδειγμα, εάν χρησιμοποιείτε το WP Rocket και επεξεργάζεστε μια σελίδα ή μια ανάρτηση, θα δείτε μια επιλογή στον πίνακα ελέγχου για να απενεργοποιήσετε (ή να ενεργοποιήσετε) το τεμπέλης φόρτωσης σε αυτό το συγκεκριμένο περιεχόμενο.

Στην υγειά σας,
Κάποιος

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map