Les meilleurs plugins de chargement paresseux pour WordPres

Les images, infographies et effets de fantaisie sont tous d’excellents outils pour promouvoir tout type de contenu sur un site Web. Ils attirent à coup sûr l’attention et peuvent transmettre l’essence du contenu dans un seul cadre. Pas étonnant que nous comptions sur les images pour attirer l’attention du lecteur et améliorer l’engagement des utilisateurs sur Internet.


D’un autre côté, les images prennent souvent du temps à charger sur une page Web. Et si vous êtes sur une connexion lente, il peut sembler que le chargement prend une éternité. Cela peut être un gros coup d’arrêt pour les utilisateurs, qui s’éloigneront probablement de la page.

Avertissement: WPExplorer est affilié pour un ou plusieurs produits répertoriés ci-dessous. Si vous cliquez sur un lien et effectuez un achat, nous pourrions faire une commission.

Comment accélérer le chargement des pages lourdes d’images?

Pourquoi les images prennent-elles du temps à charger? Eh bien, nous pouvons l’expliquer comme ceci – une page Web est composée de nombreux éléments – texte, images, médias, script et plus encore. Pour charger chaque élément, votre navigateur fait une demande au site Web (appelée demande HTTP). De nombreux éléments, en particulier les images, sont lourds en octets et prennent du temps à se charger. Normalement, tous les éléments essaient de se charger en même temps, ce qui retarde le chargement de la page Web entière.

La chose logique à faire est de faire en sorte que le contenu à chargement rapide apparaisse d’abord sur le navigateur et retienne l’attention du spectateur. En même temps, retardez le chargement des images lourdes de données. Cette approche est susceptible de persuader les utilisateurs d’attendre car il y a quelque chose sur l’écran pour retenir leur attention.

Qu’est-ce que le chargement paresseux?

Nous pouvons retarder les images à l’aide de la technique de chargement paresseux – ne chargez que le texte ou le contenu sélectionné en premier et laissez les images ou les éléments de chargement lent à la traîne. Le chargement des images est échelonné, ce qui améliore le temps de premier octet de la page Web. Lorsqu’un utilisateur fait défiler vers le bas, les images sont extraites une par une. Par conséquent, le nombre de requêtes HTTP atteignant le serveur en même temps est réduit.

Les images sont placées dans un espace réservé, pour être chargées ultérieurement. Lorsque les images atteignent la zone de visualisation, elles sont extraites du serveur. Ils apparaissent à l’écran lorsqu’ils se déplacent vers la zone «au-dessus du pli». En cas de défilement infini, ajax est utilisé pour charger plus lorsque l’utilisateur frappe le bas de l’écran.

Comment le chargement paresseux peut aider

Le chargement paresseux réduit les temps de chargement. Un site Web plus rapide est bon pour l’expérience utilisateur et les moteurs de recherche. Il réduit également la bande passante du serveur en ne chargeant les images qu’en cas de besoin. Cela économise de la bande passante, à la fois côté serveur et côté utilisateur. Vous pouvez appliquer un chargement paresseux aux pages sélectionnées ou à l’échelle du site.

Un inconvénient du chargement paresseux est que le contenu qui vient après le pli peut ne pas être trouvé par les moteurs de recherche. Les moteurs de recherche peuvent ne pas reconnaître le contenu à défilement infini. Pour surmonter cet inconvénient au moins en partie, nous devons structurer les URL afin qu’elles puissent être traitées par les moteurs de recherche. Cela peut rendre les espaces réservés plus visibles pour les moteurs de recherche jusqu’à ce que l’image se charge.

Il existe un certain nombre de plugins qui peuvent faire fonctionner le chargement paresseux sur votre site Web WordPress. Voyons quelques-uns des plugins populaires,

BJ Lazy Load

Pour remplacer tout ou partie de vos images de publication, miniatures de publication, images gravatar et iframes de contenu par un espace réservé, utilisez BJ Lazy Load. Il peut également remplacer les iframes, ce qui signifie que vous pouvez charger paresseusement des vidéos intégrées à partir de YouTube et Vimeo. Fonctionne également pour les widgets de texte. À l’aide d’un simple filtre, les images et les iframes de votre thème peuvent être retardés.

