Όχι μόνο καθυστερημένη φόρτωση εικόνων ιστοσελίδες βοηθούν στην απόδοση της ηλικίας, αλλά βοηθάει και σε Βελτιστοποίηση Μηχανών Αναζήτησης όπως παρατηρείται. Μπορείς να χρησιμοποιήσεις jQuery και ακόμη και Mootools για αργή φόρτωση εικόνων. Οι εικόνες θα εμφανίζονται μόνο όταν κάνετε κύλιση σε αυτές.
Αυτή η συμβουλή jQuery μειώνει πολλά εξωτερικά αιτήματα κατά τη φόρτωση της σελίδας, βοηθώντας τελικά το ιστολόγιό σας στο WordPress να φορτώσει πιο γρήγορα. Ενώ χρησιμοποιείτε αυτό το τέχνασμα, θα πρέπει επίσης να χρησιμοποιήσετε την Τεχνική προσωρινής μνήμης για να απλοποιήσετε τη φόρτωση της σελίδας.
Περιεχόμενα
Τι είναι το Lazy Loading;
Τεμπέλης φόρτωση είναι όταν κατεβάζετε περιεχόμενο όπως το χρειάζεστε, αντί να το κατεβάζετε ταυτόχρονα.
Το Lazy loading είναι μια τεχνική βελτιστοποίησης που χρησιμοποιείται στο διαδίκτυο. Φορτώνει μόνο το τμήμα της ιστοσελίδας που χρειάζεστε στην αρχή και δεν φορτώνει άλλα μέρη μέχρι να κάνετε κλικ σε αυτά. Με αυτόν τον τρόπο, δεν χρειάζεται να φορτώσει όλες τις πληροφορίες από την αρχή μέχρι το τέλος.
Μια μορφή τεμπέλης φόρτωσης ονομάζεται κύλιση άπειρου. Αυτό σημαίνει ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, περισσότερο περιεχόμενο θα φορτώνεται αυτόματα.
Γιατί έχει σημασία το lazy loading;
Το τεράστιο ωφέλιμο φορτίο μιας ιστοσελίδας είναι γεμάτο εικόνες, σενάρια, φύλλα στυλ, γραμματοσειρές και βίντεο. λήψη εικόνων πάνω από 60% του μεγέθους μιας τυπικής ιστοσελίδας. Δεν είναι δυνατό να απαλλαγούμε από αυτά γιατί είναι σημαντικά για το σχεδιασμό μιας ιστοσελίδας.
Χωρίς καμία βελτιστοποίηση, το πρόγραμμα περιήγησής σας κατεβάζει τα πάντα πριν αποδώσει τη σελίδα. Αυτό κάνει τη φόρτωση της σελίδας πιο αργή.
Είναι λογικό να κάνετε ό,τι μπορείτε για να κάνετε τις ιστοσελίδες σας να φορτώνουν πιο γρήγορα. Και όταν πρόκειται για εικόνες, αυτές συμβάλλουν περισσότερο στο μέγεθος ενός ιστότοπου.
Επομένως, αν ξεκινήσετε με αυτά, είναι καλή ιδέα γιατί τότε ο ιστότοπός σας θα φορτώσει γρήγορα. Εδώ είναι χρήσιμη η τεμπέλης φόρτωση, επειδή πραγματοποιεί λήψη μόνο των τμημάτων μιας εικόνας που προβάλλονται στη σελίδα σας ανά πάσα στιγμή.
Πώς να ρυθμίσετε το Lazy Loading με το jQuery;
Υπάρχουν πρόσθετα που σας επιτρέπουν να εκτελείτε απλά πράγματα, αλλά όσο λιγότερα πρόσθετα χρησιμοποιείτε, τόσο πιο αποτελεσματικό θα είναι το ιστολόγιό σας.
Ανεξάρτητα από το θέμα του WordPress που χρησιμοποιείτε, μπορείτε να εφαρμόσετε το lazy loading πολύ εύκολα.
Είναι απλώς ένα σεμινάριο δύο βημάτων, το ένα για την προσθήκη του jQuery και το άλλο είναι να αντιστοιχίσετε την ετικέτα img σε μια κλάση, εάν θέλετε να φορτώνετε με καθυστέρηση συγκεκριμένες εικόνες στο ιστολόγιό σας στο WordPress.
Εδώ είναι η συνάρτηση jQuery, την οποία θα πρέπει να προσθέσετε στα σενάρια του θέματός σας.
/* lazyload.js (γ) Lorenzo Giuliani * Άδεια MIT (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) {loadImage(images[i], συνάρτηση () { images.splice(i, i); }); } }; } ; // Το Array.prototype.slice.call δεν είναι καλούμενο στο υπέροχο IE8 μας για (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(Αυτό);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Και εδώ είναι πώς μπορείτε να καλέσετε τη συνάρτηση jQuery για να εφαρμόσετε δυναμικά τη Lazy φόρτωση εικόνων. Πρέπει να χρησιμοποιήσετε την κλάση lazy για κάθε εικόνα που θέλετε να φορτώσετε χρησιμοποιώντας τη συνάρτηση jQuery.
Συμπέρασμα
Το Lazyload είναι ένα καλό πράγμα για το blog ή τον εταιρικό σας ιστότοπο. Βοηθά με το SEO και η Google μπορεί να το δει. Αλλά, δεν χρειάζεται να ανησυχείτε για αυτό γιατί ξέρουν πώς λειτουργεί το lazyloading.
Μπορείτε επίσης να το προσαρμόσετε όπως θέλετε αλλάζοντας την κίνηση και προσθέτοντας καθυστέρηση.
Γεια σας,
Είναι καλή πληροφορία και είναι πολύ χρήσιμη. Lazy Είναι πολύ χρήσιμο αφού χρησιμοποιούσα θέματα για να δείξω εικόνες.
Καλή δουλειά και συνεχίστε…!