Les images, les infographies et les effets fantaisistes sont tous d’excellents outils pour promouvoir tout type de contenu sur un site Web. Ils attirent infailliblement 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 mettent souvent du temps à se charger sur une page Web. Et si votre connexion est lente, le chargement peut sembler prendre une éternité. Cela peut être un gros désagrément pour les utilisateurs, qui s’éloigneront probablement de la page.
Comment pouvons-nous accélérer le chargement des pages lourdes d’images ?
Pourquoi les images mettent-elles du temps à se 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 que chaque élément se charge, votre navigateur envoie une requête au site Web (appelée requête HTTP). De nombreux éléments, en particulier les images, sont lourds en octets et prennent du temps à charger. Normalement, tous les éléments essaient de se charger en même temps, ce qui retarde le chargement de toute la page Web.
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. Dans le 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 à l’écran pour retenir leur attention.
Qu’est-ce que le chargement paresseux ?
Nous pouvons retarder les images en utilisant la technique de chargement paresseux – ne chargez d’abord que le texte ou le contenu sélectionné et laissez les images ou les éléments de chargement lents prendre du retard. Le chargement des images est échelonné, de sorte que le temps de premier octet de la page Web s’améliore. Lorsqu’un utilisateur fait défiler vers le bas, les images sont récupérées 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 plus tard. 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 de la ligne de flottaison ». En cas de défilement infini, ajax est utilisé pour charger davantage lorsque l’utilisateur atteint le bas de l’écran.
Comment le Lazy Loading peut vous 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 que lorsqu’elles sont vraiment nécessaires. Cela permet d’économiser de la bande passante, à la fois du côté du serveur et du côté de l’utilisateur. Vous pouvez appliquer un chargement paresseux aux pages sélectionnées ou à l’ensemble du site.
Un inconvénient du lazy loading 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 pallier au moins en partie cet inconvénient, 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’au chargement de l’image.
Il existe un certain nombre de plugins qui peuvent faire fonctionner le chargement paresseux sur votre site Web WordPress. Regardons quelques-uns des plugins populaires,
bj paresseux charge
Pour remplacer tout ou partie de vos images de publication, vignettes de publication, images gravatar et iframes de contenu avec un espace réservé, utilisez bj paresseux charge. Il peut également remplacer les iframes, ce qui signifie que vous pouvez charger paresseux 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.
Pour que le plugin fonctionne sur votre site Web, téléchargez, installez et activez simplement. 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 retard de chargement.
Charge paresseuse
Un plugin couramment utilisé pour ajouter un chargement paresseux aux sites Web WordPress, Charge paresseuse est un plugin d’installation et d’activation simple. 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 d’Automattic, de l’équipe TechCrunch 2011 Redesign et de Jake Goldman (10up LLC).
De plus, vous n’avez rien d’autre à faire après l’activation. Cependant, si vous souhaitez apporter quelques modifications, vous pouvez le faire en éditant le fichier php. Les auteurs ont fourni des extraits de code utiles auxquels vous pouvez vous référer pour modifier l’image de l’espace réservé, pour charger des images paresseux dans votre thème ou pour charger paresseux toutes vos images par mise en mémoire tampon de sortie.
Ajax Charger plus – Défilement infini
Ajax Charger plus est apte au chargement retardé sur de longues pages Web qui sont affichées en faisant défiler vers le bas. Utilisez-le pour les publications à chargement paresseux, les types de publication personnalisés, les publications uniques, les pages et les commentaires.
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 modèles. Affichez la page depuis le front-end et vérifiez qu’Ajax Load More charge le contenu même lorsque vous faites défiler vers le bas.
De plus, Ajax Load More fonctionne bien avec WooCommerce et Easy Digital Downloads, il convient donc aux longues pages de produits.
Chargement paresseux pour les vidéos
Si vous exploitez un site Web contenant un certain nombre de vidéos intégrées, celle-ci est faite pour vous. Chargement paresseux 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 ne sont chargées que lorsque l’on clique sur l’image.
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 impact réel sur la vitesse de chargement de la page, surtout si elle contient de nombreuses vidéos. Et pour l’utilisateur, c’est une expérience fluide.
a3 Charge paresseuse
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 Charge paresseuse 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.
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 Like avec des profils, les boutons Like, 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.
De plus, 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 s’appuie fortement sur YouTube, WP YouTube Lyte peut vous être très utile. Il insère « Lite YouTube Embeds » qui ressemble à des intégrations YouTube. Mais les vidéos ne sont demandées que lorsque l’on clique dessus.
Pour que ce plugin fonctionne sur votre site Web, une inscription auprès de YouTube en tant que nouveau candidat 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é API qui vous est fournie par YouTube doit être activée. La clé de serveur que vous recevez de YouTube doit être renseignée.
Une fois que vous avez activé les clés 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.
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. En outre, 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 sont couramment trouvés sur les sites Web WooCommerce. Défilement infini WooCommerce et pagination Ajax convertit la pagination par défaut du produit en défilement infini ou en pagination Ajax. Pour l’utilisateur, cela signifie qu’il n’a pas à cliquer plusieurs fois sur « Page suivante ». Lorsqu’un utilisateur atteint le bas de la page, le prochain ensemble de produits 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 un 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 les vôtres.
- Charge paresseuse de fusée – Est extrêmement léger (moins de 2 Ko). Il injecte un peu de Javascript dans l’en-tête de votre site qui fonctionne sur les vignettes, toutes les images d’un article, dans un texte de widget ou des avatars. Il retarde les images sur l’ensemble du site sans utiliser de bibliothèque JavaScript telle que jQuery.
- fou paresseux – 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.
- Chargement paresseux 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 comme Royal Slider et Carrousel électrique WP intègrent é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 différé est un moyen efficace d’améliorer la vitesse du site, en particulier sur les sites Web contenant un certain nombre d’images et de vidéos. Il existe de nombreuses autres méthodes, telles que l’optimisation des images et la mise en cache, qui peuvent également aider à améliorer la vitesse du site. Choisissez le plugin qui convient le mieux à votre site Web et optimisez les performances pour en faire une meilleure expérience pour l’utilisateur.
