Vous savez probablement déjà à quel point le temps de chargement de votre site WordPress est important pour votre succès. Mais avez-vous vraiment tout fait pour accélérer votre site ? Bien sûr, vous avez probablement fait les bases comme choisir un excellent hébergeur WordPress et installer un plugin de mise en cache. Mais avez-vous essayé de charger paresseux une partie de votre contenu WordPress ?

Dans cet article, je vais vous expliquer ce qu'est le chargement paresseux et comment il peut améliorer les performances de votre site. Ensuite, je vous montrerai comment charger paresseusement trois zones clés de votre site WordPress :

  • commentaires
  • Images
  • Vidéos youtube

Creusons…

Qu'est-ce que le Lazy Load ?

Vos parents et vos professeurs vous ont probablement inculqué que la paresse est mauvaise. Mais permettez-moi d'exprimer une opinion dissidente :

La paresse est bonne… quand elle accélère votre site WordPress.

Le chargement différé est une astuce d'optimisation des performances qui fonctionne en retardant le chargement de certains actifs après le chargement initial de la page. C'est un peu du jargon, alors regardons-le en termes réels.

Lorsqu'un utilisateur charge votre page pour la première fois, il ne voit que le contenu sur son écran visible (également connu sous le nom de contenu au-dessus du pli), n'est-ce pas ?

