Τα βίντεο από το YouTube και οι χάρτες από το Google Maps είναι εξαιρετικά στοιχεία για το engagement των χρηστών, αλλά είναι «εφιάλτης» για την ταχύτητα. Ένα μόνο ενσωματωμένο βίντεο (iframe) μπορεί να προσθέσει πάνω από 1MB σε μέγεθος σελίδας και δεκάδες αιτήματα HTTP, ακόμα κι αν ο χρήστης δεν το πατήσει ποτέ. Το Lazy Loading (οκνηρή φόρτωση) είναι η τεχνική που λέει στον browser: «Μην φορτώσεις το βίντεο, εκτός αν ο χρήστης σκρολάρει μέχρι το σημείο που βρίσκεται».
Γιατί το απλό Lazy Load δεν αρκεί;
Το WordPress πλέον κάνει lazy load στις εικόνες αυτόματα. Όμως, για τα iframes (βίντεο/χάρτες), χρειαζόμαστε κάτι πιο δραστικό. Η καλύτερη μέθοδος είναι η αντικατάσταση του iframe με μια εικόνα προεπισκόπησης (preview image). Το βαρύ script του YouTube φορτώνεται μόνο όταν ο χρήστης κάνει πραγματικό κλικ στο "Play".
Οδηγίες Υλοποίησης
- WP Rocket (Η κορυφαία επιλογή): Στην καρτέλα Media, ενεργοποιήστε το "Lazy Load for iframes and videos" και οπωσδήποτε το "Replace YouTube iframe with preview image". Αυτό μπορεί να μειώσει τον χρόνο φόρτωσης μιας σελίδας με βίντεο κατά 2-3 δευτερόλεπτα!
- Lazy Load for Videos (Plugin): Αν δεν χρησιμοποιείτε το WP Rocket, αυτό το δωρεάν plugin κάνει ακριβώς την ίδια δουλειά. Μετατρέπει τα βίντεο σε ελαφριές εικόνες και φορτώνει το βίντεο μόνο "on demand".
- Βελτιστοποίηση Google Maps: Οι χάρτες είναι ακόμα πιο βαριοί. Αν δεν είναι κρίσιμο να είναι διαδραστικοί αμέσως, προτιμήστε να βάλετε μια στατική εικόνα του χάρτη που να οδηγεί στο Google Maps, ή χρησιμοποιήστε ένα plugin που ενεργοποιεί τον χάρτη μόνο μετά από κλικ.
- Χρήση του Divi Video Module: Το Divi έχει ρυθμίσεις για "Image Overlay". Ανεβάστε μια δική σας εικόνα εξωφύλλου για το βίντεο. Αυτό βοηθάει τον browser να μην καλεί τα scripts του YouTube μέχρι ο χρήστης να αλληλεπιδράσει.
Κάνοντας lazy load στα βαριά στοιχεία, δίνετε προτεραιότητα σε αυτό που θέλει ο χρήστης: το περιεχόμενο. Το site σας παραμένει ελαφρύ και γρήγορο, ενώ τα βίντεο παραμένουν εκεί, έτοιμα να παίξουν μόνο όταν χρειαστεί.
