Comment l'ajouter à votre site Web –

Cet article sur le chargement paresseux pour WordPress a été publié à l'origine par par Torque Magazine et est reproduit ici avec autorisation.

L'ajout de chargement paresseux à votre site Web WordPress est un outil efficace pour accélérer votre site Web WordPress. . Nous avons beaucoup écrit (nous avons même réalisé une étude de cas ) sur la lenteur avec laquelle la vitesse de chargement des pages a un effet négatif sur les conversions, le référencement et d'autres marqueurs du succès en ligne. Plus votre site sera chargé rapidement, mieux ce sera.

Deux des facteurs les plus importants qui ralentissent les sites sont les requêtes HTTP et le poids des pages. Naturellement, plus le navigateur doit envoyer de requêtes au serveur, plus le traitement du site sera long. En même temps, plus votre page est large (par exemple, car elle contient de nombreuses images), plus son chargement sera long.

Le chargement différé est une technique qui prend en compte ces deux facteurs. Cela signifie retarder le chargement de certaines parties d'une page Web jusqu'à ce qu'elles soient réellement nécessaires. C’est aussi le sujet de ce billet de blog. Dans ce qui suit, vous apprendrez comment fonctionne le chargement paresseux, ses avantages et inconvénients, ainsi que les moyens d'ajouter du chargement paresseux à WordPress.

J'espère que vous n'êtes pas trop paresseux pour continuer à lire!

Qu'est-ce que Lazy Load?

Comme déjà mentionné, le chargement différé est un moyen d'empêcher le navigateur de charger initialement des parties de pages Web – généralement des images – et de les remplacer par des espaces réservés. De cette façon, la page devient plus petite et moins de données doivent être transférées du serveur au navigateur.

Le résultat: un site Web à chargement plus rapide et des utilisateurs plus satisfaits.

Mais attendez, vous n’avez pas besoin de ces parties de votre site? Si vous ne le faisiez pas, ils ne seraient pas là, non?

Eh bien, c’est là que le paresseux entre en charge paresseux. Cette technique n'interdit pas simplement au navigateur de charger des éléments et des images, mais la retarde simplement jusqu'à ce qu'ils soient réellement utilisés.

Par exemple, il n'est pas nécessaire qu'une image apparaisse sur la page jusqu'à ce qu'un visiteur défile suffisamment pour voir le contenu. il. En conséquence, le navigateur n’a pas vraiment besoin de le charger jusqu’à ce que cela se produise. C'est exactement ce que fait la charge paresseuse.

(En passant, il existe d'autres moyens d'optimiser les images sur votre site Web pour les rendre plus rapides à charger.)

Cas d'utilisation avec charge paresseuse

Web, la charge paresseuse est le plus souvent utilisé pour les images. Vous l'avez probablement déjà vu sur des sites populaires tels que Buzzfeed, qui utilisent cette technique pour faire apparaître plus rapidement leurs listicules dans les navigateurs de leurs utilisateurs.

Cependant, ce n'est pas la seule chose que la charge paresseuse est capable de retarder. D'autres exemples sont les vidéos, les scripts et les commentaires. En fait, déplacer des fichiers JavaScript au bas de page est une technique courante pour accélérer les temps de chargement de page .

Vous devez également savoir que YouTube ne charge les commentaires que lorsque vous les faites défiler. Ainsi, la plate-forme vous permet de regarder votre vidéo plus rapidement. Si cela leur convient, pourquoi pas pour vous?

Il existe également une application spéciale de chargement paresseux appelée défilement infini. C’est une alternative à la pagination classique dans laquelle des publications supplémentaires sont chargées lorsque l’utilisateur atteint le bas de la page. Vous pouvez le voir sur Pinterest ou si vous êtes un utilisateur de Pocket.

Il élimine beaucoup de clics et peut s'avérer très utile pour l'expérience utilisateur. Cependant, le parchemin infini n'est pas controversé et ne fera pas l’objet de cet article

Avantages de la charge paresseuse

Le principal avantage de la charge paresseuse est déjà évident: des temps de chargement plus rapides. Lorsque vous pouvez réduire considérablement le poids de votre page, celle-ci apparaît naturellement beaucoup plus rapidement dans le navigateur.

