Comment charger paresseux dans WordPress (images et vidéos)

Si vous êtes propriétaire d'un site Web, vous avez probablement pensé à la vitesse du site au moins une fois dans le passé. Après tout, Google tient compte de la vitesse pour déterminer où placer les sites dans les résultats de recherche. Ainsi, si votre site est lent à se charger, vous êtes désavantagé en matière de classement. Et nous savons tous que des classements plus élevés entraînent plus de trafic.

Alors, comment vous assurez-vous que votre site WordPress se charge le plus rapidement possible ? Une façon consiste à charger paresseusement vos images.

Le chargement différé est une technique qui retarde le rendu des images et des vidéos jusqu'à ce qu'elles soient nécessaires. La mise en œuvre de cela peut considérablement accélérer votre site, et la bonne nouvelle est que vous n'avez pas besoin d'être un développeur pour le mettre en œuvre.

Aujourd'hui, nous allons vous montrer comment charger paresseusement des images et des vidéos dans WordPress en utilisant deux méthodes : avec un plugin et sans.

Qu'est-ce que le chargement différé ?

Le chargement différé est une technique courante utilisée pour améliorer la vitesse des pages. L'idée est simple : au lieu de charger toutes les images d'une page lorsqu'un visiteur arrive pour la première fois, seules les images visibles sont affichées. Ensuite, au fur et à mesure que le visiteur fait défiler la page, d'autres images sont chargées selon les besoins.

Cela signifie que si un visiteur ne défile jamais jusqu'en bas d'une page, les images situées sous la zone de la page consultée ne sont jamais chargées. Ainsi, le chargement paresseux peut faire gagner de précieuses millisecondes (voire secondes) sur le temps de chargement de votre page.

De plus, le chargement différé peut également vous aider à conserver la bande passante. Ceci est particulièrement important si vous avez des personnes qui visitent votre site sur un appareil mobile. En différant le chargement des images et des vidéos qui ne sont pas visibles, vous pouvez diminuer la quantité de données utilisées.

Comment fonctionne le chargement différé ?

En général, le chargement différé fonctionne de deux manières. WordPress, à partir de la version 5.5, ajoute un attribut HTML5 appelé « chargement ». Dans ce cas, le navigateur gère toutes les parties du processus de chargement paresseux sans avoir besoin de JavaScript supplémentaire.

Une autre méthode, développée avant l'attribut HTML5, consiste à utiliser du JavaScript créatif. Dans ce cas, un espace réservé vide est servi lors du chargement de la page, puis JavaScript est utilisé pour charger les images au fur et à mesure qu'elles arrivent dans la fenêtre d'affichage.

Dans tous les cas, seules les images nécessaires au navigateur sont chargées. D'autres images sont chargées une fois qu'un visiteur fait défiler la page.

Il existe plusieurs façons de procéder, dont nous parlerons plus en détail ci-dessous. Mais c'est l'essentiel du fonctionnement du chargement paresseux.

Quels sont les avantages du chargement différé ?

Le chargement différé des images présente trois avantages principaux :

• Augmentation de la vitesse du site
• Utilisation réduite de la bande passante
• Meilleure expérience utilisateur

L'augmentation de la vitesse du site est généralement la principale motivation pour la mise en œuvre du chargement paresseux. En attendant de rendre les images inutiles, vous pouvez réduire le temps de chargement de votre page. Cela est particulièrement vrai si vous avez beaucoup d'images sur une page ou si vos images sont volumineuses.

Ensuite, le chargement différé peut vous aider à conserver la bande passante. Si les visiteurs ne s'aventurent jamais sur la page, il n'y a pas de perte de bande passante pour charger des images qu'ils ne verront jamais.

Enfin, le chargement différé peut améliorer votre expérience utilisateur. En effet, les visiteurs n'ont pas à attendre que toutes les images d'une page se chargent avant de pouvoir commencer à interagir avec votre site.

Est-ce que WordPress se charge par défaut ?

Oui, à partir de WordPress 5.5, le chargement différé est activé par défaut automatiquement lors de l'installation. Cependant, il existe des façons de personnaliser l'expérience qui sont assez simples et intuitives. Nous discuterons de ces méthodes plus en détail ci-dessous.

Dois-je charger mes images paresseusement ? Y a-t-il des inconvénients ?

Dans la plupart des cas, le chargement paresseux de vos images est une excellente idée si vous souhaitez améliorer la vitesse de votre page ou économiser de la bande passante. Cependant, certains inconvénients potentiels doivent également être pris en compte.

Changement de disposition

Si vous chargez vos images paresseusement, la mise en page de votre page peut changer. Par exemple, si vous avez une barre latérale sur le côté droit de votre page et que vous chargez paresseusement une image qui s'y trouve, la barre latérale peut se déplacer vers le bas pour faire de la place. Cela peut être très désorientant pour vos visiteurs.

En règle générale, il est recommandé d'utiliser des espaces réservés pour éviter ce problème.

Impact potentiel sur le référencement

Si vous ne le faites pas correctement, le chargement paresseux des images peut empêcher les moteurs de recherche, comme Google, de les indexer. Le contenu est roi en matière de classement, et dans ce cas, vous pourriez perdre des morceaux précieux.