bj-lazy-load

Pour que le plugin fonctionne sur votre site Web, il vous suffit de télécharger, d’installer et d’activer. Vous pouvez ensuite visiter les paramètres et déterminer quels éléments doivent être retardés lors du chargement. Ajoutez votre propre image d’espace réservé, si vous le souhaitez.

Ce plugin utilise JavaScript. En conséquence, un visiteur sans JavaScript verra les éléments d’origine sans aucun chargement retardé.

Charge paresseuse

Un plugin couramment utilisé pour ajouter un chargement paresseux aux sites Web WordPress, Charge paresseuse est un simple plugin d’installation et d’activation. Vous pouvez l’essayer en toute confiance, sachant qu’il est développé à l’aide d’un mélange de code de l’équipe VIP WordPress.com chez Automattic, de l’équipe de refonte de TechCrunch 2011 et de Jake Goldman (10up LLC).

paresseux

De plus, vous n’avez rien d’autre à faire après l’activation. Cependant, si vous souhaitez apporter des modifications, vous pouvez le faire en modifiant le fichier php. Les auteurs ont fourni des extraits de code utiles auxquels vous pouvez vous référer pour modifier l’image d’espace réservé, pour charger des images paresseusement dans votre thème ou pour charger paresseusement toutes vos images par tampon de sortie.

Ajax Load More – Défilement infini

Ajax Charger plus est apte au chargement retardé sur les pages Web longues qui sont affichées en faisant défiler vers le bas. Utilisez-le pour les messages de chargement paresseux, les types de messages personnalisés, les messages uniques, les pages et les commentaires.

ajax-load-more

De plus, vous pouvez utiliser le Shortcode Builder pour encadrer des requêtes WordPress personnalisées. Ajoutez le shortcode généré aux pages que vous sélectionnez via l’éditeur de contenu ou directement aux fichiers de modèle. Affichez la page depuis le frontal et cochez Ajax Load More en chargeant le contenu même lorsque vous faites défiler vers le bas.

De plus, Ajax Load More fonctionne très bien avec WooCommerce et Easy Digital Downloads, il convient donc aux longues pages de produits.

Lazy Load pour les vidéos

Si vous gérez un site Web qui contient un certain nombre de vidéos intégrées, celle-ci est pour vous. Lazy Load pour les vidéos remplace vos vidéos intégrées par une image cliquable. La page Web ne charge pas les vidéos dès qu’un visiteur appelle la page. Les vidéos sont chargées uniquement lorsque l’image est cliquée.

lazy-load-for-videos

Le plugin inspecte les vidéos intégrées et remplace tous les fichiers externes par une image statique et un bouton de lecture. Les vidéos ne sont chargées que lorsqu’un visiteur clique sur le bouton. Cela peut avoir un réel impact sur la vitesse de chargement des pages, surtout s’il contient de nombreuses vidéos. Et pour l’utilisateur, c’est une expérience fluide.

a3 Lazy Load

Les sites Web étant de plus en plus consultés sur des appareils portables, ils doivent également être optimisés pour une expérience mobile. a3 Lazy Load est conçu pour améliorer la vitesse du site sur les mobiles en retardant le chargement des éléments de page sélectionnés. Les éléments peuvent être sélectionnés dans les paramètres d’administration.

a3-lazy-load

Le plugin prend en charge le contenu des iframes placés n’importe où dans le contenu ou les widgets. Les médias intégrés WordPress, les boîtes Facebook J’aime avec les profils, les boutons J’aime, les boutons Recommander, les profils Google+, Google Maps et d’autres contenus multimédias similaires peuvent tous être sélectionnés pour un chargement paresseux.

En outre, il n’y a pas de conflit avec les pages mobiles accélérées (AMP) – le chargement paresseux n’est pas appliqué au / amp point final. Ce n’est que lorsque le navigateur arbore une URL sans / amp cette charge paresseuse entre en jeu.

