Wpcours

Des tuto, thèmes et plugins pour Wordpress

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

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.


Plus de cours et exercices corrigés :

  • Ajouter Google Authorship à votre site
  • Supprimer le champ URL du site Web du formulaire de commentaire WordPress
  • Ajouter un beau formulaire d’inscription FeedBurner à votre blog
  • Barre verticale flottante avec boutons de partage sur réseaux sociaux
  • 3 méthodes pour supprimer la date des articles sur WordPress
  • Ajouter des zones de contenu colorées sur votre site

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

Créer votre avatar gratuit

Articles récents

  • Indexer ou pas les pages de catégories et de balises?
  • Comment réparer le problème de déconnexion WiFi sous Windows 10 ?
  • Comment afficher la barre supérieure dans le thème GeneratePress gratuit ?
  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?

© 2023 ·wpcours.com · Mentions · Contact