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...

  • Corriger l’erreur « Désolé, vous n’êtes pas autorisé à accéder à cette page » dans WordPress
  • Supprimer le fichier Widget CSS Bundle sous blogger
  • Afficher le titre des articles précédents et suivants au survol de la souris
  • Ajouter des zones de contenu colorées sur votre site
  • Comment réparer l’erreur « 503 Service Unavailable » dans WordPress
  • Quels fichiers WordPress devez-vous sauvegarder?
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

  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?
  • Comment créer des boutons de partage social flottants dans GeneratePress sans plugin ?
  • Google Analytics 4 vs Universal Analytics : Comparaison complète 2023
  • Est ce que Google accepte le contenu généré par l’IA et ChatGPT ?