Meilleurs plugins de chargement paresseux pour rendre votre site WordPress plus rapide
Publié: 2019-04-01Les sites avec une tonne d'images peuvent prendre une éternité à se charger. Pour chaque image, c'est une autre requête HTTP, et plus de temps vos utilisateurs doivent attendre avec frustration pendant que les pages se chargent lentement.
Alors, quelle est la solution ? Chargement paresseux.
Continuez à lire ou avancez en utilisant ces liens :
- Chargement paresseux natif arrivé avec WordPress 5.5
- Un plugin est-il encore nécessaire ?
- Accès à une interface
- Compatibilité du navigateur
- Optimisation supplémentaire
- Y a-t-il des avantages au chargement paresseux natif ?
- Meilleurs plugins de chargement paresseux
- En savoir plus sur le chargement différé
Le chargement paresseux peut considérablement accélérer les sites contenant beaucoup d'images et ne prend aucun temps pour être activé sur votre site.
En un mot, cela force les images à se charger uniquement lorsqu'elles sont "au-dessus de la ligne de flottaison" - en d'autres termes, seules les images qui apparaissent dans le navigateur d'un utilisateur seront chargées.
Ainsi, si vous avez une page contenant 10 thèmes WordPress plein écran frais et gratuits, seules les premières images de la publication se chargeront et les autres se chargeront lorsque l'utilisateur fera défiler la page.
Chargement paresseux natif arrivé avec WordPress 5.5
Le chargement paresseux est encore une fonctionnalité relativement nouvelle pour WordPress.
Cela fonctionne en ajoutant l'attribut "paresseux" et en définissant la valeur sur "chargement" sur vos images, qui est ensuite traitée par le navigateur en sortie.
Si vous avez un plugin de chargement paresseux auquel vous êtes fidèle ou traversez des phases où vous ne voulez pas du tout que le chargement paresseux soit activé, vous serez ravi d'apprendre que vous pouvez le désactiver.
Certains plugins le font automatiquement, cependant, si vous avez besoin de le faire manuellement, dirigez-vous simplement vers votre fichier functions.php et ajoutez ce qui suit :
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Cela désactivera la fonctionnalité de chargement paresseux de WordPress, ce qui signifie que vous pourrez utiliser un plugin de votre choix sans risque de conflit.
Ce n'est qu'une ligne de code, mais si vous ne vous sentez pas à l'aise de l'ajouter, vous pouvez télécharger ce plugin simple qui le fera pour vous.
Un plugin est-il encore nécessaire ?
Vous vous demandez peut-être s'il faut utiliser un plugin maintenant que WordPress propose un chargement paresseux natif.
Eh bien lisez la suite, car il y a en fait quelques raisons pour lesquelles vous pourriez vouloir vous en tenir à un plugin :
Accès à une interface
Un bon plugin de chargement paresseux tel que Smush offre une interface avec des options pour modifier des paramètres spécifiques, ainsi que la possibilité d'activer et de désactiver le chargement paresseux en appuyant simplement sur un bouton.
Ces options peuvent aller des types d'images qui seront chargés paresseux aux pages auxquelles s'applique le chargement paresseux. Si vous souhaitez modifier des paramètres comme ceux-ci sans plugin, vous devrez approfondir le code et ajouter ces exceptions manuellement.
Compatibilité du navigateur
Un autre grand avantage est que la plupart des plugins fonctionneront sur tous les navigateurs. Safari est l'un des principaux navigateurs qui ne prend pas en charge l'attribut de chargement. Par conséquent, si vous avez un site Web avec beaucoup d'images, vous pourriez voir les utilisateurs de navigateurs non pris en charge rebondir. C'est quelque chose dont vous n'avez pas à vous soucier lorsque vous utilisez un plugin.
Optimisation supplémentaire
La plupart des plugins offrent bien plus qu'un simple chargement paresseux. L'introduction d'un plugin d'optimisation d'image sur votre site Web est probablement l'une des meilleures décisions que vous puissiez prendre.
Des plugins tels que Smush peuvent vous aider à suivre les recommandations PageSpeed de Google relatives aux images et à donner à votre site une accélération de la vitesse - le chargement paresseux n'est que le début !
Y a-t-il des avantages au chargement paresseux natif ?
À première vue, il peut sembler qu'un plugin fera tout ce que le chargement paresseux natif peut faire, et plus encore.
Bien que cela soit techniquement correct, la principale différence est que la plupart des plugins impliqueront l'introduction d'une bibliothèque JavaScript, dont votre site dépendra.
Le chargement paresseux natif est plus simple et direct et ne nécessite pas beaucoup de code supplémentaire.
Notre plugin d'optimisation d'image, Smush, propose en fait sa propre version de chargement paresseux natif.
Il fonctionne sur la même base que WordPress mais prend en charge tous les mêmes formats d'image que Smush.
Le chargement paresseux natif est peut-être quelque chose qui peut être utilisé comme base pour d'autres développements à l'avenir, mais au moins pour l'instant, les plugins conviennent à la plupart des sites.
Si vous préférez l'idée d'un plugin pour résoudre vos besoins de chargement paresseux, nous avons rassemblé une collection de plugins de chargement paresseux gratuits.
Optimisation d'image Smush
Smush est le plugin d'optimisation d'image tout-en-un le plus populaire pour une raison. Nous incluons tout ce dont vous avez besoin pour accélérer le chargement de vos images.
Le chargement paresseux est disponible à la fois sur la version gratuite de Smush et sur le Smush Pro turbocompressé, fourni avec le CDN Smush Pro, et contrairement au chargement paresseux natif, il est compatible avec tous les navigateurs.
Pour activer le chargement paresseux avec Smush, nous avons rendu le processus super simple. Tout ce que vous avez à faire est d'aller dans la section Lazy Loading de Smush et d'appuyer sur le bouton Activer . C'est ça.
Vous pouvez ajuster davantage vos paramètres une fois le chargement différé activé, mais ce n'est pas nécessaire. Les paramètres par défaut de Smush et Smush Pro sont tout ce dont vous avez besoin pour voir une amélioration majeure des performances.
a3 Chargement paresseux
A3 Lazy load est un plugin populaire pour le chargement paresseux d'images, d'iframes, de vidéos et d'autres éléments sur votre site.
Il comporte de nombreux paramètres vous permettant de personnaliser la manière dont vous souhaitez que les ressources de votre site soient chargées.
Il est également testé pour être 100% compatible avec les plugins populaires comme WooCommerce, Advanced Custom Fields et une variété de CDN.
Fou paresseux
Voici un autre plugin de chargement paresseux ultra maigre qui fonctionne tout simplement. Aucune configuration compliquée requise.
Selon le thème ou l'utilisation de jQuery, Crazy Lazy utilisera éventuellement une version modifiée du plugin jQuery Unveil.js ou de la bibliothèque JavaScript native lazyload.js.
Lazy Load pour les vidéos
Tous les plugins de chargement paresseux ne fonctionnent pas avec la vidéo, ce qui est dommage car les vidéos peuvent ajouter plus de volume à la taille du fichier de votre page Web que les images.
Lazy Load for Videos peut vous aider à charger paresseusement des vidéos hébergées sur Vimeo ou YouTube. Il charge une image d'espace réservé et ne charge la vidéo complète et le lecteur vidéo que si un visiteur clique dessus.
Ceci est essentiel si votre site contient beaucoup de vidéos et que vous choisissez un plugin léger qui n'inclut pas le chargement paresseux pour la vidéo.
En savoir plus sur le chargement différé
L'utilisation d'un plugin est le moyen le plus simple d'ajouter du chargement paresseux à votre site, mais ce n'est pas le seul moyen. Vous pouvez également utiliser JavaScript sur votre site si vous souhaitez une solution allégée.
Si vous voulez en savoir plus, consultez Comment différer les images hors écran dans WordPress avec le chargement paresseux pour une description complète du fonctionnement du chargement paresseux et comment recréer la technique sur votre site.
Si vous souhaitez en savoir plus sur la fonctionnalité de chargement paresseux de WordPress, consultez l'annonce.
Le moyen le plus simple de démarrer avec le chargement paresseux est avec Smush free ou Smush Pro.
Smush Pro ajoute d'autres fonctionnalités qui peuvent vous aider avec d'autres opportunités Google PageSpeed Insights. Il peut vous aider à diffuser des images dans des formats de nouvelle génération en convertissant vos images en fichiers WebP et en dimensionnant correctement les images en mettant à l'échelle vos images avec le CDN Smush Pro. Smush Pro est même compatible avec le populaire plugin WP Retina 2x, vous pouvez donc charger paresseux ces énormes images Retina sans ralentir WordPress.
Essayez Smush Pro gratuitement et voyez à quel point cela peut faire une différence pour votre site.
Mots clés: