Il existe de nombreuses approches différentes disponibles pour mettre en œuvre le chargement paresseux sur votre site Web. Nous vous invitons à consulter notre liste classée des meilleurs plugins pour WordPress qui prennent en charge le chargement lent.
Il existe de nombreux plugins gratuits dans le répertoire WordPress qui peuvent être utilisés pour le chargement paresseux des images et des vidéos. Après avoir considéré quelques dizaines de plugins et en avoir testé quelques-uns, nous avons trouvé deux plugins qui augmentent considérablement les performances du site Web. Si vous êtes désireux de mettre en œuvre le chargement paresseux, considérez les options ci-dessous.
Utiliser WP Rocket (Premium)
WP Rocket est l'approche la plus simple pour mettre en œuvre un chargement lent sur votre site Web. En outre, le processus d'activation prend moins d'une minute. LazyLoad est le nom du plugin que WP Rocket inclut comme sa version du chargement paresseux des images.
Lorsque LazyLoad est activé, WP Rocket arrête immédiatement le chargement paresseux des images natives de WordPress pour éviter tout problème éventuel.
Suivez les étapes ci-dessous pour activer la fonction LazyLoad de WP Rocket :-.
- Vous pouvez activer LazyLoad en naviguant vers Settings > WP Rocket > Media panel dans votre installation WordPress.
- Cliquez sur "Activer pour les images" sous la zone LazyLoad en haut de l'écran.
- Cliquez sur "Enregistrer les modifications" après avoir effectué votre sélection.
C'est tout le reste qui doit être fait. En conséquence, les visiteurs verront le chargement des photos ralentir.
LazyLoad fournit un chargement paresseux pour des éléments HTML supplémentaires, tels que les iframes et les vidéos, contrairement à l'approche native fournie par WordPress. En outre, il utilisera le chargement paresseux pour les images d'arrière-plan si ces images sont appliquées en ligne pour des composants HTML spécifiques.
Si vous souhaitez utiliser la fonctionnalité native de chargement paresseux des images de WordPress, vous pouvez désactiver l'option LazyLoad dans WP Rocket. En revanche, la nouvelle propriété de chargement n'est pas encore prise en charge par tous les navigateurs. En outre, l'installation de WordPress est uniquement axée sur les photos. Par conséquent, LazyLoad de WP Rocket reste l'alternative supérieure, en particulier si votre site Web comporte de nombreuses images, vidéos et embeds.
Choses à noter lors de l'activation du chargement paresseux natif de WP Rocket
Même si WP Rocket n'inclut pas la compatibilité automatique avec les navigateurs Chrome qui utilisent le chargement paresseux natif, vous avez toujours la possibilité de choisir la prise en charge du chargement paresseux natif de Chrome en l'activant via un plugin d'aide. De même, c'est le cas même si WP Rocket n'inclut pas la compatibilité automatique avec les autres navigateurs qui utilisent le chargement paresseux natif.
Vous pouvez garantir les choses suivantes en utilisant ce plugin utile :
- Chacune de vos photos contiendra la syntaxe HTML essentielle pour utiliser le chargement paresseux natif ; les navigateurs compatibles avec Chrome utiliseront automatiquement le chargement paresseux natif ; tous les autres navigateurs utiliseront automatiquement LazyLoad de WP Rocket.
- Vous avez la possibilité de continuer à utiliser notre technologie robuste LazyLoad ou de passer à la fonction intégrée de chargement paresseux de Chrome.
Tout dépend de vous ! Commencez par tester les deux approches sur votre site, puis choisissez celle qui vous convient le mieux.
Utilisation de a3 Lazy Load (gratuit)
Si vous recherchez une option gratuite, nous vous recommandons d'utiliser le plugin a3LazyLoad. Vous pouvez désactiver le chargement paresseux pour certaines images et pages à l'aide du plugin a3. En outre, il permet de retarder le chargement des vidéos sur votre site web:
De plus, ce plugin aide au chargement paresseux des images et des vidéos externes. L'implémentation du noyau de WordPress n'effectue pas une telle action.
Vous pouvez installer et activer ce plugin depuis votre tableau de bord WordPress. Maintenant, vous pouvez personnaliser les paramètres de l'outil.
Étape 2 : Régler les paramètres de l'image du plugin
Allez dans Paramètres > a3 Lazy Load next. Si vous regardez sous Activation du chargement paresseux, le plugin est activé par défaut après l'installation.
Maintenant, ouvrez l'onglet Images LazyLoad. Vous pouvez (1) choisir les images de sites Web dont le chargement doit être retardé et (2) fournir une solution de repli pour les navigateurs Web qui refusent d'accepter JavaScript. Pour les images dont vous ne voulez pas retarder le chargement, vous pouvez (3) définir une classe CSS :
Dans les paramètres par défaut, toutes les options sont activées. Nous vous recommandons vivement de conserver ce paramètre. Créez une classe CSS qui vous permettra d'ignorer le chargement différé pour certaines images.
Étape 3 : Régler les paramètres vidéo du plugin
L'onglet Lazy Load Videos and iframes est l'étape suivante. Avec a3 Lazy Load, vous pouvez sélectionner le chargement différé pour des clips particuliers, tout comme vous le faites pour les images.
Le plugin autorise les vidéos dans (1) le contenu et les widgets et fournit (2) une fonction de repli pour les navigateurs qui ne prennent pas en charge JavaScript :
Vous pouvez spécifier une classe CSS dans les paramètres de la vidéo (3) pour exclure certaines vidéos du chargement différé. Si vous souhaitez une configuration plus simple, utilisez la même classe que vous avez choisie dans la section images.
Plus de plugins de chargement paresseux pour WordPress
En dehors de WP rocket & a3 Lazy Load, plusieurs plugins utiles pour le chargement paresseux sont disponibles et vous pouvez les envisager :
- Chargement paresseux pour les vidéos
- BJ Lazy Load
- Charger plus de produits pour WooCommerce
- WordPress Infinite Scroll - Chargement Ajax Plus
- Chargement conditionnel de Disqus
- Lazy Load pour les commentaires
Réflexions finales
Il est essentiel d'être conscient de tout conflit potentiel lorsque vous mettez à jour ou modifiez votre site Web. Consultez cette liste de problèmes fréquents associés au chargement paresseux si vous découvrez que l'autorisation du chargement paresseux a rendu un aspect de votre site Web inopérant.
Il est possible qu'il y ait des incompatibilités du fait que la fonction de chargement paresseux ne soit pas appliquée aux images téléchargées par des plugins tels que Revolution Slider et Envira Gallery. La liste complète des plugins compatibles se trouve ici.
Cet article, ainsi que de nombreux autres, sont disponibles sur Seahawk Media Blog.
