WordPress Lazy Loading : comment l'ajouter à votre site

Publié: 2023-03-09

Avoir une bonne vitesse de chargement des pages est important pour offrir une bonne expérience utilisateur et cela vous aide également à améliorer votre classement dans les moteurs de recherche. Lorsqu'il s'agit de créer un site Web en ligne ou un site Web d'entreprise, aucun autre CMS ne peut être un meilleur pari que WordPress.

Le lazy loading est la meilleure stratégie pour avoir beaucoup de ressources médias tout en gardant un bon temps de chargement pour votre site web. Il s'agit d'une stratégie critique qui identifie les ressources non critiques et ne les charge que lorsqu'elles sont nécessaires. L'utilisation de cette stratégie réduit le temps de chargement des pages, réduit le taux de rebond et améliore l'expérience client.

WordPress est un CMS de premier plan qui vous permet d'intégrer des vidéos, des images et d'autres médias dans votre site Web. Cependant, la nouvelle version est également livrée avec la fonctionnalité de chargement paresseux de WordPress.

Une fois que vous avez activé la fonction de chargement paresseux de WordPress, toutes les images ou vidéos étonnantes de votre site passeront par un chargement paresseux.

Chargement paresseux de WordPress

Désormais, les visiteurs pourront charger votre site rapidement et accéder au contenu. Cette tactique est fortement recommandée si les revenus de votre entreprise dépendent de votre site Web WordPress.

Qu'est-ce que le chargement différé et comment ça marche ?

Le chargement différé est une technique d'optimisation qui rend le chargement du contenu visible pour l'utilisateur et retarde le téléchargement et le rendu du contenu en dessous de la ligne de flottaison.

Si votre site Web contient de nombreuses images et vidéos haute résolution, votre site n'a pas à se charger lentement. Il peut donner la priorité à ces images et vidéos critiques, ce qui réduit beaucoup le temps de chargement.

Voilà comment cela fonctionne:

  • Le navigateur construit la page Web DOM sans télécharger d'images ni précharger de vidéos.
  • Les images qui seront téléchargées et les vidéos à précharger sont basées sur le contenu initialement visible déterminé par JavaScript.
  • Le chargement différé ne charge une image ou une vidéo que lorsqu'un visiteur la visualise à l'écran.

Les images et les vidéos ne sont pas chargées à l'avance jusqu'à ce qu'elles soient réellement nécessaires. Si vous n'accédez pas à plusieurs parties du site Web, certaines de ces images ne seront jamais chargées.

Le chargement paresseux est essentiellement le chargement basé sur la priorité de vos images et vidéos WordPress. C'est un moyen extrêmement efficace d'obtenir le meilleur des deux mondes. Vous pouvez avoir à la fois un site Web incroyable avec de superbes graphismes et de la vitesse.

Comment ajouter le chargement paresseux WordPress à votre site Web

Il existe deux façons d'ajouter du chargement différé à votre site. Vous pouvez le faire avec un plugin WordPress et manuellement. Pour assurer le succès de cette tâche, il est important de connaître les deux méthodes.

1. Implémenter le chargement paresseux à l'aide d'un plugin

Vous pouvez éliminer tous vos problèmes de chargement paresseux WordPress en installant un plugin. Il existe de nombreux plugins disponibles sur WordPress mais l'utilisation d'un plugin d'optimisation de la vitesse apportera d'autres avantages.

Vous pouvez utiliser des plugins comme w3speedster qui optimiseront la vitesse globale du site tout en implémentant le chargement paresseux. Vous avez un contrôle absolu sur les images que vous pouvez charger paresseux et tout cela peut être fait sans aucun codage.

Si votre équipe n'a pas beaucoup d'expertise technique, l'utilisation d'un plugin sera la meilleure option. Une fois que vous avez terminé d'utiliser le plugin, vérifiez votre vitesse via PageSpeed ​​Insights. Si vous constatez une amélioration drastique, vous avez fait le travail correctement !

Vous pouvez être assuré que vos visiteurs seront accueillis avec une excellente expérience utilisateur.

Suivez ces étapes pour ajouter avec succès le plugin w3speedster à votre site Web.

Étape 1 : Installer et activer le plugin

Accédez au tableau de bord WordPress, cliquez sur la section plugin, puis cliquez sur ajouter nouveau. Trouvez le plugin w3speedster et cliquez sur télécharger. Sélectionnez le fichier zip puis cliquez sur installer.

Avant que le processus d'installation ne puisse commencer, WordPress vous demandera de confirmer si vous souhaitez ajouter le plugin à votre site ou non. Sélectionnez Oui et le processus d'installation commencera.

Une fois le plugin activé, vous pouvez commencer à profiter de ses avantages. Cependant, avant cela, vous devriez vous diriger vers la section des paramètres.

Étape 2 : Utilisez le panneau de configuration pour configurer le plug-in

Accédez au plugin w3speedster afin de pouvoir configurer les paramètres de chargement différé. Ici, vous pouvez sélectionner les fichiers multimédias que vous souhaitez que votre site charge paresseusement.

Ce plugin vous permet de charger paresseusement des images, de la vidéo, de l'audio et de l'iframe. Cliquez sur les cases à cocher des fichiers multimédias que vous souhaitez charger paresseusement. Une fois que vous avez fait votre choix, enregistrez les modifications, puis quittez.

2. Ajoutez manuellement le chargement paresseux

Si vous ne souhaitez pas ajouter un autre plugin à votre site WordPress, vous serez heureux de savoir que vous pouvez également le faire manuellement. Plusieurs navigateurs comme Chrome, Firefox et Opera prennent en charge le chargement paresseux natif.

Il vous suffit d'ajouter le attribuer aux images et vidéos sélectionnées. Une fois que vous avez ajouté l'attribut, vous activez automatiquement le chargement différé sur votre site.

Le chargement différé est désormais implémenté par défaut sur votre site WordPress. Si vous souhaitez activer le chargement différé uniquement pour quelques images, vous pouvez le faire manuellement.

<img src=”nom-image.png” chargement=”paresseux” alt=”attribut alt” largeur=”300″ hauteur=”300″>

Bien que ce soit un moyen incroyable d'ajouter un chargement paresseux à votre site Web WordPress. Vous devez savoir que tous les navigateurs ne prennent pas en charge cette méthode. Cependant, certains des plus populaires le font. Cela reste donc une valeur sûre.

Avantages et inconvénients du chargement paresseux

Si vous n'êtes pas sûr de mettre en œuvre le chargement paresseux sur votre site Web WordPress. Ensuite, vous pouvez considérer les avantages et les inconvénients pour prendre une décision.

Avantages

  • Il réduit l'utilisation de la bande passante, ce qui réduit les coûts d'hébergement.
  • Il améliore la vitesse du site, ce qui améliore l'expérience du visiteur.
  • Améliore la convivialité mobile.
  • Améliore le classement du site.
  • Augmente les chances de rétention des utilisateurs

Les inconvénients

  • Il ralentit la vitesse de défilement.

Quel est l'impact du chargement différé sur le référencement ?

Les moteurs de recherche explorent votre site Web et d'autres éléments comme des images pour fournir un résultat à l'utilisateur. Bien que le chargement paresseux puisse augmenter la vitesse du site et améliorer les performances.

Dans certains cas, cela peut empêcher les moteurs de recherche d'indexer les images. Les images de votre site Web peuvent également vous aider à vous classer sur les moteurs de recherche. Parfois, un utilisateur peut trouver votre site Web entièrement grâce à une image. Ils sont donc essentiels pour obtenir des résultats organiques.

Voici quelques points à vérifier

  • Vous devez vous assurer que Google et les autres moteurs de recherche sont toujours capables d'explorer vos images chargées paresseusement. Cela peut être vérifié en utilisant l'outil "Explorer comme Google" dans la section d'exploration de Google Search Console. Si vous pouvez voir les images dans le code source, alors vous êtes prêt à partir.
  • Vous devez utiliser une balise alt pour les images de votre site Web. Cela aidera les moteurs de recherche à connaître le contexte de l'image et son lien avec le reste du contenu de votre site Web.

Conclusion

Bien que le chargement différé soit une excellente méthode pour améliorer l'expérience utilisateur, il est important de faire de même de manière stratégique. Par exemple, vous ne devez pas charger paresseux les images qui apparaissent sur l'en-tête du site. Parce qu'il est important que ces images se chargent rapidement.

En dehors de cela, vous pouvez charger paresseux le reste des médias du site. Le chargement différé a plus d'un avantage. Il améliore la vitesse du site, réduit l'utilisation de la bande passante, offre une expérience utilisateur exceptionnelle et améliore le référencement.