Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Facebook
Accueil / Tutoriels / Accélérer le chargement de votre blog avec Lazy-loading

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

Màj le 19 avril 2015Laissez un commentaire

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.


Share
Tweet
+1
Share
Pin it

Cela devrait aussi vous intéresser :

  • Ajouter un bouton suivant et précédent (Next-previous) à votre blog
  • Afficher les articles similaires (related post) en grille pour genesis
  • Lier votre nom de domaine à votre site sur blogger
  • Créer un formulaire de contact sans plugin avec Google forms
  • Créer des pdf pour vos articles sans plugin sur WordPress
  • Ajouter « Nofollow » aux liens externes sans plugin

Catégorie(s): Tutoriels Mots clés : wordpress guide

Laisser un commentaire Annuler la réponse

Votre adresse de messagerie 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.com et recevez nos tutoriels Wordpress Gratuitement.

Articles récents

  • Ajouter ads.txt à votre site pour augmenter vos revenus Adsense
  • 9 Meilleurs plugins WordPress pour créer un Forum (comparatif)
  • Ajouter les fichiers SVG dans WordPress
  • Comment importer/exporter vos blocs WordPress Gutenberg en 2 étapes
  • Créer un bloc réutilisable dans WordPress Block éditeur (Gutenberg)

© 2019 ·wpcours.com · Privacy Policy · Contact