Vos images peuvent ne plus apparaître dans les résultats de recherche et, selon l'importance des images par rapport au reste du contenu de la page (comme les images de produits pour une liste de commerce électronique), cela pourrait également nuire à votre classement de recherche habituel.

Cela dit, si vous configurez correctement le chargement paresseux, ce ne sera pas un problème. C'est pourquoi, à moins que vous ne soyez un développeur confiant, votre meilleur plan d'action est d'utiliser un plugin de chargement paresseux ou de vous en tenir au chargement paresseux par défaut inclus avec WordPress.

Conflits de plugins

De plus, le chargement paresseux peut causer des problèmes avec certains plugins WordPress, comme les plugins qui utilisent des images pour générer des aperçus de médias sociaux.

Chaque fois que vous apportez des modifications à votre site, vous devez les tester minutieusement pour vous assurer que tout fonctionne comme il se doit.

Et, en cas de problème, ayez une sauvegarde de votre site WordPress à portée de main pour une récupération rapide.

Comment activer le chargement paresseux dans WordPress

Le chargement différé est désormais activé par défaut dans WordPress. Si vous n'utilisez pas une itération WordPress moderne (bien que nous vous le recommandions), ou si vous souhaitez un contrôle plus granulaire sur le processus de chargement paresseux, vous pouvez le faire en utilisant l'une des deux méthodes distinctes : en utilisant un plugin ou en ajoutant du code à votre placer.

1. Chargement paresseux avec un plugin

Si vous n'êtes pas un développeur expérimenté, nous vous recommandons d'utiliser un plugin car chaque fois que vous modifiez le code de votre site, vous risquez de rencontrer des problèmes. Même si vous avez des sauvegardes sous la main au cas où vous casseriez quelque chose, il peut toujours être préférable d'utiliser simplement un plugin réputé.

Jetpack Boost est un plugin gratuit dédié à vous aider à évaluer et à améliorer les performances du site. Il offre des fonctionnalités telles que :

• Différer le JavaScript non essentiel
• Optimisation du chargement CSS
• Chargement d'image paresseux
• Tests de performance du site

Pour démarrer avec Jetpack Boost, téléchargez-le gratuitement à partir du répertoire des plugins WordPress.

Ou, dans votre tableau de bord WordPress, allez dans Plugins → Ajouter un nouveau, puis recherchez « Jetpack Boost » et cliquez sur Installer maintenant . Une fois installé, cliquez sur Activer .

Ensuite, accédez à la nouvelle option de menu du tableau de bord intitulée Boost . Ensuite, cliquez sur Démarrer gratuitement .

Sur la page suivante, faites défiler jusqu'à la grande bascule indiquant Chargement d'image paresseux et activez-la. Maintenant, jetez un coup d'œil à votre site et assurez-vous que tout s'affiche correctement et qu'il est beau. C'est ça! Le chargement paresseux est bon en quelques clics.

Si vous souhaitez aller plus loin et personnaliser le chargement paresseux de votre site, vous pouvez le faire en utilisant des extraits de code, que vous pouvez ajouter à votre fichier functions.php . Ou, vous pouvez les insérer avec un plugin de fonctionnalité.

Voici quelques tâches que vous pouvez accomplir :

1. Désactiver le chargement différé sur certaines pages
2. Définir un espace réservé qui s'affiche jusqu'à ce que l'image soit chargée
3. Désactiver le chargement différé pour des images spécifiques
4. Désactiver le chargement différé pour une classe CSS spécifique

Par exemple, si vous souhaitez exclure une classe CSS du processus de chargement différé, vous utiliserez ce code :

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Pour plus de détails, consultez la documentation complète sur le chargement différé.

2. Comment charger paresseux des images dans WordPress sans plugin

Comme nous l'avons mentionné précédemment, WordPress, par défaut, active le chargement paresseux pour toutes les images qui ont des dimensions définies. Vous n'avez pas besoin d'activer quoi que ce soit ou d'ajouter un code pour ce faire. Cependant, il peut arriver que vous souhaitiez personnaliser le fonctionnement de cette fonctionnalité.

Par exemple, supposons que vous ne souhaitiez pas inclure d'images de modèle. Vous ajouteriez ce code à votre fichier functions.php :

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Ou peut-être souhaitez-vous obtenir une granularité extrême et désactiver le chargement paresseux pour des images spécifiques. Vous pouvez le faire en attribuant une classe d'image supplémentaire à chaque image lorsqu'elle est ajoutée à une page ou à un article, puis en ajoutant cette classe au code suivant dans votre fichier functions.php :

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Pour ajouter la classe d'image skip-lazy dans l'exemple ci-dessus à une image :

1. Ajoutez l'image à la page ou publiez via la médiathèque.
2. Après avoir ajouté l'image, recherchez vos paramètres d'image. Cela peut apparaître différemment selon que vous utilisez l'éditeur Gutenberg Blocks, l'éditeur classique ou un plugin de création de site. La possibilité d'ajouter une nouvelle classe CSS se trouve généralement dans la zone des paramètres avancés (éditeurs Gutenberg et classiques) ou vers le bas de vos options de paramètres d'image (la plupart des autres constructeurs de sites).
3. Ajoutez la classe skip-lazy à l'image et enregistrez votre mise à jour.

