{"id":1546505,"date":"2019-10-08T17:42:20","date_gmt":"2019-10-08T15:42:20","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1546505"},"modified":"2019-11-11T17:09:25","modified_gmt":"2019-11-11T16:09:25","slug":"lazy-load-natif","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/","title":{"rendered":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?"},"content":{"rendered":"\n<p>L&rsquo;annonce officielle est sortie d\u00e9but ao\u00fbt 2019 : la prise en charge en natif du lazy-load des images et des iframes va \u00eatre automatiquement activ\u00e9e au niveau du navigateur, \u00e0 partir de Chrome 76.<\/p>\n\n\n\n<p>Cette nouvelle a suscit\u00e9 l&rsquo;enthousiasme au sein de la communaut\u00e9 de la performance web, et pour cause : le lazy-loading est une technique tr\u00e8s b\u00e9n\u00e9fique qui peut am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs et la performance globale de votre site.<\/p>\n\n\n\n<p>Chez WP Rocket, nous avons commenc\u00e9 \u00e0<a href=\"https:\/\/wp-rocket.me\/fr\/blog\/lazyload\/\"> impl\u00e9menter notre syst\u00e8me de LazyLoad<\/a> depuis le d\u00e9but : c&rsquo;est une fonctionnalit\u00e9 dont nous sommes tr\u00e8s fiers et que nous continuons \u00e0 am\u00e9liorer mois apr\u00e8s mois.<\/p>\n\n\n\n<p>C&rsquo;est pourquoi, depuis la toute premi\u00e8re fois que ce sujet <a href=\"https:\/\/twitter.com\/addyosmani\/status\/1114777583302799360?lang=en\">a \u00e9t\u00e9 abord\u00e9 par Addy Osmani<\/a>, nous avons commenc\u00e9 \u00e0 nous demander comment nous pouvions mettre en place la prise en charge du lazy-load natif dans WP Rocket :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"601\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading.png\" alt=\"Addy Osmani announcing native lazy-loading on Twitter\" class=\"wp-image-1543237\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading.png 600w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-150x150.png 150w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-300x301.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-100x100.png 100w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-180x180.png 180w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-108x108.png 108w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/addy-osmani-native-lazy-loading-80x80.png 80w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption>Addy Osmani annonce le lazy-load natif sur Twitter<\/figcaption><\/figure>\n\n\n\n<p>Pour vous divulg\u00e2cher la fin de l\u2019article, disons ceci d&#8217;embl\u00e9e : <strong>nous avons finalement d\u00e9cid\u00e9 de ne pas prendre en charge, par d\u00e9faut, le lazy-load natif.<\/strong><\/p>\n\n\n\n<p>Pour comprendre les raisons de cette d\u00e9cision, continuez la lecture !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Commen\u00e7ons par le d\u00e9but : Qu\u2019est-ce que le lazy-load ?<\/h2>\n\n\n\n<p>Si vous avez atterri sur cet article de blog sans connaissance pr\u00e9alable sur le sujet de cette discussion, pas de soucis, on vous couvre. ?<\/p>\n\n\n\n<p>Le lazy-loading est la technique qui diff\u00e8re le chargement des ressources non critiques (images, dans notre cas), en les laissant \u00ab\u00a0hors \u00e9cran\u00a0\u00bb jusqu&rsquo;\u00e0 ce que vous en ayez r\u00e9ellement besoin.<\/p>\n\n\n\n<p><strong>Les images ou les iframes ne se chargent sur la page que lorsque les utilisateurs ont besoin de les afficher.<\/strong><\/p>\n\n\n\n<p>De cette fa\u00e7on, vos utilisateurs n&rsquo;auront pas \u00e0 attendre le chargement de tous les \u00e9l\u00e9ments de la page et, par cons\u00e9quent, pourront commencer \u00e0 profiter de la page web plus t\u00f4t.<\/p>\n\n\n\n<p>Si vous utilisez le lazyload sur votre site, seules les images au-dessus du de la ligne de flottaison seront charg\u00e9es ; le reste sera r\u00e9cup\u00e9r\u00e9 d\u00e8s que l&rsquo;utilisateur fera d\u00e9filer la page.<\/p>\n\n\n\n<p>Techniquement parlant, le lazyload fonctionne gr\u00e2ce \u00e0 un JavaScript qui v\u00e9rifie la fen\u00eatre actuelle de vos visiteurs et ne charge que des images (presque) visibles pour eux.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"WP Rocket LazyLoad: A Demo\" width=\"720\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/2W-zJkIjF1k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Le lazyload n&rsquo;entre en jeu que lorsque les visiteurs acc\u00e8dent \u00e0 vos images lorsqu&rsquo;ils font d\u00e9filer la page. Par exemple, s&rsquo;ils n&rsquo;atteignent jamais les images, ils n&rsquo;ont pas besoin de les charger.&nbsp;<\/p>\n\n\n\n<p><strong>Cela permet d&rsquo;\u00e9conomiser de la bande passante<\/strong> car l&rsquo;utilisateur n&rsquo;aura pas \u00e0 t\u00e9l\u00e9charger toutes vos images ; en outre, l&rsquo;utilisateur peut naviguer sur votre site beaucoup plus rapidement.<\/p>\n\n\n\n<p>En r\u00e9sum\u00e9, le lazyload est une fa\u00e7on brillante d&rsquo;optimiser \u00e0 la fois les performances per\u00e7ues et r\u00e9elles. Pour en savoir plus sur son fonctionnement, consultez notre guide d\u00e9taill\u00e9 sur <a href=\"https:\/\/wp-rocket.me\/fr\/blog\/lazyload\/\">les avantages du lazy-loading<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u2019est-ce que le lazy-load natif ?<\/h3>\n\n\n\n<p>Au d\u00e9part, le lazy-loading ne pouvait fonctionner qu&rsquo;\u00e0 l&rsquo;aide d&rsquo;un plugin ou par le biais d\u2019un d\u00e9veloppement.<\/p>\n\n\n\n<p>C&rsquo;est ce que fait <a href=\"https:\/\/wp-rocket.me\/fr\/blog\/lazyload\/\">le LazyLoad de WP Rocket<\/a> !<\/p>\n\n\n\n<p>Le lazy-load natif signifie que la technique d\u00e9crite ci-dessus <strong>est prise en charge par le navigateur lui-m\u00eame<\/strong>, et non plus par un plugin.<\/p>\n\n\n\n<p>Au moment o\u00f9 nous \u00e9crivons ces lignes, le lazy-load natif est support\u00e9 par Chrome 76 et tous les navigateurs bas\u00e9s sur Chromium 76.<\/p>\n\n\n\n<p><a href=\"https:\/\/web.dev\/native-lazy-loading\">Voici comment ils la d\u00e9crivent<\/a> : <\/p>\n\n\n\n<p>\u201cDans Chrome 76, vous pouvez utiliser l&rsquo;attribut <em>loading<\/em> pour diff\u00e9rer compl\u00e8tement le chargement des images et des iframes hors \u00e9cran, accessibles par le d\u00e9filement de la page :<\/p>\n\n\n\n<p><em><code>&lt;img src=\"image.png\" loading=\"lazy\" alt=\"\u2026\" width=\"200\" height=\"200\"&gt;<\/code><\/em><br><em><code>&lt;iframe src=\"https:\/\/example.com\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/em><\/p>\n\n\n\n<p>Voici les valeurs support\u00e9es pour l&rsquo;attribut <em>loading<\/em> :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>auto <\/strong>: Comportement par d\u00e9faut du lazy-load du navigateur, qui revient au m\u00eame que de ne pas inclure l&rsquo;attribut.<\/li><li><strong>lazy <\/strong>: Diff\u00e9rer le chargement de la ressource jusqu&rsquo;\u00e0 ce qu&rsquo;elle atteigne une <a href=\"https:\/\/web.dev\/native-lazy-loading#load-in-distance-threshold\">distance calcul\u00e9e<\/a> \u00e0 partir de la ligne de flottaison.<\/li><li><strong>eager <\/strong>: Charger la ressource imm\u00e9diatement, o\u00f9 qu&rsquo;elle se trouve sur la page.\u201c<\/li><\/ul>\n\n\n\n<p>Ce qu&rsquo;il est tr\u00e8s important de prendre en compte ici, c&rsquo;est le fait que l&rsquo;impl\u00e9mentation de Chrome <a href=\"https:\/\/cs.chromium.org\/chromium\/src\/third_party\/blink\/renderer\/core\/frame\/settings.json5?l=971-1003&amp;rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad\">\u00e9tablit un tr\u00e8s grand seuil ici<\/a> (jusqu&rsquo;\u00e0 8000 px) : cela signifie que sur de nombreuses pages web, toutes ou la plupart des images seront t\u00e9l\u00e9charg\u00e9es imm\u00e9diatement et ne b\u00e9n\u00e9ficieront pas du lazy-load.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi WP Rocket ne prend pas en charge, par d\u00e9faut, le lazy-load natif ?<\/h2>\n\n\n\n<p>Les informations sur le seuil du lazy-load natif de Chrome ont \u00e9t\u00e9 cruciales pour nous, et ont suscit\u00e9 les premiers doutes : devrions-nous vraiment mettre en \u0153uvre une solution qui pourrait nuire \u00e0 l&rsquo;efficacit\u00e9 de notre propre LazyLoad ?<\/p>\n\n\n\n<p>En fait, le LazyLoad de WP Rocket a un seuil bien plus petit (300 px), ce qui signifie que bien plus d&rsquo;images seront LazyLoad\u00e9es : cela le rend plus efficace pour r\u00e9duire la quantit\u00e9 de donn\u00e9es transf\u00e9r\u00e9es au chargement initial de la page. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nos tests en interne<\/h3>\n\n\n\n<p>En plus d&rsquo;\u00e9valuer cette diff\u00e9rence critique entre notre LazyLoad et le lazy-load natif de Chrome, nous voulions corroborer la th\u00e9orie avec des donn\u00e9es.&nbsp;<\/p>\n\n\n\n<p>Nous avons donc fait quelques tests.<\/p>\n\n\n\n<p>Comme GTmetrix utilise encore Chrome 75, qui ne supporte pas le lazy-load natif, nous avons fait nos tests via <a href=\"https:\/\/www.uptrends.com\/tools\/website-speed-test\">Uptrends<\/a>, qui utlise Chrome 77.<\/p>\n\n\n\n<p>Voici les r\u00e9sultats obtenus :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"http:\/\/mega.wp-rocket.me\/nieuws\/the-longest-post-ever-arun\/\"><strong>Page Test 1<\/strong><\/a>&nbsp;&nbsp;<\/h4>\n\n\n\n<p><strong>Hauteur de page <\/strong>: 8747.910 px<\/p>\n\n\n\n<p><strong><em>Sans lazy-load :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Poids de page : <\/em>709 KB <\/li><li><em>Requ\u00eates :<\/em> 29<\/li><li><em>Ressources :<\/em> 953 KB<\/li><li><em>Termin\u00e9 :<\/em> 8.39 s<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/jpPwuR0QH8zehuh3x4X1UhnCEqaFT5pcp-M4FvqLkuHuAaSpjk4yr2sb2wsEqyS6SiwPja8GhvVuXU80me1ZqY8flWsxJCw_FjcKP004_1eSTZZGA2UMmBlt3crz6iqBDSuSmNG9\" alt=\"R\u00e9sultats de performance sans lazy-load\"\/><figcaption>R\u00e9sultats de performance sans lazy-load<\/figcaption><\/figure>\n\n\n\n<p><strong><em>Avec le lazy-load natif de Chrome :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Poids de page : <\/em>264 KB<\/li><li><em>Requ\u00eates :<\/em> 34<\/li><li><em>Ressources :<\/em> 525 KB<\/li><li><em>Termin\u00e9 :<\/em> 5.45 s<\/li><\/ul>\n\n\n\n<p>(les chiffres augmentent au fur et \u00e0 mesure que l&rsquo;on fait d\u00e9filer la page et que l&rsquo;on charge toutes les images)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/t86Dy0Dm258m6-7fdzqqTmedt2gR9N1uJayvFDSScwIq8niYAQGxDjzPjuoIC6U5xV7HRIoprdtmu4_kz6z4om4InOw1x4h0dHZg29CQWtHYdvEQb5VR_bnyD9e-p1w016H71gJZ\" alt=\"R\u00e9sultats de performance avec le lazy-load natif\"\/><figcaption>R\u00e9sultats de performance avec le lazy-load natif<\/figcaption><\/figure>\n\n\n\n<p><strong><em>Avec le LazyLoad de WP Rocket :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Poids de page : <\/em>96.2 KB to 102 KB<\/li><li><em>Poids de page :<\/em> 24<\/li><li><em>Ressources :<\/em> 351 KB<\/li><li><em>Termin\u00e9 :<\/em> 4.35 s<\/li><\/ul>\n\n\n\n<p>(les chiffres augmentent au fur et \u00e0 mesure que l&rsquo;on fait d\u00e9filer la page et que l&rsquo;on charge toutes les images)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Tvxm80Xov5XDhL-sImL1gIiIPXcclN7HMCMI20cqATs9QqvWRkzZt4ZqGsEr9sdD5N1yCx-X2FOQnktwa8ic92sPFkha6nYqoDsYYlJDqosF-LaeZaqKOoBj1_HzpNn_p2JhrvHo\" alt=\"R\u00e9sultats de performance avec le LazyLoad de WP Rocket\"\/><figcaption>R\u00e9sultats de performance avec le LazyLoad de WP Rocket<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"http:\/\/mega.wp-rocket.me\/divi\/2019\/09\/30\/long-post-lazyload-test-arun\/\">Page Test 2<\/a><\/h4>\n\n\n\n<p>Nous avons effectu\u00e9 trois tests dans chaque cas : sans lazy-loading, avec le lazy-load natif de Chrome et avec le LazyLoad de WP Rocket.<\/p>\n\n\n\n<p>Voici quelques captures d&rsquo;\u00e9cran r\u00e9sumant certains des r\u00e9sultats obtenus avec <a href=\"https:\/\/www.uptrends.com\/tools\/website-speed-test\">Uptrends<\/a>, qui utilise Chrome 77 :<\/p>\n\n\n\n<p><strong><em>Sans lazy-load :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Poids de page : <\/em>832.6 KB<\/li><li><em>Requ\u00eates :<\/em> 26<\/li><li><em>Temps de chargement :<\/em> 1.6 s<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-1024x482.png\" alt=\"R\u00e9sultats Uptrends sans lazy-load \" class=\"wp-image-1543267\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-1024x482.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-300x141.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-768x362.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-1080x509.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad-896x422.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-No-LazyLoad.png 1710w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>R\u00e9sultats Uptrends sans lazy-loading<\/figcaption><\/figure>\n\n\n\n<p><strong><em>Avec le lazy-load natif de Chrome :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Poids de page : <\/em>418.9 KB<\/li><li><em>Requ\u00eates :<\/em> 24<\/li><li><em>Temps de chargement :<\/em> 0.7 s<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-1024x473.png\" alt=\"R\u00e9sultats Uptrends avec le lazy-load natif\" class=\"wp-image-1543275\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-1024x473.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-300x138.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-768x354.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-1080x498.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad-896x413.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Mega-Native-LazyLoad.png 1710w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>R\u00e9sultats Uptrends avec le lazy-load natif<\/figcaption><\/figure>\n\n\n\n<p><strong><em>Avec le LazyLoad de WP Rocket :<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Page size: <\/em>341.3 KB<\/li><li><em>Requ\u00eates :<\/em> 14<\/li><li><em>Temps de chargement :<\/em> 0.4 s<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/JNhyLCTcn8r1R6sMcApzSpzKAH8FwngMYQmHX0BHAgdUwMHgeipdOKmusR1msuWsdx5PcmH-l7cOFmQ635S1HeUvQhkKu76D6X0Bp-qVYlrWM6PNs_C-M1KVkx-4D0Vyax3pEfSD\" alt=\"R\u00e9sultats Uptrends avec le LazyLoad de WP Rocket\"\/><figcaption>R\u00e9sultats Uptrends avec le LazyLoad de WP Rocket<\/figcaption><\/figure>\n\n\n\n<p>Compte tenu de ces r\u00e9sultats et du fait que le temps de chargement et la taille des pages sont toujours meilleurs avec le LazyLoad de WP Rocket, nous avons d\u00e9cid\u00e9 de ne pas activer la compatiblit\u00e9 automatique avec le lazy-load natif de Chrome.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment activer le lazy-load natif avec WP Rocket?<\/h3>\n\n\n\n<p>M\u00eame si nous n&rsquo;incluons pas la compatibilit\u00e9 automatique avec les navigateurs Chrome utilisant le lazy-load natif, avec WP Rocket 3.4 vous aurez la possibilit\u00e9 de choisir la prise en charge du lazy-load natif de Chrome : vous pouvez l&rsquo;activer <a href=\"https:\/\/fr.docs.wp-rocket.me\/article\/1294-lazyload-natif-chrome\">via un plugin d&rsquo;aide<\/a>.<\/p>\n\n\n\n<p>Avec ce plugin d&rsquo;aide, vous pouvez vous assurer que :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Toutes vos images auront le balisage HTML n\u00e9cessaire pour profiter du lazy-load natif ;<\/li><li>Les navigateurs Chrome compatibles utiliseront automatiquement le&nbsp; lazy-load natif ;<\/li><li>Tous les autres utiliseront automatiquement LazyLoad de WP Rocket.<\/li><\/ul>\n\n\n\n<p>Vous pouvez soit continuer \u00e0 profiter de la puissance de notre LazyLoad, soit d\u00e9cider d&rsquo;opter pour le lazy-load natif de Chrome.<\/p>\n\n\n\n<p>C&rsquo;est \u00e0 vous de d\u00e9cider ! Testez les deux solutions sur votre site et d\u00e9cidez de ce qui vous convient le mieux.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pour r\u00e9capituler<\/h2>\n\n\n\n<p>Le lazy-load natif est une technologie innovante qui permet aux navigateurs Chrome compatibles (\u00e0 partir de Chrome 76) de g\u00e9rer eux-m\u00eames le lazy-load, sans l&rsquo;utilisation d&rsquo;aucun plugin.<\/p>\n\n\n\n<p>C&rsquo;est sans aucun doute un avantage pour les performances web puisque tous les sites web visit\u00e9s \u00e0 partir des versions Chrome compatibles b\u00e9n\u00e9ficieront automatiquement du lazy-loading.<\/p>\n\n\n\n<p>D&rsquo;autre part, WP Rocket comprend d\u00e9j\u00e0 un LazyLoad robuste qui a \u00e9t\u00e9 impl\u00e9ment\u00e9e et continuellement am\u00e9lior\u00e9e au fil des anne\u00e9es.&nbsp;<\/p>\n\n\n\n<p>Alors que notre premi\u00e8re intention \u00e9tait de rendre WP Rocket automatiquement compatible avec le lazy-load natif de Chrome, nous avons finalement d\u00e9cid\u00e9 de ne pas emprunter cette voie : apr\u00e8s plusieurs tests, nous avons r\u00e9alis\u00e9 que notre LazyLoad est plus efficace que le lazy-load natif de Google. <\/p>\n\n\n\n<p>Nos tests ont montr\u00e9 que WP Rocket LazyLoad pouvait garantir un meilleur temps de chargement de vos pages et la meilleure optimisation du format de page. N\u00e9anmoins, nous avons cr\u00e9\u00e9 un plugin d&rsquo;aide pour les clients qui pr\u00e9f\u00e8rent toujours activer la prise en charge du lazy-load natif de Chrome, au lieu de notre propre LazyLoad.<\/p>\n\n\n\n<p><em>Avez-vous d\u00e9j\u00e0 essay\u00e9 le lazy-load natif ? Quels r\u00e9sultats obtenez-vous ?&nbsp;<\/em><em>N&rsquo;h\u00e9sitez pas \u00e0 nous faire part de vos r\u00e9flexions dans les commentaires ci-dessous !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer lui-m\u00eame le chargement des images, sans passer par un plugin. Comment fonctionne ce lazy-load natif ?<\/p>\n","protected":false},"author":9832,"featured_media":1543461,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[63,73],"tags":[],"class_list":["post-1546505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-cache","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>Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?<\/title>\n<meta name=\"description\" content=\"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?\" \/>\n<meta property=\"og:description\" content=\"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\" \/>\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=\"2019-10-08T15:42:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-11T16:09:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Alice Orru\" \/>\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=\"Alice Orru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture est.\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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-natif\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\"},\"author\":{\"name\":\"Alice Orru\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417\"},\"headline\":\"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?\",\"datePublished\":\"2019-10-08T15:42:20+00:00\",\"dateModified\":\"2019-11-11T16:09:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\"},\"wordCount\":1524,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg\",\"articleSection\":[\"Page speed and caching\",\"Temps de chargement et cache\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\",\"url\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\",\"name\":\"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg\",\"datePublished\":\"2019-10-08T15:42:20+00:00\",\"dateModified\":\"2019-11-11T16:09:25+00:00\",\"description\":\"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg\",\"width\":1100,\"height\":460,\"caption\":\"What is Chrome Native Lazy-Loading?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#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\":\"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?\"}]},{\"@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\/75d605841adae53badeafbcd017ba417\",\"name\":\"Alice Orru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/76482f13898a1584ce24304d6921b1c140ac6b37d2f8812d7194117716b9e1f6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/76482f13898a1584ce24304d6921b1c140ac6b37d2f8812d7194117716b9e1f6?s=96&d=mm&r=g\",\"caption\":\"Alice Orru\"},\"description\":\"Alice Orr\u00f9 is a web content writer with strong experience in international customer service and B2B copywriting. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps.\",\"url\":\"https:\/\/wp-rocket.me\/fr\/blog\/author\/alice-orru\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?","description":"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?","robots":{"index":"noindex","follow":"follow"},"og_locale":"fr_FR","og_type":"article","og_title":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?","og_description":"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?","og_url":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2019-10-08T15:42:20+00:00","article_modified_time":"2019-11-11T16:09:25+00:00","og_image":[{"width":1100,"height":460,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg","type":"image\/jpeg"}],"author":"Alice Orru","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"\u00c9crit par":"Alice Orru","Dur\u00e9e de lecture est.":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/"},"author":{"name":"Alice Orru","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/75d605841adae53badeafbcd017ba417"},"headline":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?","datePublished":"2019-10-08T15:42:20+00:00","dateModified":"2019-11-11T16:09:25+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/"},"wordCount":1524,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg","articleSection":["Page speed and caching","Temps de chargement et cache"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/","url":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/","name":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg","datePublished":"2019-10-08T15:42:20+00:00","dateModified":"2019-11-11T16:09:25+00:00","description":"Le lazy-load natif est une nouvelle technique qui permet au navigateur de diff\u00e9rer le chargement des images. Comment fonctionne ce lazy-load natif ?","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/chrome-native-lazyloading.jpg","width":1100,"height":460,"caption":"What is Chrome Native Lazy-Loading?"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/fr\/blog\/lazy-load-natif\/#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":"Qu\u2019est-ce le lazy-load natif et quelle est son efficacit\u00e9 ?"}]},{"@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\/75d605841adae53badeafbcd017ba417","name":"Alice Orru","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/76482f13898a1584ce24304d6921b1c140ac6b37d2f8812d7194117716b9e1f6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/76482f13898a1584ce24304d6921b1c140ac6b37d2f8812d7194117716b9e1f6?s=96&d=mm&r=g","caption":"Alice Orru"},"description":"Alice Orr\u00f9 is a web content writer with strong experience in international customer service and B2B copywriting. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps.","url":"https:\/\/wp-rocket.me\/fr\/blog\/author\/alice-orru\/"}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/posts\/1546505","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\/9832"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/comments?post=1546505"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/posts\/1546505\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/media\/1543461"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/media?parent=1546505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/categories?post=1546505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/fr\/wp-json\/wp\/v2\/tags?post=1546505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}