{"id":36236,"date":"2024-11-15T23:51:15","date_gmt":"2024-11-15T23:51:15","guid":{"rendered":"\/tutoriels\/?p=36236"},"modified":"2024-11-28T15:36:16","modified_gmt":"2024-11-28T15:36:16","slug":"lazy-load-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/lazy-load-wordpress","title":{"rendered":"Lazy load WordPress : comment l&rsquo;impl\u00e9menter sur votre site"},"content":{"rendered":"<p>Si votre <strong>site WordPress<\/strong> s&rsquo;appuie fortement sur un contenu visuel, vous pouvez ajouter la fonctionnalit&eacute; de lazy load. Cette fonctionnalit&eacute; de WordPress permet d&rsquo;am&eacute;liorer la vitesse et les performances des pages d&rsquo;un site web, ce qui la rend essentielle pour vos efforts de r&eacute;f&eacute;rencement.<\/p><p>Cet article examine le fonctionnement du lazy load WordPress, ainsi que ses avantages et ses inconv&eacute;nients. Vous apprendrez &eacute;galement comment le mettre en &oelig;uvre sur votre site web et comment optimiser son utilisation pour obtenir de meilleurs r&eacute;sultats.<\/p><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">Qu'est-ce que le lazy loading ?<\/h2>\n                    <p>Le lazy loading  est une fonctionnalit&eacute; qui permet &agrave; un site web de ne charger que les images visibles par l&rsquo;utilisateur. Elle aide le site &agrave; maintenir une vitesse de chargement rapide en ne t&eacute;l&eacute;chargeant pas les images en dehors de la fen&ecirc;tre de visualisation.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-fonctionne-le-lazy-load-de-wordpress\"><strong>Comment fonctionne le lazy load de WordPress ?<\/strong><\/h2><p>Lorsqu&rsquo;un utilisateur visite un site web WordPress, son navigateur t&eacute;l&eacute;charge toutes les images de la page web en une seule fois. Pour les pages contenant de nombreuses images &agrave; haute r&eacute;solution, ce processus peut augmenter le temps de chargement de mani&egrave;re significative, ce qui nuit aux performances de votre site.<\/p><p>L&rsquo;ajout d&rsquo;un lazy loading &agrave; votre site web l&rsquo;incite &agrave; ne t&eacute;l&eacute;charger que les images visibles sur l&rsquo;&eacute;cran de l&rsquo;utilisateur. Les autres fichiers multim&eacute;dias sont remplac&eacute;s par une image de remplacement et ne sont charg&eacute;s que lorsque l&rsquo;utilisateur fait d&eacute;filer la page web.<\/p><h2 class=\"wp-block-heading\" id=\"h-avantages-et-inconvenients-du-lazy-load-de-wordpress\"><strong>Avantages et inconv&eacute;nients du lazy load de WordPress<\/strong><\/h2><p>Si vous vous demandez encore si vous devriez mettre en &oelig;uvre le lazy loading des images dans WordPress, voici les avantages et les inconv&eacute;nients de cette fonctionnalit&eacute; :<\/p><p><strong>Pour :<\/strong><\/p><ul class=\"wp-block-list\">\n<li>R&eacute;duit l&rsquo;utilisation de la bande passante, ce qui diminue les co&ucirc;ts d&rsquo;h&eacute;bergement.<\/li>\n\n\n\n<li>Am&eacute;liore la vitesse du site, am&eacute;liorant ainsi l&rsquo;exp&eacute;rience de navigation des visiteurs.<\/li>\n\n\n\n<li>Am&eacute;liore l&rsquo;exp&eacute;rience mobile.<\/li>\n\n\n\n<li>Optimise le score du <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/largest-contentful-paint\">Largest Contentful Paint<\/a>.<\/li>\n\n\n\n<li>Am&eacute;liore les efforts de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-le-seo-un-guide-complet\"><strong>r&eacute;f&eacute;rencement<\/strong><\/a>, en augmentant le classement de votre site dans les moteurs de recherche.<\/li>\n<\/ul><p><strong>Cons :<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Provoque une mise en m&eacute;moire tampon du contenu, ce qui nuit &agrave; la vitesse de chargement.<\/li>\n\n\n\n<li>Ralentit le d&eacute;filement rapide.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-comment-ajouter-le-lazy-load-a-votre-site-wordpress-3-methodes\"><strong>Comment ajouter le lazy load &agrave; votre site WordPress : 3 m&eacute;thodes<\/strong><\/h2><p>Il existe trois fa&ccedil;ons de mettre en &oelig;uvre le lazy load sur votre site WordPress. Nous vous recommandons de choisir celle qui convient le mieux &agrave; votre situation.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-mise-a-jour-vers-wordpress-5-4-ou-superieur\"><strong>1. Mise &agrave; jour vers WordPress 5.4 ou sup&eacute;rieur<\/strong><\/h3><p>WordPress 5.4 et les versions ult&eacute;rieures incluent par d&eacute;faut les images &agrave; chargement paresseux. La <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/mise-a-jour-wordpress\"><strong>mise &agrave; jour de votre WordPress<\/strong><\/a> vers la version la plus r&eacute;cente activera automatiquement le lazy load.<\/p><p>Bien qu&rsquo;il s&rsquo;agisse de la m&eacute;thode la plus simple, elle ne vous permet pas de configurer les images &agrave; charger paresseusement. Par cons&eacute;quent, votre site web risque d&rsquo;abuser de cette fonctionnalit&eacute; et de pr&eacute;senter les inconv&eacute;nients susmentionn&eacute;s.<\/p><p>Un autre facteur &agrave; prendre en compte est la nature diff&eacute;rente de la fonction de lazy load dans chaque version de WordPress. R&eacute;cemment, WordPress a publi&eacute; que WordPress 5.9 mettait en &oelig;uvre des raffinements pour r&eacute;soudre les probl&egrave;mes li&eacute;s aux mauvais scores de Large Contentful Paint des versions ant&eacute;rieures.<\/p><p>Cela signifie que les sites web fonctionnant avec des versions ant&eacute;rieures de WordPress ne b&eacute;n&eacute;ficient pas des m&ecirc;mes avantages que ceux qui utilisent WordPress 5.9.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-activer-le-lazy-load-natif-via-le-navigateur\"><strong>2. Activer le lazy load natif via le navigateur<\/strong><\/h3><p>Les navigateurs les plus r&eacute;pandus, tels que Chrome, Firefox et Opera, prennent en charge le lazy loading des images en mode natif. Il vous suffit d&rsquo;ajouter l&rsquo;attribut &lt;img loading=&nbsp;&raquo;lazy&nbsp;&raquo;&gt; aux images et vid&eacute;os cibl&eacute;es pour l&rsquo;activer automatiquement.<\/p><p>Dans le lazy load natif de WordPress, l&rsquo;attribut loading prend en charge ces trois valeurs :<\/p><ul class=\"wp-block-list\">\n<li><strong>Auto <\/strong>&ndash; d&eacute;clenche le lazy load par d&eacute;faut, ce qui revient &agrave; ne pas inclure d&rsquo;attribut de chargement.<\/li>\n\n\n\n<li><strong>Lazy <\/strong>&ndash; r&eacute;partit le chargement des &eacute;l&eacute;ments jusqu&rsquo;&agrave; ce que chacun atteigne la distance sp&eacute;cifi&eacute;e par rapport &agrave; la fen&ecirc;tre.<\/li>\n\n\n\n<li><strong>Eager <\/strong>&ndash; charge toutes les ressources d&egrave;s le chargement de la page, quel que soit leur emplacement.<\/li>\n<\/ul><p>Voici un exemple d&rsquo;utilisation :<\/p><pre class=\"wp-block-preformatted\">&lt;img src=\"nom-image.png\" loading=\"lazy\" alt=\"attribut alt\" width=\"200&Prime; height=\"200&Prime;&gt;<\/pre><p>Cette m&eacute;thode est id&eacute;ale pour le lazy load de certaines images, en attribuant &agrave; chacune d&rsquo;elles un attribut de chargement qui d&eacute;termine le moment de leur apparition dans la fen&ecirc;tre de visualisation. Cependant, le lazy load d&rsquo;images individuelles peut prendre un certain temps, surtout si votre site web contient de nombreux fichiers multim&eacute;dias.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-installer-un-plugin\"><strong>3. Installer un plugin<\/strong><\/h3><p>&Eacute;tant donn&eacute; que tous les navigateurs ne prennent pas en charge le lazy load des images et des vid&eacute;os, la deuxi&egrave;me m&eacute;thode risque de ne pas fonctionner tout le temps. Vous pouvez att&eacute;nuer ce probl&egrave;me en <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-plugin-wordpress\"><strong>installant un plugin WordPress<\/strong><\/a> de lazy loading. Cette m&eacute;thode vous permet de mieux contr&ocirc;ler les images &agrave; charger paresseusement sans avoir &agrave; coder.<\/p><p>Voici les <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/plugin-wordpress\"><strong>meilleurs plugins WordPress<\/strong><\/a> pour le lazy load, accessibles via le r&eacute;pertoire de plugins de WordPress.<\/p><p><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener\"><strong>Optimisation des images et lazy load par Optimole<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f91a5122418\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"772\" height=\"250\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Optimole-plugin-page.png\/public\" alt=\"Banni&egrave;re du plugin WordPress Optimole\" class=\"wp-image-36277\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Optimole-plugin-page.png\/w=772,fit=scale-down 772w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Optimole-plugin-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Optimole-plugin-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Optimole-plugin-page.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>L&rsquo;un des points forts d&rsquo;Optimole est qu&rsquo;il prend en charge tous les types d&rsquo;images, y compris AVIF. Ce plugin freemium de lazy load WordPress permet d&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/optimiser-images-wordpress\"><strong>optimiser les images WordPress<\/strong><\/a> et de les mettre &agrave; l&rsquo;&eacute;chelle pour qu&rsquo;elles s&rsquo;adaptent aux appareils des visiteurs, garantissant ainsi une exp&eacute;rience utilisateur optimale.<\/p><p>Lorsqu&rsquo;il d&eacute;tecte un r&eacute;seau plus lent, Optimole vous donne la possibilit&eacute; de r&eacute;duire la qualit&eacute; de l&rsquo;image. En outre, vous pouvez &eacute;conomiser de l&rsquo;espace de stockage en stockant vos images dans la biblioth&egrave;que en nuage d&rsquo;Optimole.<\/p><p>Le plugin gratuit vous permet d&rsquo;optimiser les images pour un maximum de 5 000 visites mensuelles. L&rsquo;achat du plan Pro vous permet de charger paresseusement des images pour 25 000 visiteurs actifs mensuels et plus. Dans les deux cas, les images sont servies via le CDN AWS Cloudfront.<\/p><p><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\"><strong>Smush<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f91a5122bef\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"940\" height=\"304\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Smush-plugin-page.png\/public\" alt=\"Banni&egrave;re du plugin WordPress Smush\" class=\"wp-image-36278\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Smush-plugin-page.png\/w=940,fit=scale-down 940w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Smush-plugin-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Smush-plugin-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/Smush-plugin-page.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Smush est un plugin d&rsquo;optimisation d&rsquo;image populaire qui prend en charge le lazy load. Il est compatible avec les th&egrave;mes populaires, les constructeurs de pages et les plugins de biblioth&egrave;que multim&eacute;dia. De plus, il vous permet d&rsquo;enregistrer les param&egrave;tres du plugin dans des configurations illimit&eacute;es et de les appliquer en quelques clics.<\/p><p>D&rsquo;autres fonctionnalit&eacute;s utiles incluent la d&eacute;tection de taille d&rsquo;image incorrecte, le support multisite et des outils de compression d&rsquo;image. La mise &agrave; niveau vers Smush Pro vous permet d&rsquo;optimiser les grandes images sans limitation de taille, de sauvegarder les images originales et d&rsquo;acc&eacute;der &agrave; d&rsquo;autres plugins WPMU Pro. Les prix commencent &agrave; partir de <strong>5.69 &euro;\/mois<\/strong>.<\/p><p><a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener\"><strong>a3 Lazy Load<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f91a51232d5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"772\" height=\"250\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/a3-Lazy-Load-plugin-page.png\/public\" alt=\"Banni&egrave;re du plugin WordPress a3 Lazy Load \" class=\"wp-image-36279\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/a3-Lazy-Load-plugin-page.png\/w=772,fit=scale-down 772w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/a3-Lazy-Load-plugin-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/a3-Lazy-Load-plugin-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/11\/a3-Lazy-Load-plugin-page.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>a3 Lazy Load est un plugin gratuit de lazy load orient&eacute; mobile. Il est enti&egrave;rement compatible avec WordPress 5.9 et un certain nombre d&rsquo;outils populaires, y compris les plugins WebP et AMP.<\/p><p>Outre les fonctionnalit&eacute;s de base du lazy load d&rsquo;images, a3 Lazy Load vous permet &eacute;galement de charger paresseusement des vid&eacute;os, y compris des vid&eacute;os int&eacute;gr&eacute;es dans des pages, des articles, des types d&rsquo;articles personnalis&eacute;s et des widgets. Des effets de lazy load et l&rsquo;option de charger des scripts depuis l&rsquo;en-t&ecirc;te ou le pied de page sont &eacute;galement disponibles.<\/p><p>Parmi les autres fonctionnalit&eacute;s notables, citons la prise en charge du multisite, la prise en charge des images WebP et le lazy load des iframes &ndash; qui s&rsquo;applique aux iframes que le noyau de WordPress ne charge pas, comme Google Maps et les m&eacute;dias int&eacute;gr&eacute;s.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conseils-sur-le-lazy-loading-de-wordpress\"><strong>Conseils sur le lazy loading de WordPress<\/strong><\/h2><p>La cl&eacute; pour tirer le meilleur parti du lazy loading est de l&rsquo;utiliser correctement. Voici quelques conseils pour utiliser le lazy load sur votre site WordPress :<\/p><ul class=\"wp-block-list\">\n<li><strong>Ne chargez pas paresseusement les images au-dessus du pli<\/strong>. Les images plac&eacute;es en haut de la page &eacute;tant visibles au chargement, il n&rsquo;y a aucun avantage &agrave; les charger paresseusement.<\/li>\n\n\n\n<li><strong>Choisissez des espaces r&eacute;serv&eacute;s appropri&eacute;s.<\/strong> Nous vous recommandons d&rsquo;utiliser une couleur dominante unie ou une image de faible qualit&eacute; comme marqueur pour vos images.<\/li>\n\n\n\n<li><strong>Ajoutez un temps tampon pour le chargement des images.<\/strong> De cette fa&ccedil;on, vos images sont pr&ecirc;tes juste avant d&rsquo;entrer dans la fen&ecirc;tre du visiteur, ce qui &eacute;limine tout temps d&rsquo;attente.<\/li>\n\n\n\n<li><strong>D&eacute;finissez les dimensions des conteneurs d&rsquo;images. <\/strong>Vous &eacute;viterez ainsi les changements soudains de mise en page, ce qui donnera &agrave; votre page web un aspect ordonn&eacute; lors de son chargement.<\/li>\n\n\n\n<li><strong>Impl&eacute;mentez le lazy loading uniquement sur les pages longues<\/strong>. Les pages longues sont celles qui n&eacute;cessitent plus de deux d&eacute;filements pour atteindre la fin et qui comportent plus de cinq images sous le pli.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Le lazy loading des images dans WordPress vous permet d&rsquo;offrir aux visiteurs une meilleure exp&eacute;rience de navigation. En plus d&rsquo;am&eacute;liorer la vitesse du site, cette fonctionnalit&eacute; r&eacute;duit &eacute;galement l&rsquo;utilisation de la bande passante. Dans l&rsquo;ensemble, elle contribue &agrave; vos efforts de r&eacute;f&eacute;rencement pour un meilleur classement dans les moteurs de recherche.<\/p><p>Nous esp&eacute;rons que cet article vous a aid&eacute; &agrave; comprendre comment tirer le meilleur parti de la fonction de lazy load sur les sites WordPress. Veillez &agrave; utiliser un <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\"><strong>h&eacute;bergement WordPress<\/strong><\/a> de haute qualit&eacute; pour am&eacute;liorer encore les performances de votre site. Nous vous souhaitons bonne chance !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si votre site WordPress s&rsquo;appuie fortement sur un contenu visuel, vous pouvez ajouter la fonctionnalit&eacute; de lazy load. Cette fonctionnalit&eacute; de WordPress permet d&rsquo;am&eacute;liorer la vitesse et les performances des pages d&rsquo;un site web, ce qui la rend essentielle pour vos efforts de r&eacute;f&eacute;rencement. Cet article examine le fonctionnement du lazy load WordPress, ainsi que [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/lazy-load-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Lazy load WordPress : Qu'est-ce que c'est et comment l'activer","rank_math_description":"Le lazy load WordPress devrait \u00eatre une priorit\u00e9 pour les sites web contenant des m\u00e9dias. Apprenez \u00e0 l'activer de 3 mani\u00e8res diff\u00e9rentes.","rank_math_focus_keyword":"lazy load wordpress","footnotes":""},"categories":[5811,4777],"tags":[],"class_list":["post-36236","post","type-post","status-publish","format-standard","hentry","category-optimisation","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-lazy-load","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-lazy-loading","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/lazy-load-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-lazy-loading-how-to-implement-it-on-your-site","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-lazy-loading-how-to-implement-it-on-your-site","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-lazy-loading-como-implementa-lo-em-seu-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-lazy-load","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/36236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=36236"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/36236\/revisions"}],"predecessor-version":[{"id":36280,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/36236\/revisions\/36280"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=36236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=36236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=36236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}