WP YouTube Lyte

Si votre site Web est largement utilisé sur YouTube, WP YouTube Lyte peut vous bénéficier beaucoup. Il insère des «Lite YouTube Embeds» qui semblent similaires aux YouTube YouTube. Mais les vidéos ne sont demandées que lorsque vous cliquez dessus.

wp-youtube-lyte

Pour que ce plugin fonctionne sur votre site Web, une inscription sur YouTube en tant que nouveau demandeur est nécessaire. Le plugin utilise l’API YouTube de chaque vidéo pour la récupérer à partir du référentiel YouTube. Pour utiliser cette API sur votre site Web, la clé d’API fournie par YouTube doit être activée. La clé de serveur que vous recevez de YouTube doit être remplie.

Une fois que vous avez activé les clés de l’API YouTube, ajustez les paramètres pour obtenir les dimensions et la position du lecteur à votre convenance.

Page de chargement avec écran de chargement

Avec Page de chargement avec écran de chargement, les utilisateurs peuvent avoir une idée du temps d’attente avant le chargement de la page. Le plugin affiche un écran montrant la progression du chargement en pourcentage d’achèvement.

page de chargement avec écran de chargement

Choisissez d’afficher la progression uniquement sur la page d’accueil ou sur toutes les pages. Avec la version gratuite, seule une barre de progression est utilisée pour l’affichage. Pour plus d’options, vous devrez passer à la version premium. De plus, la version premium applique un chargement paresseux aux images.

Quelques plugins supplémentaires,

  • Charger plus est une fonctionnalité utile dans les longues pages de produits. Ceux-ci se trouvent généralement sur les sites Web WooCommerce. WooCommerce Infinite Scroll et Ajax Pagination convertit la pagination du produit par défaut en défilement infini ou en pagination Ajax. Pour l’utilisateur, cela signifie qu’il n’est pas nécessaire de cliquer plusieurs fois sur «Page suivante». Lorsqu’un utilisateur atteint le bas de la page, l’ensemble de produits suivant est automatiquement récupéré et chargé. Différentes options de pagination sont disponibles pour les appareils mobiles.
  •  Charger plus de produits pour WooCommerce peut être ajouté pour charger plus de produits à partir de la page suivante en utilisant Ajax avec défilement infini ou un bouton Charger plus. Pour les effets d’animation et la personnalisation, une version pro est disponible.
  • Images Lazyload et diaporama – Avec ce plugin, vous pouvez choisir d’ajouter un effet lightbox ou un effet de galerie personnalisé à n’importe quelle image, ainsi que de retarder le chargement. Il est livré avec 3 effets, et vous pouvez également ajouter le vôtre.
  • Rocket Lazy Load – Est extrêmement léger (moins de 2 Ko). Il injecte un petit peu de Javascript dans l’en-tête de votre site qui fonctionne sur les vignettes, toutes les images dans un post, dans un texte de widget ou des avatars. Il retarde les images à l’échelle du site sans utiliser de bibliothèque JavaScript telle que jQuery.
  • Crazy Lazy – Fait le même travail tout en étant léger, facile à installer et à utiliser, et ne nécessite aucun réglage. Toute image peut être exclue en ajoutant simplement un attribut à l’image.
  • Lazy Load XT – Est un plugin rapide qui fonctionne pour les images, les cadres, les vidéos YouTube et Vimeo. Il est entièrement personnalisable.

De nombreux curseurs aiment Royal Slider et Carrousel électrique WP incorporer également le principe de chargement paresseux pour charger des images. Event Booking Pro prend en charge un calendrier de chargement paresseux.

En conclusion

Le chargement paresseux est un moyen efficace d’améliorer la vitesse du site, en particulier sur les sites Web qui contiennent un certain nombre d’images et de vidéos. Il existe de nombreuses autres méthodes, telles que l’optimisation d’image et la mise en cache, qui peuvent également aider à améliorer la vitesse du site. Choisissez le plugin qui convient à votre site Web et optimisez les performances pour en faire une meilleure expérience pour l’utilisateur.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map