Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Accélérer le chargement de votre blog avec Lazy-loading

Màj le 19 avril 2015

Le Lazy-loading en en français chargement paresseux, est une pratique que vous avez certainement tous déjà vue en application sans l’avoir reconnu, qui consiste à attendre une action du visiteur pour charger certaines portions de la page.Vous êtes confrontés à des problèmes de performance sur votre site internet ? Lazy Load pourrait vous intéresser. 

C’est un plugin jQuery qui permettra à votre site d’optimiser le chargement des images. On pourrait se demander s’il est nécessaire, pendant le chargement d’une page, de charger aussi toutes les images de cette dernière. En effet, il serait plus judicieux de ne charger que les images qui peuvent être visibles pour l’utilisateur, donc une fois qu’il aura scrollé dessus par exemple. C’est ce que Lazy Load vous permettra de réaliser.

lazy-load-image-compressor

Lazy-load images pour Blogger et Wordpress

On va utiliser un plugin à cette effet, qu’ on va insérer directement le code avant la balise </head> pour blogger et pour Wordpress dans le « header » (essayer aussi de mettre le code dans le pied de page « footer » et voir s’il marche bien, si non mettez le dans l’entête « header »).

Voici le code :

<!-- lazy load start www.wpcours.com -->
<script type='text/javascript'>//<![CDATA[
(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(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.wpcours.com -->

Admirer la vitesse de chargement de votre site et n’oublier pas de partager l’article.


Vous aimerez également...

  • Quels fichiers WordPress devez-vous sauvegarder?
  • Accélérer Wordpress en nettoyant le Header de votre thème
  • Ajouter les annonces au niveau de la page à votre blog
  • Comment faire des redirections 301 sous WordPress
  • Ajouter des fichiers Javascript et CSS à l’en-tête et au pied de page dans WordPress
  • Ajouter une barre verticale flottante de partage à votre blog

Classé sous :Tutoriels Balisé avec :wordpress guide

Accueil / Tutoriels / Accélérer le chargement de votre blog avec Lazy-loading

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact