12 Déc Lazy Loading c’est quoi ?
Procédé désormais incontournable pour déployer à site riche sur le plan visuel sans pour autant poser sur les temps de chargement. Le lazy loading est aujourd’hui omniprésent. Adopter le à votre tour pour ne pas brider votre créativité du côté du design et des effets interactifs.
Signifiant littéralement chargement paresseux, le lazy loading est une technique qui consiste à retarder le chargement des d’éléments jusqu’au moment où ils s’apprêtent à apparaître dans la vue. En réalité, vous la rencontrer en permanence sur le Web. Le fil d’actualité Facebook, les épingles de vos tableaux Pinterest, les tweets de votre Timeline ou les multiples commentaires Disqus se complètent au fur et à mesure du défilement de la page. Cela permet de créer un véritable gratte-ciel qu’il aurait été ultra couteux à déployer un tel procédé si votre site Web évolue autour du design one-page ou d’une multitude de visuels qui se superposent.
A-t-elle chargement retardé s’effectue en JavaScript, via un code qui détecte le moment où l’utilisateur atteint le bas de la page, avant de la compléter avec les éléments suivants. Non seulement vous maîtrisez mieux l’ordre selon lequel les éléments se charge, mais vous offrez à vos visiteurs d’un site Internet plus réactif et dynamique, sans peser lourdement sur leur connexion.
Pour déployer un tel effet, de multiples solutions s’offrent à vous : inutile de réinventer la roue, pouvez utiliser un plug-in JQuery comme celui de Mika Tuupola ou une extension pour WordPress lazy load.
Si le système est très utile pour soutenir une vaste galerie d’images, par exemple, il n’est pas exempt de conséquences sur le référencement naturel en lui-même. Les moteurs de recherche exécute en effet pas le code JavaScript et ils ne peuvent donc pas référencer le contenu que vous charger de cette manière. L’une des solutions consiste éventuellement à créer une page sans lazy loading à l’attention des moteurs de recherche, que vous leur soumettez en Lessive blanc à l’aide de leur user-agent.
Dans le même ordre d’idée, les adresses des images ne sont généralement pas défini dans l’attribut SRC de leur balise <img/> mais dans un attribut data. Et là encore elles risquent de ne pas être indexées en conséquence. De nombreux développeur préconise donc de définir malgré tout les images de manière standard, en les encadrant de balise <noscript> afin que les moteurs de recherche puisse les examiner. Les utilisateurs classiques, qui disposent d’un navigateur avec JavaScript activé, n’y verront que du feu. Les images se chargeront en lazy loading et vous pouvez ainsi envisager de composer des pages de plusieurs méga-octets chacune.
Besoin de vous faire accompagner par une Agence Web ? Contactez-nous !