{"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&#8217;impl\u00e9menter sur votre site"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Qu'est-ce que le lazy loading ?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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=&rdquo;lazy&rdquo;&gt; aux images et vid&eacute;os cibl&eacute;es pour l&rsquo;activer automatiquement.<\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">&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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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\":\"6a702db3a59e6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a702db3a59e6\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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\":\"6a702db3a8a7f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a702db3a8a7f\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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\":\"6a702db3ab983\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a702db3ab983\" 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--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-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\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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>\n<\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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":1},{"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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-lazy-loading-how-to-implement-it-on-your-site\/","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-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-lazy-load\/","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},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/lazy-load-en-wordpress\/","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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-lazy-loading-como-implementa-lo-em-seu-site\/","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}]}}