{"id":9755293,"date":"2026-10-12T17:18:30","date_gmt":"2026-10-12T15:18:30","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=9755293"},"modified":"2026-10-12T17:18:33","modified_gmt":"2026-10-12T15:18:33","slug":"lazy-load-wordpress","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/","title":{"rendered":"Lazy load sur WordPress\u00a0: appliquez-le aux images, aux vid\u00e9os et plus encore"},"content":{"rendered":"\n<p>Votre site WordPress utilise beaucoup d&rsquo;images\u00a0? Rien d&rsquo;\u00e9tonnant, puisqu&rsquo;elles sont <a href=\"https:\/\/httparchive.org\/reports\/state-of-images\">le format de m\u00e9dia le plus r\u00e9pandu<\/a> sur le Web. Pourtant, dans le m\u00eame temps, les images peuvent s\u00e9rieusement ralentir votre site, et c&rsquo;est pourquoi vous devez savoir utiliser le <strong>lazy load sur WordPress<\/strong>.<\/p>\n\n\n\n<p>Nous avons d\u00e9j\u00e0 parl\u00e9 de l&rsquo;<a href=\"https:\/\/wp-rocket.me\/blog\/image-optimization-wordpress\/\">optimisation des images<\/a>, qui consiste \u00e0 les rendre aussi l\u00e9g\u00e8res que possible pour qu&rsquo;elles se chargent rapidement. Toutefois, vous ne pouvez r\u00e9duire la taille de vos images que jusqu&rsquo;\u00e0 un certain point sans en compromettre la qualit\u00e9. De plus, si vous avez beaucoup d&rsquo;images sur une m\u00eame page, leurs tailles s&rsquo;additionnent, m\u00eame si elles ont \u00e9t\u00e9 optimis\u00e9es.<\/p>\n\n\n\n<p>Adame Dahmani, Product Manager chez WP Rocket, explique\u00a0:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Le lazy-loading diff\u00e8re le chargement des images, des vid\u00e9os et des iframes hors \u00e9cran jusqu&rsquo;\u00e0 ce qu&rsquo;elles soient n\u00e9cessaires, ce qui r\u00e9duit les requ\u00eates inutiles. Cela all\u00e8ge la pression sur la bande passante et sur le traitement, et aide le navigateur \u00e0 g\u00e9rer plus efficacement le thread principal et le chemin critique du rendu. Lorsqu&rsquo;il est correctement mis en place, il am\u00e9liore le <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-first-contentful-paint\/\">First Contentful Paint<\/a> et souvent le <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\">Largest Contentful Paint<\/a> en donnant la priorit\u00e9 au contenu situ\u00e9 au-dessus de la ligne de flottaison.<\/p>\n<\/blockquote>\n\n\n\n<p>Voil\u00e0 une raison suffisante pour consacrer un guide d\u00e9taill\u00e9 au lazy-loading sur WordPress, vous ne trouvez pas\u00a0? C&rsquo;est pourquoi, dans cet article, vous allez d\u00e9couvrir comment il fonctionne et comment vous pouvez appliquer le lazy-loading \u00e0 votre site pour obtenir les meilleurs r\u00e9sultats.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu&rsquo;est-ce que le lazy-loading\u00a0?<\/h2>\n\n\n\n<p>En temps normal, lorsque vous ouvrez une page web, votre navigateur charge toutes ses donn\u00e9es en une seule fois. Chaque image, chaque texte, chaque lien, etc. qu&rsquo;elle contient.<\/p>\n\n\n\n<p>Avec les images en particulier, quand elles sont nombreuses, cela peut prendre beaucoup de temps. Les images sont bien plus lourdes que les autres \u00e9l\u00e9ments d&rsquo;un site web. De plus, pendant que le navigateur s&rsquo;en occupe, elles bloquent souvent le chargement d&rsquo;autres ressources, si bien que votre page ne peut pas terminer son rendu.<\/p>\n\n\n\n<p>R\u00e9sultat\u00a0: vos visiteurs doivent attendre longtemps avant de voir la page web qu&rsquo;ils ont demand\u00e9e. Et beaucoup ne patienteront pas jusque-l\u00e0, ce qui fait grimper votre <a href=\"https:\/\/wp-rocket.me\/blog\/optimize-wordpress-bounce-rate\/\">taux de rebond<\/a>.<\/p>\n\n\n\n<p>Le <strong>lazy-loading<\/strong> \u00e9vite cela en emp\u00eachant le chargement des images et des autres ressources qui ne sont pas visibles \u00e0 l&rsquo;\u00e9cran au d\u00e9part, et c&rsquo;est un moyen efficace d&rsquo;<a href=\"https:\/\/wp-rocket.me\/blog\/optimize-website-loading-time\/\">optimiser le temps de chargement de votre site web<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1532\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example.jpg\" alt=\"R\u00e9sultats Google Images pour \u00ab\u202fpuppies\u202f\u00bb\u00a0: les images du bas de la page, encadr\u00e9es en rouge, ne sont pas encore charg\u00e9es\" class=\"wp-image-6919132\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example.jpg 1500w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example-191x195.jpg 191w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example-768x784.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example-59x60.jpg 59w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/google-images-lazy-loading-example-88x90.jpg 88w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p>\u00c0 la place, les images situ\u00e9es plus bas dans la page ne se chargent qu&rsquo;au fur et \u00e0 mesure, quand les visiteurs font d\u00e9filer la page jusqu&rsquo;\u00e0 elles. Ainsi, elles n&rsquo;encombrent pas le navigateur, qui peut charger plus rapidement les autres parties du site. Par cons\u00e9quent, les pages s&rsquo;affichent plus vite pour les visiteurs, ce qui leur offre une meilleure exp\u00e9rience.<\/p>\n\n\n\n<p>C&rsquo;est d&rsquo;ailleurs exactement ce que veulent dire les <a href=\"https:\/\/wp-rocket.me\/blog\/how-to-test-wordpress-site-performance-measure-speed-results\/\">outils de test de vitesse<\/a> lorsqu&rsquo;ils vous recommandent\u00a0: \u00ab\u202f<a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\">Diff\u00e9rez le chargement des images hors \u00e9cran<\/a>\u202f\u00bb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment fonctionne le lazy-loading<\/h3>\n\n\n\n<p>Il existe plusieurs fa\u00e7ons de mettre en place le lazy-loading. Autrefois, il vous fallait pour cela du JavaScript assez \u00e9labor\u00e9. Mais aujourd&rsquo;hui, c&rsquo;est devenu une fonctionnalit\u00e9 standard des navigateurs.<\/p>\n\n\n\n<p>Par cons\u00e9quent, vous pouvez tout simplement signaler, avec un attribut HTML, les images que vous voulez charger de cette mani\u00e8re, et les navigateurs de vos visiteurs feront le reste.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"391\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools.jpg\" alt=\"L&#x27;attribut loading de valeur lazy d&#x27;une balise img, encadr\u00e9 en rouge dans l&#x27;inspecteur des outils de d\u00e9veloppement du navigateur\" class=\"wp-image-6919150\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools.jpg 1500w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools-310x81.jpg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools-768x200.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools-190x50.jpg 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-attribute-in-browser-developer-tools-345x90.jpg 345w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p>C&rsquo;est tr\u00e8s pratique, car cela facilite la mise en place, ne n\u00e9cessite aucun code suppl\u00e9mentaire sur votre site et standardise l&rsquo;approche. Comme c&rsquo;est devenu la norme de fait, on parle d\u00e9sormais aussi de \u00ab\u202flazy-loading natif\u202f\u00bb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les avantages du lazy-loading<\/h3>\n\n\n\n<p>Maintenant que vous savez comment il fonctionne, quels sont les avantages du <strong>lazy-loading des images<\/strong> sur votre site\u00a0?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Temps de chargement des pages am\u00e9lior\u00e9s<\/strong>\u00a0: nous en avons d\u00e9j\u00e0 parl\u00e9. En emp\u00eachant les images et les autres m\u00e9dias de se charger d\u00e8s le d\u00e9part, vous pouvez r\u00e9duire consid\u00e9rablement le temps n\u00e9cessaire \u00e0 l&rsquo;affichage d&rsquo;une page web.<\/li>\n\n\n\n<li><strong>Moins de travail pour le navigateur<\/strong>\u00a0: si les images sont charg\u00e9es en diff\u00e9r\u00e9, votre navigateur n&rsquo;aura pas besoin de les analyser tant qu&rsquo;un visiteur ne fait pas d\u00e9filer la page vers le bas.<\/li>\n\n\n\n<li><strong>Moins de requ\u00eates HTTP<\/strong>\u00a0: vous allez aussi <a href=\"https:\/\/wp-rocket.me\/blog\/reduce-http-requests-speed-wordpress-site\/\">r\u00e9duire le nombre de requ\u00eates HTTP<\/a> et am\u00e9liorer la note du Largest Contentful Paint.<\/li>\n\n\n\n<li><strong>Meilleure exp\u00e9rience utilisateur<\/strong>\u00a0: les visiteurs adorent les pages qui se chargent vite, si bien que le lazy-loading peut favoriser les conversions et d&rsquo;autres indicateurs d&rsquo;engagement.<\/li>\n\n\n\n<li><strong>Co\u00fbts de serveur et de CDN r\u00e9duits<\/strong>\u00a0: votre serveur ou votre CDN aura moins de donn\u00e9es \u00e0 t\u00e9l\u00e9charger, ce qui se traduit par des factures moins \u00e9lev\u00e9es si votre bande passante est limit\u00e9e.<\/li>\n\n\n\n<li><strong>Performances mobiles plus rapides<\/strong>\u00a0: les images p\u00e8sent davantage sur les connexions mobiles plus lentes. Si vous r\u00e9duisez leur influence, vos utilisateurs mobiles en profiteront tout particuli\u00e8rement.<\/li>\n\n\n\n<li><strong>Avantages pour le SEO<\/strong>\u00a0: le <strong>lazy-loading<\/strong> am\u00e9liore les <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\">Core Web Vitals<\/a>, qui sont un facteur de classement de Google.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Les inconv\u00e9nients possibles<\/h3>\n\n\n\n<p>En revanche, le lazy-loading peut aussi s&rsquo;accompagner de probl\u00e8mes\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Probl\u00e8mes de performance<\/strong>\u00a0: utiliser le lazy load au-dessus de la ligne de flottaison (logos, images hero, etc.) peut en r\u00e9alit\u00e9 nuire aux performances. En effet, l&rsquo;\u00e9l\u00e9ment Largest Contentful Paint est probablement une image situ\u00e9e au-dessus de la ligne de flottaison, et il devrait donc se charger le plus vite possible. Nous verrons plus loin comment exclure des images du lazy-loading.<\/li>\n\n\n\n<li><strong>Probl\u00e8mes de SEO<\/strong>\u00a0: si vous le mettez en place de mani\u00e8re incorrecte, vous pouvez emp\u00eacher les moteurs de recherche d&rsquo;indexer les images charg\u00e9es en diff\u00e9r\u00e9. Toutefois, si vous suivez les instructions donn\u00e9es ici, cela ne devrait pas poser de probl\u00e8me.<\/li>\n\n\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00e9calages de mise en page<\/strong>\u00a0: si vous ne d\u00e9finissez pas la taille des images charg\u00e9es en diff\u00e9r\u00e9, la mise en page du site peut se d\u00e9caler, ce qui p\u00e9nalise le <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-cumulative-layout-shift\/\">Cumulative Layout Shift<\/a>.<\/li>\n\n\n\n<li><strong>Conflits possibles<\/strong>\u00a0: la fonctionnalit\u00e9 peut entrer en conflit avec certains plugins.<\/li>\n\n\n\n<li><strong>Effets sur l&rsquo;exp\u00e9rience utilisateur<\/strong>\u00a0: le lazy-loading se remarque quand quelqu&rsquo;un fait d\u00e9filer la page tr\u00e8s rapidement vers le bas.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Quand utiliser le lazy-loading<\/h3>\n\n\n\n<p>Alors, dans quels cas est-il judicieux d&rsquo;utiliser cette technique\u00a0?<\/p>\n\n\n\n<p>Dans la plupart des cas, elle est surtout efficace si vous avez beaucoup d&rsquo;images sur votre site web, par exemple de longs articles de blog avec de nombreuses captures d&rsquo;\u00e9cran. Mais cela peut aussi s&rsquo;appliquer aux pages produits ou aux pages de portfolio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1317\" height=\"2048\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-scaled.jpg\" alt=\"Page de catalogue de la boutique en ligne H&amp;M\u00a0: les images des produits situ\u00e9s plus bas, encadr\u00e9es en rouge, ne sont pas encore charg\u00e9es\" class=\"wp-image-6919168\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-scaled.jpg 1317w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-125x195.jpg 125w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-768x1194.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-39x60.jpg 39w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-in-ecommerce-58x90.jpg 58w\" sizes=\"auto, (max-width: 1317px) 100vw, 1317px\" \/><\/figure>\n\n\n\n<p>Quant \u00e0 savoir quelles images pr\u00e9cis\u00e9ment charger en diff\u00e9r\u00e9, il devrait s&rsquo;agir de celles situ\u00e9es sous la ligne de flottaison. Cela r\u00e9duira le temps de chargement des pages sans nuire \u00e0 l&rsquo;exp\u00e9rience utilisateur. Nous avons d\u00e9j\u00e0 mentionn\u00e9 plus haut que vous ne devriez pas appliquer le lazy load aux images situ\u00e9es au-dessus de la ligne de flottaison, car cela peut nuire au temps de chargement des pages.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Le saviez-vous\u00a0?<\/strong> WP Rocket inclut d\u00e9sormais <a href=\"https:\/\/wp-rocket.me\/fr\/blog\/wp-rocket-3-21\/\">Rocket Insights<\/a>, le hub de performance int\u00e9gr\u00e9 qui s&rsquo;appuie sur GTmetrix. Il apporte le suivi des performances l\u00e0 o\u00f9 vous optimisez d\u00e9j\u00e0 votre site, pour que vous puissiez surveiller vos pages cl\u00e9s, comprendre vos r\u00e9sultats, obtenir des recommandations claires li\u00e9es aux fonctionnalit\u00e9s de WP Rocket et relancer un test \u00e0 tout moment, le tout sans jongler entre plusieurs outils.<\/p>\n\n<p>\ud83d\ude80 <strong>Mettez \u00e0 jour WP Rocket vers la derni\u00e8re version<\/strong> pour commencer \u00e0 utiliser Rocket Insights directement depuis votre tableau de bord\u00a0: c&rsquo;est inclus gratuitement dans votre offre\u00a0!<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Comment charger les images en diff\u00e9r\u00e9 avec le lazy-loading natif<\/h2>\n\n\n\n<p>Assez de th\u00e9orie, passons \u00e0 la pratique. Pour commencer, voyons comment mettre en place le lazy-loading si vous voulez utiliser la solution native du navigateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">L&rsquo;attribut HTML loading<\/h3>\n\n\n\n<p>Pour que les navigateurs appliquent le lazy-loading, les \u00e9l\u00e9ments du site web \u00e0 diff\u00e9rer doivent \u00eatre marqu\u00e9s avec l&rsquo;attribut HTML &lt;loading=\u201clazy\u201d&gt;. Voici \u00e0 quoi cela ressemble en pratique\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"wp-rocket-is-awesome.jpg\" loading=\"lazy\" alt=\"WP Rocket\" \/&gt;\n&lt;iframe src=\"WP-Cache-Basics.html\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<p>L&rsquo;attribut accepte deux valeurs\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>lazy<\/strong>\u00a0: diff\u00e8re le chargement des \u00e9l\u00e9ments image ou iframe.<\/li>\n\n\n\n<li><strong>eager<\/strong>\u00a0: c&rsquo;est le comportement de chargement standard. La ressource est demand\u00e9e imm\u00e9diatement, quel que soit son emplacement.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Actuellement, l&rsquo;attribut loading ne prend en charge que les balises &lt;img&gt; et &lt;iframe&gt;. Vous ne pouvez pas, par exemple, l&rsquo;utiliser pour charger en diff\u00e9r\u00e9 des images d&rsquo;arri\u00e8re-plan CSS. Nous verrons plus bas les options qui permettent de le faire.<\/p>\n\n\n\n<p>De plus, comme cet attribut a \u00e9t\u00e9 adopt\u00e9 par pratiquement tous les navigateurs (voir ci-dessous), cette m\u00e9thode est aussi la plus s\u00fbre pour l&rsquo;indexation des images charg\u00e9es en diff\u00e9r\u00e9 dans une optique SEO. Tant que la balise img contient un attribut src, Google, au moins, ne devrait avoir aucun probl\u00e8me pour indexer vos images.<\/p>\n\n\n\n<p>Ce n&rsquo;est que si vous mettez en place le lazy-loading avec JavaScript qu&rsquo;il peut \u00eatre judicieux d&rsquo;indiquer le src dans une balise &lt;noscript&gt;. C&rsquo;est utile pour les moteurs de recherche dont les robots d&rsquo;exploration ne savent pas traiter le JavaScript (l\u00e0 encore, Google s&rsquo;en sort tr\u00e8s bien).<\/p>\n\n\n\n<p>Dans les deux cas, fournir en plus un sitemap d&rsquo;images est une bonne id\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Compatibilit\u00e9 des navigateurs<\/h3>\n\n\n\n<p>Le lazy-loading est devenu une norme de fait du Web. D&rsquo;apr\u00e8s <a href=\"https:\/\/caniuse.com\/loading-lazy-attr\">Can I Use<\/a>, il devrait fonctionner pour plus de 95\u00a0% des internautes dans le monde.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1375\" height=\"493\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support.jpg\" alt=\"Tableau de Can I Use sur la prise en charge de l&#x27;attribut loading pour les images et les iframes par les navigateurs\u00a0: 95,57\u00a0% des utilisateurs dans le monde\" class=\"wp-image-6919177\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support.jpg 1375w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support-310x111.jpg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support-768x275.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support-167x60.jpg 167w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loading-browser-support-251x90.jpg 251w\" sizes=\"auto, (max-width: 1375px) 100vw, 1375px\" \/><\/figure>\n\n\n\n<p>Par ailleurs, m\u00eame si vous avez mis en place le lazy-loading sur votre site, il ne d\u00e9gradera pas l&rsquo;exp\u00e9rience dans un navigateur qui ne le prend pas en charge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le lazy-loading dans WordPress\u00a0: les options int\u00e9gr\u00e9es<\/h2>\n\n\n\n<p>Depuis WordPress 5.5, le CMS applique par d\u00e9faut le <strong>lazy-loading<\/strong> aux images. La fonctionnalit\u00e9 a \u00e9t\u00e9 \u00e9tendue aux iframes dans la version 5.7, puis affin\u00e9e dans WordPress 5.9.<\/p>\n\n\n\n<p>Ainsi, <a href=\"https:\/\/wp-rocket.me\/blog\/squarespace-to-wordpress\/\">si vous avez migr\u00e9 votre site d&rsquo;un CMS comme Squarespace vers WordPress<\/a>, et si votre site WordPress tourne sous la derni\u00e8re version, toute image ou iframe dot\u00e9e d&rsquo;attributs de largeur et de hauteur recevra automatiquement l&rsquo;attribut &lt;loading=\u201dlazy\u201d&gt;. Cette condition a \u00e9t\u00e9 ajout\u00e9e pour \u00e9viter les probl\u00e8mes de Cumulative Layout Shift \u00e9voqu\u00e9s plus haut.<\/p>\n\n\n\n<p>De plus, \u00e0 partir de WordPress 5.9, le lazy-loading ne s&rsquo;appliquera pas \u00e0 la premi\u00e8re iframe ou image d&rsquo;une page. Il s&rsquo;agit d&rsquo;\u00e9viter les probl\u00e8mes de LCP \u00e9voqu\u00e9s pr\u00e9c\u00e9demment.<\/p>\n\n\n\n<p>Par ailleurs, WordPress applique l&rsquo;attribut aux images pr\u00e9sentes aux emplacements suivants\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contenu des articles<\/li>\n\n\n\n<li>Extraits des articles<\/li>\n\n\n\n<li>Widgets Texte<\/li>\n\n\n\n<li>Images d&rsquo;avatar<\/li>\n\n\n\n<li>Images ajout\u00e9es en tant que fichiers joints<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Options de personnalisation<\/h3>\n\n\n\n<p>Il n&rsquo;existe actuellement aucune option sans code pour d\u00e9sactiver s\u00e9lectivement le lazy-loading natif de WordPress sur certaines pages ou certaines images. Si vous voulez le faire, vous devez utiliser un plugin ou certains des filtres et fonctions ci-dessous.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_lazy_loading_enabled\/\">wp_lazy_loading_enabled<\/a>\u00a0: vous pouvez l&rsquo;utiliser pour activer ou d\u00e9sactiver compl\u00e8tement le lazy-loading des images dans certains contextes.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_filter_content_tags\/\">wp_filter_content_tags()<\/a>\u00a0: ajoute les attributs srcset, sizes et loading aux balises HTML img, ainsi que l&rsquo;attribut loading aux iframes.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_img_tag_add_width_and_height_attr\">wp_img_tag_add_width_and_height_attr()<\/a>\u00a0: sert \u00e0 ajouter des attributs width et height aux balises img qui n&rsquo;en ont pas, pour que le lazy-loading puisse s&rsquo;y appliquer.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_img_tag_add_srcset_and_sizes_attr\">wp_img_tag_add_srcset_and_sizes_attr()<\/a>\u00a0: ajoute des attributs srcset et sizes aux balises img existantes, dans un but similaire \u00e0 celui de la fonction pr\u00e9c\u00e9dente.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_img_tag_add_loading_attr\">wp_img_tag_add_loading_attr()<\/a>\u00a0: ajoute l&rsquo;attribut loading aux balises img. Pour les iframes, utilisez wp_iframe_tag_add_loading_attr().<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_omit_loading_attr_threshold\/\">wp_omit_loading_attr_threshold()<\/a>\u00a0: d\u00e9finit un seuil indiquant combien des premi\u00e8res images et iframes ne doivent pas \u00eatre charg\u00e9es en diff\u00e9r\u00e9. Utile si votre site web affiche plusieurs \u00e9l\u00e9ments multim\u00e9dias au-dessus de la ligne de flottaison et que vous voulez d\u00e9sactiver le lazy load pour chacun d&rsquo;eux.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Pour des exemples d&rsquo;utilisation de ces filtres et fonctions afin de modifier le lazy-loading dans WordPress, consultez les annonces de <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/14\/lazy-loading-images-in-5-5\/#customizing-lazy-loading\">WordPress 5.5<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/19\/lazy-loading-iframes-in-5-7\/\">5.7<\/a> et <a href=\"https:\/\/make.wordpress.org\/core\/2021\/12\/29\/enhanced-lazy-loading-performance-in-5-9\/\">5.9<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conseils de d\u00e9pannage<\/h3>\n\n\n\n<p>Si le lazy-loading natif ne fonctionne pas sur votre site WordPress, c&rsquo;est probablement parce que vous ciblez des \u00e9l\u00e9ments qui ne sont pas dans des balises &lt;img&gt; ou &lt;iframe&gt;. Ce sont les seules balises auxquelles WordPress applique nativement le lazy-loading. Pour d&rsquo;autres options, consultez la section suivante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment activer le lazy-loading de WordPress pour les images et les vid\u00e9os avec un plugin<\/h2>\n\n\n\n<p>Il existe de nombreux <a href=\"https:\/\/wp-rocket.me\/blog\/best-lazy-load-plugins-wordpress\/\">plugins pour ajouter le lazy-loading \u00e0 votre site<\/a>. Mais le moyen de loin le plus simple, c&rsquo;est WP Rocket. Cela prend moins d&rsquo;une minute.<\/p>\n\n\n\n<p>Il vous suffit d&rsquo;aller dans <strong>R\u00e9glages &gt; WP Rocket &gt; M\u00e9dia<\/strong> dans votre tableau de bord WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1179\" height=\"964\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket.jpg\" alt=\"L&#x27;onglet M\u00e9dia des r\u00e9glages de WP Rocket, avec les cases LazyLoad coch\u00e9es pour les images, les images d&#x27;arri\u00e8re-plan CSS, les iframes et les vid\u00e9os, et l&#x27;option des dimensions d&#x27;image manquantes\" class=\"wp-image-6919188\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket.jpg 1179w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket-238x195.jpg 238w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket-768x628.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket-73x60.jpg 73w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/enable-lazy-loading-in-wordpress-via-wp-rocket-110x90.jpg 110w\" sizes=\"auto, (max-width: 1179px) 100vw, 1179px\" \/><\/figure>\n\n\n\n<p>Cochez les cases des types de m\u00e9dias pour lesquels vous voulez activer le lazy-loading\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Images<\/li>\n\n\n\n<li>Images background CSS<\/li>\n\n\n\n<li>iframes et vid\u00e9os<\/li>\n\n\n<\/ul>\n\n\n\n<p>Vous pouvez aussi demander \u00e0 WP Rocket de remplacer toutes les vid\u00e9os YouTube int\u00e9gr\u00e9es par une image d&rsquo;aper\u00e7u. Enfin, une option permet d&rsquo;ajouter des attributs de largeur et de hauteur aux images qui n&rsquo;en ont pas, pour qu&rsquo;elles puissent, elles aussi, b\u00e9n\u00e9ficier du lazy-loading.<\/p>\n\n\n\n<p>Faites vos choix et cliquez sur <strong>Enregistrer les modifications<\/strong> en bas de la page. Et voil\u00e0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences avec le lazy-loading natif<\/h3>\n\n\n\n<p>Comme vous pouvez d\u00e9j\u00e0 le constater, les options de WP Rocket vont au-del\u00e0 du lazy-loading natif de WordPress. L&rsquo;une des principales diff\u00e9rences est que WP Rocket applique aussi le lazy-loading aux images d&rsquo;arri\u00e8re-plan, qu&rsquo;elles soient d\u00e9finies en ligne ou dans des fichiers CSS. Voici par exemple un balisage compatible avec cette fonctionnalit\u00e9\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url(image.jpg)\"&gt;<\/code><\/pre>\n\n\n\n<p>Vous trouverez plus d&rsquo;informations sur le lazy-loading des images d&rsquo;arri\u00e8re-plan avec WP Rocket dans notre <a href=\"https:\/\/docs.wp-rocket.me\/article\/1141-using-lazyload-in-wp-rocket#background-images\">documentation technique<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment v\u00e9rifier que le lazy-loading fonctionne<\/h3>\n\n\n\n<p>Pour savoir si le lazy-loading est bien appliqu\u00e9 sur votre site web, vous pouvez utiliser les outils de d\u00e9veloppement du navigateur. Allez dans l&rsquo;onglet \u00ab\u202fR\u00e9seau\u202f\u00bb et utilisez le filtre \u00ab\u202fImage\u202f\u00bb. Rechargez la page\u00a0: vous ne devriez voir dans la liste que les images situ\u00e9es au-dessus de la ligne de flottaison.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"777\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working.jpg\" alt=\"Les outils de d\u00e9veloppement de Firefox sur wp-rocket.me, onglet Network et filtre Images\u00a0: seules les images du haut de la page figurent dans la liste\" class=\"wp-image-6919204\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working.jpg 1500w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working-310x161.jpg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working-768x398.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working-116x60.jpg 116w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/check-if-lazy-loading-for-wordpress-is-working-174x90.jpg 174w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<p>Quand vous commencez \u00e0 faire d\u00e9filer la page vers le bas, de plus en plus d&rsquo;images devraient appara\u00eetre. Vous devriez aussi voir la valeur lazyload dans la colonne \u00ab\u202fInitiateur\u202f\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"844\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1.jpg\" alt=\"La colonne Initiator des outils de d\u00e9veloppement de Firefox, encadr\u00e9e en rouge, indique lazy-img et lazy-imageset pour les images charg\u00e9es en diff\u00e9r\u00e9\" class=\"wp-image-6919215\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1.jpg 1500w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1-310x174.jpg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1-768x432.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1-107x60.jpg 107w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/lazy-loaded-images-in-browser-developer-tools-1-160x90.jpg 160w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conseils de d\u00e9pannage<\/h3>\n\n\n\n<p>Si vous constatez que certaines images ne sont pas charg\u00e9es en diff\u00e9r\u00e9 alors que vous avez activ\u00e9 l&rsquo;option, plusieurs raisons sont possibles\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Certains types d&rsquo;images sont exclus volontairement, comme les galeries de produits WooCommerce<\/li>\n\n\n\n<li>Les images contiennent l&rsquo;un des attributs exclus, comme data-src et data-no-lazy<\/li>\n\n\n\n<li>L&rsquo;image a \u00e9t\u00e9 ajout\u00e9e dynamiquement avec JavaScript<\/li>\n\n\n\n<li>Un autre plugin qui ajoute du lazy-loading entre en conflit, ou votre th\u00e8me dispose de sa propre fonctionnalit\u00e9 de lazy-loading<\/li>\n\n\n<\/ul>\n\n\n\n<p>Pour en savoir plus, consultez notre documentation sur <a href=\"https:\/\/docs.wp-rocket.me\/article\/1421-some-images-are-not-lazyloaded\">les raisons pour lesquelles certaines images ne sont pas charg\u00e9es en diff\u00e9r\u00e9<\/a>, <a href=\"https:\/\/docs.wp-rocket.me\/article\/278-common-issues-with-lazyload\">les probl\u00e8mes courants li\u00e9s au LazyLoad<\/a> et <a href=\"https:\/\/docs.wp-rocket.me\/article\/38-lazyload-plugin-compatibility\">les plugins compatibles<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment d\u00e9sactiver le lazy-loading dans WordPress<\/h2>\n\n\n\n<p>Dans certains cas, vous voudrez d\u00e9sactiver le lazy-loading, que ce soit sur tout le site, sur une page enti\u00e8re ou pour certaines images pr\u00e9cises. Voici diff\u00e9rentes fa\u00e7ons de le faire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9sactivez compl\u00e8tement le lazy-loading natif de WordPress<\/h3>\n\n\n\n<p>Si vous voulez d\u00e9sactiver le lazy-loading int\u00e9gr\u00e9 \u00e0 votre site WordPress, vous pouvez le faire avec cet extrait de code\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp_lazy_loading_enabled', '__return_false' );<\/code><\/pre>\n\n\n\n<p>Placez-le dans le fichier functions.php de votre th\u00e8me (enfant\u00a0!). Sinon, ajoutez-le \u00e0 l&rsquo;aide d&rsquo;un plugin comme <a href=\"https:\/\/wordpress.org\/plugins\/wp-headers-and-footers\/\">Insert Headers and Footers<\/a> ou <a href=\"https:\/\/docs.wp-rocket.me\/article\/142-how-to-make-a-custom-mu-plugin\">cr\u00e9ez votre propre MU-plugin<\/a>.<\/p>\n\n\n\n<p>Pour d\u00e9sactiver le lazy-loading natif de WordPress uniquement dans certains contextes ou pour certaines images, reportez-vous aux fonctions et filtres de la section <em>Options de personnalisation<\/em> ci-dessus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9sactivez le lazy-loading dans WP Rocket<\/h3>\n\n\n\n<p>Vous pouvez d\u00e9sactiver la fonctionnalit\u00e9 LazyLoad de WP Rocket aussi facilement que vous l&rsquo;avez activ\u00e9e. Allez dans l&rsquo;onglet <strong>M\u00e9dia<\/strong>, d\u00e9cochez les cases et enregistrez.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"746\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket.jpg\" alt=\"La section LazyLoad de WP Rocket avec les trois cases d\u00e9coch\u00e9es et le bouton d&#x27;enregistrement des modifications mis en \u00e9vidence\" class=\"wp-image-6919229\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket.jpg 941w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket-246x195.jpg 246w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket-768x609.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket-76x60.jpg 76w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/disable-lazy-loading-in-wp-rocket-114x90.jpg 114w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Excluez certains articles et certaines pages du lazy-loading<\/h3>\n\n\n\n<p>Si vous voulez d\u00e9sactiver cette fonctionnalit\u00e9 uniquement sur un article ou une page en particulier, vous pouvez aussi le faire tr\u00e8s facilement avec WP Rocket. Ouvrez la page ou l&rsquo;article dans l&rsquo;\u00e9diteur et rep\u00e9rez les \u00ab\u202fOptions WP Rocket\u202f\u00bb dans la barre lat\u00e9rale (notez que le contenu doit \u00eatre publi\u00e9 pour qu&rsquo;elles soient disponibles).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1176\" height=\"613\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages.jpg\" alt=\"Le panneau des options WP Rocket dans la barre lat\u00e9rale de l&#x27;\u00e9diteur WordPress, avec les options LazyLoad de l&#x27;article, encadr\u00e9 en rouge\" class=\"wp-image-6919244\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages.jpg 1176w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages-310x162.jpg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages-768x400.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages-115x60.jpg 115w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/wp-rocket-options-to-disable-lazy-loading-on-individual-posts-and-pages-173x90.jpg 173w\" sizes=\"auto, (max-width: 1176px) 100vw, 1176px\" \/><\/figure>\n\n\n\n<p>Il vous suffit de d\u00e9cocher l&rsquo;option que vous ne voulez pas utiliser et de mettre \u00e0 jour le contenu. Si une option est gris\u00e9e, vous devez d&rsquo;abord l&rsquo;activer globalement dans les r\u00e9glages de WP Rocket.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retirez le lazy-loading de certaines images ou iframes<\/h3>\n\n\n\n<p>Vous pouvez aussi d\u00e9sactiver le lazy-loading pour certains \u00e9l\u00e9ments multim\u00e9dias. Vous trouverez cette option dans l&rsquo;onglet <strong>M\u00e9dia<\/strong> des r\u00e9glages de WP Rocket.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"938\" height=\"741\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket.jpg\" alt=\"Le champ des images ou iframes exclues dans la section LazyLoad de WP Rocket, avec un nom de fichier d&#x27;image saisi, encadr\u00e9 en rouge\" class=\"wp-image-6919261\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket.jpg 938w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket-247x195.jpg 247w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket-768x607.jpg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket-76x60.jpg 76w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/05\/exclude-individual-images-from-lazy-loading-in-wp-rocket-114x90.jpg 114w\" sizes=\"auto, (max-width: 938px) 100vw, 938px\" \/><\/figure>\n\n\n\n<p>Saisissez dans le champ le nom du fichier, la classe CSS, l&rsquo;attribut img, le nom de domaine (pour les images externes) ou le nom du fichier CSS de l&rsquo;image que vous ne voulez pas charger en diff\u00e9r\u00e9, puis enregistrez. Plus d&rsquo;informations et d&rsquo;exemples dans la <a href=\"https:\/\/docs.wp-rocket.me\/article\/15-disable-lazy-load-on-specific-images\">documentation<\/a>.<\/p>\n\n\n\n<p>Sachez toutefois que vous n&rsquo;avez pas besoin d&rsquo;utiliser cette fonctionnalit\u00e9 pour exclure du lazy load les images situ\u00e9es au-dessus de la ligne de flottaison. Comme ne pas les exclure peut avoir de telles cons\u00e9quences sur le Largest Contentful Paint et sur le score global de PageSpeed Insights, <a href=\"https:\/\/wp-rocket.me\/fr\/blog\/wp-rocket-3-16\/\">WP Rocket le fait automatiquement<\/a> sans que vous ayez \u00e0 lever le petit doigt. Si vous avez d&rsquo;autres raisons d&rsquo;exclure des images ou des iframes du lazy-loading, vous pouvez toujours utiliser la m\u00e9thode d\u00e9crite ci-dessus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modifiez le lazy-loading de WP Rocket avec du code<\/h3>\n\n\n\n<p>Si vous voulez mieux contr\u00f4ler le fonctionnement du lazy-loading dans WP Rocket, vous pouvez aussi le modifier avec du code. Les extraits ci-dessous se placent dans votre fichier functions.php ou dans un plugin pr\u00e9vu \u00e0 cet effet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9sactivez le lazy-loading sous conditions<\/h3>\n\n\n\n<p>Commen\u00e7ons par une structure de fonction g\u00e9n\u00e9rale que vous pouvez utiliser pour d\u00e9sactiver le lazy-loading dans diff\u00e9rentes situations\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action('wp', function () {\n\n   \t \/\/ Declare condition set to false as a default\n   \t $condition = false;\n\n   \t \/\/ Build your condition logic to turn \u2018$condition\u2019 to \u2018true\u2019 when applicable\n\n   \t if ($condition) {\n\n   \t  \/\/ Disable Rocket Lazy Load if condition is met\n   \t  add_filter('do_rocket_lazyload', '__return_false');\n   \t \n   \t }\n    }\n);<\/code><\/pre>\n\n\n\n<p>Voici ensuite quelques exemples d&rsquo;utilisation de cette approche.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactivez le lazy-loading sur toutes les pages<\/h4>\n\n\n\n<p>Utilisez ce code si vous voulez appliquer le lazy-loading aux images de vos articles, mais pas \u00e0 celles de vos pages\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp', function () {\n   \t if ( is_page() ) {\n   \t\t add_filter('do_rocket_lazyload', '__return_false');\n   \t }\n    }\n);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactivez le lazy load sur la page d&rsquo;accueil<\/h4>\n\n\n\n<p>D\u00e9sactivez le lazy-loading pour la page d&rsquo;accueil de votre site (la page que vous d\u00e9finissez dans <strong>R\u00e9glages &gt; Lecture &gt; Page d\u2019accueil<\/strong>)\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp', function () {\n   \t if ( is_front_page() ) {\n   \t\t add_filter('do_rocket_lazyload', '__return_false');\n   \t }\n    }\n);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactivez le lazy load sur votre page de blog<\/h4>\n\n\n\n<p>M\u00eame chose que ci-dessus, mais lorsque vous avez d\u00e9fini votre page d&rsquo;accueil comme un blog\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp', function () {\n   \t if ( is_home() ) {\n   \t\t add_filter('do_rocket_lazyload', '__return_false');\n   \t }\n    }\n);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Supprimez le lazy load sur les articles individuels<\/h4>\n\n\n\n<p>Pour d\u00e9sactiver le lazy-loading sur tous les articles individuels, mais le conserver sur les pages et sur la page d&rsquo;accueil de votre blog, utilisez cet extrait\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp', function () {\n   \t if ( is_single() ) {\n   \t\t add_filter('do_rocket_lazyload', '__return_false');\n   \t }\n    }\n);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactivez le LazyLoad sur certaines images<\/h4>\n\n\n\n<p>Vous pouvez indiquer \u00e0 WP Rocket de ne pas appliquer le lazy-loading \u00e0 certaines images gr\u00e2ce \u00e0 l&rsquo;attribut data-no-lazy\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"my-image.jpg\" data-no-lazy=\"1\" alt=\"\" width=\"100\" height=\"100\" \/&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajoutez un effet de fondu aux images charg\u00e9es en diff\u00e9r\u00e9<\/h4>\n\n\n\n<p>Il peut \u00eatre un peu d\u00e9routant pour les visiteurs de voir vos images charg\u00e9es en diff\u00e9r\u00e9 surgir de nulle part sur la page. Afficher les images progressivement est un effet r\u00e9pandu pour am\u00e9liorer cette exp\u00e9rience.<\/p>\n\n\n\n<p>L&rsquo;extrait CSS suivant ajoutera un effet de fondu \u00e0 votre site. Notez qu&rsquo;il se place dans votre fichier style.css, et non dans functions.php\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img[data-lazy-src] {\n    opacity: 0;\n}\n\nimg.lazyloaded {\n    -webkit-transition: opacity .5s linear 0.2s;\n    -moz-transition: opacity .5s linear 0.2s;\n    transition: opacity .5s linear 0.2s;\n    opacity: 1;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajustez le seuil du LazyLoad<\/h4>\n\n\n\n<p>Par d\u00e9faut, WP Rocket chargera les images en lazy-loading situ\u00e9es \u00e0 moins de 300\u00a0pixels de la fen\u00eatre du navigateur. Vous pouvez ajuster ce seuil de la fa\u00e7on suivante\u00a0:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {\n    return 100;\n});<\/code><\/pre>\n\n\n\n<p>Remarque\u00a0: dans l&rsquo;exemple ci-dessus, le seuil est fix\u00e9 \u00e0 100\u00a0px. Ajustez la valeur \u00e0 votre convenance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Le <strong>lazy loading<\/strong>, c&rsquo;est quoi\u00a0?<\/h3>\n\n\n\n<p>Le lazy-loading, ou chargement diff\u00e9r\u00e9, est une technique qui diff\u00e8re le chargement des images, des vid\u00e9os et des iframes hors \u00e9cran jusqu&rsquo;\u00e0 ce qu&rsquo;elles soient n\u00e9cessaires, ce qui r\u00e9duit les requ\u00eates inutiles. Au lieu de charger toutes les images d&rsquo;une page en une seule fois, le navigateur ne charge celles situ\u00e9es plus bas qu&rsquo;au fur et \u00e0 mesure que le visiteur fait d\u00e9filer la page jusqu&rsquo;\u00e0 elles. Les pages s&rsquo;affichent ainsi plus vite. C&rsquo;est aujourd&rsquo;hui une fonctionnalit\u00e9 standard des navigateurs, que l&rsquo;on appelle aussi \u00ab\u202flazy-loading natif\u202f\u00bb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le <strong>lazy loading<\/strong> est-il bon pour le SEO\u00a0?<\/h3>\n\n\n\n<p>Oui, s&rsquo;il est bien mis en place\u00a0: le lazy-loading am\u00e9liore les Core Web Vitals, qui sont un facteur de classement de Google. Mal mis en place, en revanche, il peut emp\u00eacher les moteurs de recherche d&rsquo;indexer les images charg\u00e9es en diff\u00e9r\u00e9. L&rsquo;attribut HTML loading est la m\u00e9thode la plus s\u00fbre pour l&rsquo;indexation\u00a0: tant que la balise img contient un attribut src, Google, au moins, ne devrait avoir aucun probl\u00e8me pour indexer vos images. Fournir en plus un sitemap d&rsquo;images est une bonne id\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment activer le <strong>lazy load sur WordPress<\/strong>\u00a0?<\/h3>\n\n\n\n<p>Depuis WordPress 5.5, le lazy load est activ\u00e9 par d\u00e9faut sur WordPress pour les images, et depuis la version 5.7 pour les iframes, \u00e0 condition qu&rsquo;elles aient des attributs de largeur et de hauteur. Pour aller plus loin, par exemple pour les images d&rsquo;arri\u00e8re-plan CSS, utilisez un plugin\u00a0: avec WP Rocket, cela prend moins d&rsquo;une minute. Allez dans <strong>R\u00e9glages &gt; WP Rocket &gt; M\u00e9dia<\/strong>, cochez les types de m\u00e9dias voulus et cliquez sur <strong>Enregistrer les modifications<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment d\u00e9sactiver le <strong>lazy loading<\/strong> sur WordPress\u00a0?<\/h3>\n\n\n\n<p>Pour d\u00e9sactiver compl\u00e8tement le lazy-loading natif de WordPress, ajoutez le filtre <code>add_filter( 'wp_lazy_loading_enabled', '__return_false' );<\/code> au fichier functions.php de votre th\u00e8me (enfant\u00a0!) ou ajoutez-le avec un plugin. Avec WP Rocket, allez dans l&rsquo;onglet <strong>M\u00e9dia<\/strong>, d\u00e9cochez les cases du LazyLoad et enregistrez. Pour un seul article ou une seule page, d\u00e9cochez l&rsquo;option voulue dans les \u00ab\u202fOptions WP Rocket\u202f\u00bb de la barre lat\u00e9rale de l&rsquo;\u00e9diteur, puis mettez \u00e0 jour le contenu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment appliquer le <strong>lazy loading aux images<\/strong> sans plugin\u00a0?<\/h3>\n\n\n\n<p>Pour appliquer le lazy-loading aux images sans plugin, ajoutez l&rsquo;attribut HTML loading avec la valeur lazy \u00e0 leurs balises &lt;img&gt;\u00a0; il fonctionne aussi sur les balises &lt;iframe&gt;. Les navigateurs de vos visiteurs font le reste\u00a0: selon Can I Use, cet attribut devrait fonctionner pour plus de 95\u00a0% des internautes dans le monde. Sur un site WordPress \u00e0 jour, les images dot\u00e9es d&rsquo;attributs de largeur et de hauteur re\u00e7oivent d\u00e9j\u00e0 cet attribut automatiquement, sauf la premi\u00e8re image ou iframe de la page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Commencez d\u00e8s maintenant \u00e0 utiliser le lazy-loading dans WordPress<\/h2>\n\n\n\n<p>Le lazy-loading est un excellent moyen d&rsquo;am\u00e9liorer les performances de votre site web. Il est surtout efficace sur les sites qui contiennent beaucoup d&rsquo;images, car il emp\u00eache celles-ci et les autres \u00e9l\u00e9ments multim\u00e9dias de se charger tant qu&rsquo;ils n&rsquo;apparaissent pas r\u00e9ellement \u00e0 l&rsquo;\u00e9cran.<\/p>\n\n\n\n<p>M\u00eame si WordPress dispose d\u00e9sormais du lazy-loading natif par d\u00e9faut, celui-ci offre peu de r\u00e9glages aux non-d\u00e9veloppeurs et ne s&rsquo;applique qu&rsquo;aux images et aux \u00e9l\u00e9ments iframe. Si vous voulez une approche plus fine et appliquer aussi le lazy-loading \u00e0 des \u00e9l\u00e9ments comme les arri\u00e8re-plans CSS, une solution sous forme de plugin comme WP Rocket est la voie \u00e0 suivre. Elle vous donne la possibilit\u00e9 de d\u00e9sactiver le lazy-loading pour certaines parties de votre site, et m\u00eame pour des fichiers individuels.<\/p>\n\n\n\n<p><a href=\"https:\/\/wp-rocket.me\/fr\/\">Essayez-le d\u00e8s maintenant<\/a>. Si vous n&rsquo;\u00eates pas convaincu, vous pouvez toujours compter sur notre garantie satisfait ou rembours\u00e9 \u00e0 100\u00a0%.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l&rsquo;appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.<\/p>\n","protected":false},"author":335480,"featured_media":2647995,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"lazy load wordpress","_yoast_wpseo_title":"Lazy load sur WordPress\u00a0: le guide complet pour 2026","_yoast_wpseo_metadesc":"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l'appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.","inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[73],"tags":[],"class_list":["post-9755293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cache-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lazy load sur WordPress\u00a0: le guide complet pour 2026<\/title>\n<meta name=\"description\" content=\"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l&#039;appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy load sur WordPress\u00a0: le guide complet pour 2026\" \/>\n<meta property=\"og:description\" content=\"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l&#039;appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-12T15:18:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-12T15:18:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Sch\u00e4ferhoff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Sch\u00e4ferhoff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\"},\"author\":{\"name\":\"Nick Sch\u00e4ferhoff\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/eeb53110f77bb3a3323467aa432b7798\"},\"headline\":\"Lazy load sur WordPress\u00a0: appliquez-le aux images, aux vid\u00e9os et plus encore\",\"datePublished\":\"2026-10-12T15:18:30+00:00\",\"dateModified\":\"2026-10-12T15:18:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\"},\"wordCount\":3936,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png\",\"articleSection\":[\"Temps de chargement et cache\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\",\"url\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\",\"name\":\"Lazy load sur WordPress\u00a0: le guide complet pour 2026\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png\",\"datePublished\":\"2026-10-12T15:18:30+00:00\",\"dateModified\":\"2026-10-12T15:18:33+00:00\",\"description\":\"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l'appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png\",\"width\":1100,\"height\":460,\"caption\":\"WP Rocket and Native LazyLoad on WordPress 5.5\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/wp-rocket.me\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Page speed and caching\",\"item\":\"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy load sur WordPress\u00a0: appliquez-le aux images, aux vid\u00e9os et plus encore\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/eeb53110f77bb3a3323467aa432b7798\",\"name\":\"Nick Sch\u00e4ferhoff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g\",\"caption\":\"Nick Sch\u00e4ferhoff\"},\"description\":\"Content writer, entrepreneur, and digital marketer. Lover of languages. Based in Berlin but home anywhere that has an Internet connection. Bad at writing short bios.\",\"sameAs\":[\"https:\/\/nickschaeferhoff.com\/\",\"https:\/\/www.linkedin.com\/in\/nschaeferhoff\/\"],\"url\":\"https:\/\/wp-rocket.me\/fr\/blog\/author\/nick-schaferhoff\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy load sur WordPress\u00a0: le guide complet pour 2026","description":"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l'appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Lazy load sur WordPress\u00a0: le guide complet pour 2026","og_description":"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l'appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.","og_url":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2026-10-12T15:18:30+00:00","article_modified_time":"2026-10-12T15:18:33+00:00","og_image":[{"width":1100,"height":460,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png","type":"image\/png"}],"author":"Nick Sch\u00e4ferhoff","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"\u00c9crit par":"Nick Sch\u00e4ferhoff","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/"},"author":{"name":"Nick Sch\u00e4ferhoff","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/eeb53110f77bb3a3323467aa432b7798"},"headline":"Lazy load sur WordPress\u00a0: appliquez-le aux images, aux vid\u00e9os et plus encore","datePublished":"2026-10-12T15:18:30+00:00","dateModified":"2026-10-12T15:18:33+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/"},"wordCount":3936,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png","articleSection":["Temps de chargement et cache"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/","url":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/","name":"Lazy load sur WordPress\u00a0: le guide complet pour 2026","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png","datePublished":"2026-10-12T15:18:30+00:00","dateModified":"2026-10-12T15:18:33+00:00","description":"Comment fonctionne le lazy load sur WordPress, quand le lazy loading natif suffit et comment l'appliquer aux images, iframes et vid\u00e9os sans nuire au LCP.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/native-lazyload-wordpress-5-5.png","width":1100,"height":460,"caption":"WP Rocket and Native LazyLoad on WordPress 5.5"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/wp-rocket.me\/fr\/"},{"@type":"ListItem","position":2,"name":"Page speed and caching","item":"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/"},{"@type":"ListItem","position":3,"name":"Lazy load sur WordPress\u00a0: appliquez-le aux images, aux vid\u00e9os et plus encore"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]},{"@type":"Person","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/eeb53110f77bb3a3323467aa432b7798","name":"Nick Sch\u00e4ferhoff","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g","caption":"Nick Sch\u00e4ferhoff"},"description":"Content writer, entrepreneur, and digital marketer. Lover of languages. Based in Berlin but home anywhere that has an Internet connection. Bad at writing short bios.","sameAs":["https:\/\/nickschaeferhoff.com\/","https:\/\/www.linkedin.com\/in\/nschaeferhoff\/"],"url":"https:\/\/wp-rocket.me\/fr\/blog\/author\/nick-schaferhoff\/"}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/posts\/9755293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/users\/335480"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/comments?post=9755293"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/posts\/9755293\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/media\/2647995"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/media?parent=9755293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/categories?post=9755293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/tags?post=9755293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}