Vous pouvez en savoir plus sur les possibilités dans la documentation de WordPress.

Comment charger des vidéos paresseusement dans WordPress

Si vous souhaitez charger vos vidéos paresseux, vous pouvez le faire en ajoutant du code à la vidéo elle-même dans la publication ou la page. Ce code devrait ressembler à ceci :

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Questions fréquemment posées sur le chargement paresseux dans WordPress

Vous voulez en savoir plus sur le chargement paresseux de WordPress ? Nous avons répondu à quelques questions fréquemment posées ci-dessous :

Le chargement paresseux et le report des images hors écran sont-ils la même chose ?

Différer les images hors écran signifie attendre de charger les images jusqu'à ce que le reste du contenu critique, au-dessus de la ligne de flottaison, soit chargé. Il existe plusieurs façons de procéder, mais les sites WordPress utilisent généralement le chargement paresseux.

Essentiellement, le chargement paresseux est une méthode pour différer les images hors écran.

Puis-je charger paresseusement des images d'arrière-plan dans WordPress ?

Oui, vous pouvez charger paresseusement des images d'arrière-plan si vous le souhaitez. Jetpack Boost active le chargement paresseux pour les images d'arrière-plan. Cependant, selon la configuration de vos images, il se peut qu'il ne soit pas en mesure de toutes les identifier. Par exemple, si l'image est chargée via la propriété background:url , le plug-in ne la lira pas comme une image et, par conséquent, n'activera pas le chargement différé pour celle-ci.

Dans cette situation, vous pouvez utiliser un outil comme Lazy Loader, qui vous permettra de sélectionner les images d'arrière-plan spécifiques que vous souhaitez charger paresseusement.

Puis-je charger paresseusement une vidéo YouTube ?

Oui, vous pouvez! Pour ce faire, insérez l'extrait de code suivant de WPOrbit dans le fichier functions.php de votre thème. Si vous ne savez pas comment procéder, consultez notre guide pour accéder et modifier le fichier functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Le chargement différé a-t-il un impact sur le référencement ?

Oui, le chargement paresseux peut avoir un impact positif sur votre classement dans les moteurs de recherche. Google tient compte de la vitesse du site lorsqu'il décide du classement des pages dans les résultats de recherche. Et puisque le chargement différé améliore les performances, il peut également augmenter la perception de votre site par Google.

Si vous le faites manuellement, au lieu d'utiliser un plugin de chargement paresseux, et que vous faites une erreur, cela peut avoir un impact négatif sur le référencement en entravant la capacité des moteurs de recherche à reconnaître vos images.

Le chargement différé a-t-il un impact sur l'expérience utilisateur ?

Oui, le chargement différé peut améliorer votre expérience utilisateur car il réduit le temps de chargement de votre site, tout en garantissant que les visiteurs peuvent voir votre contenu immédiatement. Ceci, à son tour, peut améliorer leur perception de votre marque.

Ai-je besoin d'un plugin pour charger mon contenu paresseux ?

Non, vous n'avez pas besoin d'un plugin pour charger votre contenu paresseux. Le chargement différé est activé par défaut dans WordPress. Cependant, si vous voulez plus de contrôle sur le processus de chargement paresseux, vous pouvez utiliser un plugin. Voici une sélection des meilleurs plugins de chargement paresseux pour WordPress.

Y a-t-il un inconvénient au chargement paresseux du contenu ?

Il n'y a pas beaucoup d'inconvénients au chargement paresseux du contenu. Il améliore votre vitesse, votre expérience utilisateur et votre classement dans les moteurs de recherche. Cependant, cela peut parfois provoquer des décalages étranges dans vos mises en page. Par conséquent, vous devez toujours tester votre site après avoir activé le chargement différé.

Dois-je charger paresseusement tout mon contenu ?

Non, vous n'avez pas besoin de charger paresseux tout votre contenu. Vous pouvez choisir de ne charger paresseusement que des éléments spécifiques, tels que des images, des vidéos ou des iFrames.

Que puis-je faire d'autre pour améliorer les vitesses de chargement ?

En plus du chargement paresseux, il existe un certain nombre d'autres façons d'améliorer la vitesse de votre site WordPress, notamment :

• Utilisation d'un réseau de diffusion de contenu (CDN)
• Se concentrer sur l'amélioration des mêmes choses qui améliorent également Core Web Vitals.
• Optimisation de vos images
• Activation de la mise en cache du navigateur
• Minimisation des ressources

Accélérez votre site avec le chargement paresseux de WordPress

Le chargement différé de vos images est un excellent moyen d'optimiser les performances de votre site et d'améliorer votre expérience utilisateur globale. Jetpack Boost offre le moyen le plus pratique et le plus robuste d'activer le chargement paresseux, tout en fournissant d'autres outils de vitesse puissants. Prêt à commencer? Obtenez Jetpack Boost!