Ολοι μας θελουμε ενα blog το οποιο να ειναι φορτωνει αρκετα γρηγορο ωστε να μην φευγει ο επισκεπτης. Το lazy load script κανει ακριβως αυτο, βοηθαει να αυξησουμε την ταχυτητα φορτωσης του site μας
Αυτο που κανει ειναι να μην αφηνει τις εικονες να φορτωσουν την στιγμη που δε χρειαζοντε. Δηλαδη οταν μια εικονα βρισκεται στο footer του blog δε χρειαζεται να φορτωσει την στιγμη που ο επισκετης κανει το κλικ για να μπει στο ιστολογιο μας.
Οταν ομως η εικονα αρχιζει να μπαινει στο οπτικο πεδιο του χρηστη φορτωνει αστραπιαια. Σκεφτειτε οταν εχουμε το widget δημοφηλων αναρτησεων και το widget με τα παρομοια αρθρα τα οποια θα εχουν και 10 - 15 εικονες σιν τις εικονες της αναρτησης οσο γρηγορο internet και να εχει ο χρηστης, το blog θα σερνεται μεχρι να φορτωσει.
Οποτε καταλαβαινουμε οτι τωρα που η ταχυτητα ειναι ενας απο τους παραγοντες καταταξης, αυτο το σκριπτακι ειναι απολυτως απαραιτητο. Αν θελετε λοιπον να αυξησετε τη ταχυτητα του blog σας συνεχιστε να διαβαζετε την αναρτηση.
Τα προτυπα που εχουν φτιαχτει απο επγγελματιες ολα εχουν αυτο το script αν ομως εχετε καποιο προτυπο το οποιο δε θελετε να το αλλαξετε και να βαλετε καποιο αλλο θα πρεπει να ελεγξετε να υπαρχει αυτος ο κωδικος στο προτυπο σας. Μετα απο αυτο θα δειτε το ιστολογιο σας να εχει αυξημενη ταχυτητα και να φορτωνει πιο γρηγορα.
Τι κανει το Lazy Load script
Αυτο που κανει ειναι να μην αφηνει τις εικονες να φορτωσουν την στιγμη που δε χρειαζοντε. Δηλαδη οταν μια εικονα βρισκεται στο footer του blog δε χρειαζεται να φορτωσει την στιγμη που ο επισκετης κανει το κλικ για να μπει στο ιστολογιο μας.Οταν ομως η εικονα αρχιζει να μπαινει στο οπτικο πεδιο του χρηστη φορτωνει αστραπιαια. Σκεφτειτε οταν εχουμε το widget δημοφηλων αναρτησεων και το widget με τα παρομοια αρθρα τα οποια θα εχουν και 10 - 15 εικονες σιν τις εικονες της αναρτησης οσο γρηγορο internet και να εχει ο χρηστης, το blog θα σερνεται μεχρι να φορτωσει.
Οποτε καταλαβαινουμε οτι τωρα που η ταχυτητα ειναι ενας απο τους παραγοντες καταταξης, αυτο το σκριπτακι ειναι απολυτως απαραιτητο. Αν θελετε λοιπον να αυξησετε τη ταχυτητα του blog σας συνεχιστε να διαβαζετε την αναρτηση.
Πως βαζω το Lazy Load script στο Blogger
Πρωτα πρωτα θα πρεπει να κοιταξουμε να υπαρχει το Lazy Load Plugin στο θεμα μας. Παμε λοιον στο θεμα μας επεξεργασια HTML και με control +F κανουμε αναζητηση την λεξουλα Lazy load.
Αν δουμε πως υπαρχει τοτε ειμαστε οκ και δε χρειαζεται να κανουμε καποια αλλη κινηση. Ομως αν δε την βρουμε τοτε πρεπει να βρουμε το </body> και ακριβως απο πανω του να κανουμε επικοληση τον κωδικο που ακολουθει.
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfVlnCrkmW2eMj1XePxr81GsG8vlyIc_fOIKwvEjxukRCQuUK9PEFdjf9Jl-KV3PzR2UvfRiHfASI2ZBibhEnf1G4FFbp8sZKHU9MgzVfQDZsaA46YejubCHhJHgr0QExM8KgjXOzKvT1/s640/arlinadesign.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>
Τα προτυπα που εχουν φτιαχτει απο επγγελματιες ολα εχουν αυτο το script αν ομως εχετε καποιο προτυπο το οποιο δε θελετε να το αλλαξετε και να βαλετε καποιο αλλο θα πρεπει να ελεγξετε να υπαρχει αυτος ο κωδικος στο προτυπο σας. Μετα απο αυτο θα δειτε το ιστολογιο σας να εχει αυξημενη ταχυτητα και να φορτωνει πιο γρηγορα.