Par conséquent, tout contenu qui se trouve sous le pli (c'est-à-dire hors de vue) n'a pas nécessairement besoin d'être chargé immédiatement. Le chargement paresseux retarde essentiellement le chargement d'une partie de ce contenu jusqu'à ce qu'un visiteur commence à faire défiler vers le bas, auquel cas il devient nécessaire de tout charger.

Comment le chargement paresseux rend-il votre site WordPress plus rapide ?

Il s'agit de réduire la taille de votre page et le nombre de requêtes.

Par exemple, saviez-vous qu'en moyenne, 65% de votre page la taille est composée d'images ? En nombres réels, cela signifie :

  • La page moyenne est d'environ 2 Mo
  • 1,3 Mo provenant exclusivement d'images

Le chargement paresseux vous permet de réduire une grande partie de cela du chargement initial de la page. Une astuce courante consiste à charger paresseusement toutes les images de vos articles de blog. De cette façon, vous n'avez besoin de charger ces images volumineuses qu'une fois qu'un visiteur commence à interagir avec votre page.

Presque juste derrière les images, les vidéos représentent encore 10 % de la taille moyenne d'une page Web, ce qui en fait une autre bonne cible pour le chargement paresseux.

Et enfin, une troisième cible courante de chargement paresseux pour WordPress est votre section de commentaires. Sur tous les thèmes WordPress que j'ai jamais vus, les commentaires sont situés sous les publications et les pages. Par conséquent, vous n'avez vraiment pas besoin de les charger jusqu'à ce que les lecteurs commencent à faire défiler la page.

Le chargement paresseux des commentaires devient particulièrement important si vous utilisez un système de commentaires tiers comme Disqus ou les commentaires Facebook. Ces systèmes ajoutent des requêtes supplémentaires qui ralentiront inutilement les temps de chargement de votre page si elles sont chargées immédiatement.

Assez de théorie – voyons comment vous pouvez réellement charger paresseux vos commentaires WordPress, vos images et vos vidéos YouTube.

Comment charger paresseusement les commentaires WordPress

Voici le problème avec le chargement paresseux des commentaires WordPress :

Le plugin exact dont vous avez besoin dépendra du système de commentaires que vous utilisez. Heureusement, un développeur a créé des plugins séparés pour :

  • Commentaires WordPress natifs
  • Commentaires sur Disqus
  • Commentaires Facebook

Je vais vous montrer comment configurer chaque…

Comment charger paresseux les commentaires WordPress natifs

Les commentaires natifs de WordPress sont le système de commentaires fourni avec chaque installation de WordPress. À moins que vous n'installiez un plugin pour changer la façon dont vous gérez les commentaires, vous utilisez des commentaires WordPress natifs.

Pour ajouter un chargement paresseux aux commentaires WordPress natifs, vous aurez besoin d'un plugin gratuit appelé Lazy Load pour les commentaires. Vous pouvez l'installer directement depuis votre tableau de bord en vous rendant sur Plugins → Ajouter un nouveau et le chercher:

Comment charger paresseusement les commentaires WordPress

Une fois que vous l'avez activé, vous pouvez configurer Lazy Load pour les commentaires en allant sur Paramètres → Discussion et trouver le Lazy Load Commentaires option:

lazy load wordpress comments native 2 - Sabma Digital

Comme vous pouvez le voir, il n'y a qu'un seul menu déroulant à configurer. Mais, c'est un réglage assez important. Voici ce que signifie chaque choix dans la liste déroulante :

  • Par défilement – les commentaires commenceront à se charger automatiquement lorsque vos visiteurs feront défiler la page. Fait ne pas exiger une action de votre visiteur.
  • Sur clic – les commentaires ne se chargeront que lorsque vos visiteurs cliqueront sur un Charger les commentaires bouton. Fait exiger une action de votre visiteur.
  • Pas de chargement paresseux – désactive complètement la fonctionnalité de chargement paresseux.

Pour référence, voici ce que Sur clic l'option ressemble à :

lazy load wordpress comments native 3 - Sabma Digital

Une fois que vous avez fait votre sélection, vous avez terminé ! Vos commentaires vont maintenant commencer le chargement paresseux.

Comment charger paresseux les commentaires Disqus WordPress

Si vous utilisez Disqus, le chargement paresseux est un must absolu. Disqus ajoute un certain nombre de requêtes externes supplémentaires à votre site. Sans chargement paresseux, ceux-ci peuvent ralentir votre site.

Pour charger paresseusement les commentaires Disqus, vous pouvez utiliser le Charge conditionnelle Disqus brancher. Comme Lazy Load for Comments, il est gratuit et peut être installé directement depuis votre tableau de bord WordPress.

Remarque – Disqus Conditional Load est un plugin autonome. Cela signifie qu'il gère l'intégration des commentaires Disqus dans votre site ainsi que l'ajout de chargement paresseux. Si vous utilisez déjà le plugin Disqus officiel, vous devrez le désactiver avant d'installer Disqus Conditional Load.

lazy load wordpress comments disqus 1 - Sabma Digital

Une fois que vous avez activé Disqus Conditional Load, vous pouvez configurer ses paramètres en accédant au Paramètres DCL option dans la barre latérale de votre tableau de bord.

Tout d'abord, vous devez configurer la fonctionnalité de commentaire de base de Disqus :

lazy load wordpress comments disqus 2 - Sabma Digital

Une fois que vous avez configuré les commentaires Disqus, vous pouvez configurer la façon dont vous souhaitez qu'ils se chargent paresseux. Vous avez exactement les mêmes options que Lazy Load pour les commentaires :

  • Sur clic – oblige les visiteurs à cliquer sur un Charger les commentaires bouton.
  • Par défilement – les commentaires se chargeront automatiquement lorsque les visiteurs feront défiler la page.
  • Normal (Désactiver le chargement paresseux)

lazy load wordpress comments disqus 3 - Sabma Digital

Si vous faites défiler vers le bas, vous pouvez également personnaliser les messages que vos visiteurs verront pendant la méthode de chargement paresseux que vous avez choisie.

Comment charger paresseux les commentaires Facebook WordPress

Enfin, si vous utilisez les commentaires Facebook pour WordPress, vous avez besoin d'un plugin appelé Lazy Facebook Comments. Ce plugin provient du même développeur que les deux plugins précédents, vous pouvez donc vous attendre à une interface et à un processus de configuration similaires.

Comme Disqus Conditional Load, Lazy Facebook Comments est un plugin autonome. Cela vous aidera à la fois à ajouter et à charger paresseux des commentaires Facebook pour WordPress.

Vous pouvez l'installer directement depuis votre tableau de bord WordPress :

lazy load wordpress comments facebook 1 - Sabma Digital

Ensuite aller à Paramètres → Commentaires FB paresseux pour le configurer. Tout d'abord, vous devrez ajouter votre identifiant d'application Facebook (si vous n'avez pas encore d'identifiant d'application, voici les instructions pour en obtenir un):

lazy load wordpress comments facebook 2 - Sabma Digital

Une fois que vous avez ajouté votre ID d'application, vous devriez avoir une section de commentaires Facebook fonctionnelle. Ensuite, il vous suffit de faire défiler la page des paramètres et de configurer la manière dont vous souhaitez que vos commentaires se chargent paresseusement :

lazy load wordpress comments facebook 3 - Sabma Digital

Sur cette page, vous pouvez également configurer des paramètres généraux tels que le nombre de commentaires à afficher et la manière de trier les commentaires.

Comment charger paresseusement des images WordPress

Maintenant que vous avez supprimé le chargement paresseux pour votre section de commentaires, passons au candidat suivant : les images.

Pour charger vos images paresseusement, je recommande un plugin appelé Charge paresseuse.

Pourquoi ce plugin ? Tout d'abord, il vient d'Automattic, ce qui me donne une confiance supplémentaire dans sa qualité. Et deuxièmement, tout ce que vous avez à faire est de l'installer, de l'activer et de profiter de vos images chargées paresseusement.

Vous pouvez installer Lazy Load directement depuis votre tableau de bord WordPress. Allez juste à Plugins → Ajouter un nouveau et recherchez :

Comment charger paresseusement des images WordPress

Une fois que vous l'activez, vous avez terminé ! Vos images retarderont désormais le chargement jusqu'à ce qu'elles arrivent dans les fenêtres actives de vos visiteurs.

Il y a un autre plugin que j'aime appelé BJ charge paresseuse. Cela vous donne plus de flexibilité sur les images que vous chargez paresseux et sur le fonctionnement du chargement paresseux.

Si vous voulez plus d'options de personnalisation, jetez-y un coup d'œil. Sachez simplement que j'ai lu plusieurs rapports indiquant qu'il engloutissait l'utilisation du processeur – alors l'acheteur doit se méfier.

Comment charger paresseusement des vidéos YouTube sur WordPress

Si vous intégrez des tonnes de vidéos YouTube dans vos publications, vous devriez envisager de les charger paresseux pour réduire les demandes externes inutiles et réduire la taille de votre page.

Pour charger paresseusement des vidéos YouTube, vous pouvez utiliser WP YouTube Lyte. Le plugin fonctionne en utilisant des intégrations YouTube “lite”. Ils ressemblent à la réalité, mais ne chargent que le lecteur HTML5 plus gourmand en ressources lorsqu'on clique dessus.

Pour commencer, installez-le en allant sur Plugins → Ajouter un nouveau et recherche :

Comment charger paresseusement des vidéos YouTube WordPress

Ensuite, configurez-le en allant sur Paramètres → WP YouTube Lyte. Pour de meilleures performances, vous devez saisir une clé API YouTube. Bien qu'il ne soit pas nécessaire à 100% pour que le plugin fonctionne, le développeur le recommande pour des performances optimales.

Générez votre clé API YouTube en suivant ces consignes. Ensuite, entrez-le dans les paramètres et cliquez sur Clé d'essai :

lazy load wordpress videos 2 - Sabma Digital

Si votre clé fonctionne, vous êtes prêt à voler ! Si vous le souhaitez, vous pouvez également configurer des paramètres supplémentaires pour l'affichage de vos vidéos, mais aucun n'est requis.

Maintenant, tout ce que vous avez à faire est d'intégrer des vidéos YouTube comme d'habitude. À première vue, vos vidéos YouTube intégrées auront le même aspect. Mais si vous creusez dans le code source, vous verrez que le plugin génère en fait un .jpg léger au lieu d'une intégration YouTube complète :

lazy load wordpress videos 3 - Sabma Digital

Une fois que vos visiteurs auront cliqué, le véritable lecteur YouTube chargera et lira automatiquement la vidéo.

Conclure les choses

Le chargement paresseux seul ne vous donnera pas un site WordPress ultra rapide. Mais dans le cadre d'une stratégie plus large, c'est un excellent moyen d'extraire des performances supplémentaires de votre site. Alors, assurez-vous que vous suivez déjà les conseils de notre guide ultime pour accélérer WordPress. Ensuite, ajoutez ces outils de chargement paresseux pour augmenter encore plus votre vitesse.

Si vous testez les performances de votre site Web avant et après, je parie que vous constaterez une amélioration.