En outre, vous économisez une bande passante considérable. Ceux qui utilisent la connexion de données sur leur appareil mobile seront particulièrement reconnaissants. En plus de voir votre site plus rapidement, ils ne doivent pas non plus gaspiller leur plan en images qu'ils ne verront peut-être jamais voir.

Inconvénients de l'utilisation de la charge paresseuse sur votre site

arcs en ciel. Cette technique présente également certains inconvénients.

Tout d’abord, elle n’est pas toujours conviviale pour les moteurs de recherche. Lorsque vous retardez le chargement des ressources pour les visiteurs, vous faites de même pour les spiders des moteurs de recherche. En conséquence, ils pourraient ne pas indexer une partie de votre contenu, ce qui, bien sûr, n’est pas bon pour le référencement. Même si des solutions de contournement existent . Naturellement, il s’agit d’un problème plus important lors de l’utilisation de la charge différée pour les publications et pas seulement pour les images (c’est pourquoi nombre d’entre elles s’éloignent de celle-ci).

Une autre préoccupation est l’expérience utilisateur. Lorsque vous faites défiler votre site très rapidement, le remplacement des images d’espace réservé par des éléments visuels peut faire sauter le contenu de la page, ce qui peut être gênant.

Alors, quel est le verdict sur la charge paresseuse? En bref: utilisée dans certaines limites, cette technique peut accélérer considérablement le chargement de votre site WordPress, mais vous devez garder un œil sur le référencement et l'expérience utilisateur.

Comment ajouter du Lazy Load à WordPress via un plugin

Il est possible d'ajouter manuellement une charge paresseuse à WordPress (voir le tutoriel de Jay Hoffmann sur la page Thèmes élégants), l'alternative beaucoup plus simple consiste à utiliser l'un des plugins ci-dessous. La plupart des offres présentées ici sont de simples solutions que vous devez uniquement activer, sans aucune configuration. La plupart d'entre eux sont également très légers.

Pour cette raison, ajouter du contenu paresseux à WordPress sans plugin me semble être un effort inutile (à moins que vous ne le fassiez pour améliorer vos performances techniques, ce qui est une raison légitime). Pour la plupart des utilisateurs, il est préférable de choisir l’un des nombreux plug-ins de chargement paresseux proposés par la sphère WordPress.

Lazy Load

Notre premier candidat est la solution gratuite la plus populaire pour le chargement paresseux des images. Il a plus de 90 000 installations et une solide cote 4 étoiles. Sa popularité peut s’expliquer en partie par le fait que l’équipe Automattic y a contribué.

Le plug-in Lazy Load utilise jQuery.sonar pour charger des images uniquement lorsqu'elles apparaissent dans la fenêtre de visualisation (la partie du site que vous voir sur votre appareil). Le plug-in décompressé ne fait que 20 Ko et il vous suffit de l'installer et de l'activer. Aucune configuration nécessaire.

BJ Lazy Load

Le meilleur finaliste du plugin WordPress paresseux est BJ Lazy Load. Il propose plus de 60 000 installations et des cotes similaires.

Ce plug-in remplace toutes les images et les iframes (y compris les vidéos YouTube et Vimeo) de votre contenu par un espace réservé jusqu'à ce qu'ils soient visionnés. Installez, activez et vous êtes prêt à partir.

Lazy Load de WP Rocket

Nous avons ici un plugin du même fabricant le plugin de cache populaire WP Rocket. Il peut charger paresseusement des images et / ou des iframes, notamment des vignettes, le contenu des widgets, des avatars et des smileys. De plus, le plugin n’utilise aucune bibliothèque JavaScript. C’est probablement l’une des raisons pour lesquelles il pèse moins de 10 Ko.

Plus de 10 000 sites Web font confiance à Lazy Load de WP Rocket, qui semble donc bien faire son travail. Le site du plugin dans le répertoire WordPress contient également du code permettant de désactiver sélectivement le chargement différé de pages ou d'images ou de modifier son seuil de chargement. Sinon, aucune option de configuration n'est disponible.

a3 Lazy Load

a3 Lazy Load prétend être “le plus complet, incroyablement facile à définir plug-in de chargement paresseux pour WordPress. ”Il s'agit également d'une des rares entrées de cette liste livrée avec certains paramètres.

Le plug-in est adapté au chargement paresseux d'images, de vidéos et d'iframes dans des publications, des pages, des widgets, des miniatures et / ou avatars. Il est également compatible avec WooCommerce (consultez notre Guide du débutant pour WooCommerce ).

a3 Lazy Load propose même des images à effets qui apparaissent sur le site. Comme si cela ne suffisait pas, il vous permet également de choisir de charger son script dans l'en-tête ou le pied de page (un plugin de chargement paresseux qui se charge lui-même, comme la méta) et d'ignorer les images ou les vidéos.

Enfin, il est compatible avec une multitude de plug-ins de mise en cache et mobiles ainsi que de réseaux de diffusion de contenu. Je commence à comprendre que leur demande pourrait ne pas être entièrement non fondée.

Crazy Lazy

L'une des principales raisons pour lesquelles j'ai inclus ce plugin est son logo génial. Je veux dire, regarde cet escargot!

Cependant, à part ça, c’est aussi un plugin de chargement paresseux pour les images qui utilise très peu de ressources. Crazy Lazy est livré avec les fonctionnalités habituelles et empêche le chargement des images avant que l'utilisateur ne les voie. Aucune configuration nécessaire, il suffit de l'activer et vous êtes bon.

Si vous voulez configurer quelque chose, vous pouvez définir vos propres images de marque de réservation via CSS (la page du plugin contient le code correspondant) et exclure des images code pour cela aussi.]

Accélération – Chargement paresseux

Un autre plugin qui conserve les images et les iframes du chargement jusqu’au besoin. Seulement 5KB légers (ces développeurs sont-ils en concurrence pour créer le plus petit plugin?) Et sans aucun besoin de configuration. Il possède un shortcode pour désactiver le chargement différé chaque fois que cela n’est pas nécessaire et vous permet également de le désactiver pour des images uniques. Jusqu'ici, seules plus de 3 000 installations ont été installées, mais il est classé 5 étoiles.

WordPress Infinite Scroll – Ajax Load More

[19659004] Nous avions parlé du défilement infini précédemment, voici maintenant un plug-in pour l'ajouter à votre site.

WordPress Infinite Scroll vous permet de charger paresseux les publications, les publications uniques, les pages, les commentaires et d'autres éléments de page en créant vos propres codes courts personnalisés. Vous pouvez interroger différents types de contenu par type de message ou format, date, catégorie, étiquette et bien plus encore. Après cela, vous pouvez ajouter les codes abrégés soit dans l'éditeur de texte de WordPress soit dans des modèles

. Ce plugin fonctionne également avec WooCommerce et Easy Digital Downloads et propose un certain nombre d'addons premium.

WP YouTube Lyte

Notre dernière entrée est un plugin de chargement paresseux destiné uniquement au contenu vidéo. Il vous permet de saisir des liens YouTube spéciaux qui ne chargent le lecteur YouTube que par clic, pas plus tôt.

En gros, il vous suffit de changer une lettre dans votre lien pour le faire fonctionner. Vous pouvez également utiliser des codes abrégés pour saisir du contenu vidéo ou faire en sorte que le plug-in analyse automatiquement les liens YouTube. De plus, il vous permet d'insérer uniquement la partie audio si nécessaire.

Pour une alternative, vérifiez Lazy Load pour vidéos .

Lazy Load et WordPress en bref

. Pour être un facteur important pour l'expérience utilisateur et le référencement, la charge paresseuse est un autre outil de votre boîte à outils pour l'améliorer. La technique réduit le poids de la page et les requêtes HTTP, permettant ainsi aux visiteurs de voir plus rapidement la page de leur choix.

Ci-dessus, nous avons expliqué le fonctionnement du chargement paresseux et son utilisation. Outre son application principale pour les images, vous pouvez également l'appliquer à des vidéos, des scripts, des commentaires et même des publications et des pages.

Bien que vous deviez faire attention au référencement, si utilisé correctement, la paresseuse reste une bonne option pour rendez votre site WordPress plus rapide. Si vous voulez l'essayer, l'un des plugins de cette liste est certainement en mesure de répondre à vos besoins.

Nick Schäferhoff est un entrepreneur, un professionnel du marketing en ligne et un blogueur allemand. Lorsqu'il ne construit pas de site Web, ne crée pas de contenu ou n'aide pas ses clients à améliorer leurs activités en ligne, il est le plus souvent au gymnase, au dojo ou dans le monde entier avec sa femme. Vous pouvez le contacter via Twitter ou via son ​​site Web .