{"id":959,"date":"2020-06-18T17:11:23","date_gmt":"2020-06-18T17:11:23","guid":{"rendered":"https:\/\/www.ezoic.com\/fr-lang\/2020\/06\/18\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/"},"modified":"2020-06-18T17:11:23","modified_gmt":"2020-06-18T17:11:23","slug":"ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/","title":{"rendered":"AM\u00c9LIOREZ LA VITESSE DE VOTRE SITE GR\u00c2CE AU LAZY LOADING VOS IMAGES, EN UTILISANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION"},"content":{"rendered":"<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_67_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Sommaire<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a18ae6475cef\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a18ae6475cef\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#AMELIORER_LA_VITESSE_DU_SITE_GRACE_AU_LAZY_LOADING_DE_VOS_IMAGES_ET_EN_SERVANT_DES_FORMATS_NOUVELLE_GENERATION\" title=\"AM\u00c9LIORER LA VITESSE DU SITE GR\u00c2CE AU LAZY LOADING DE VOS IMAGES ET EN SERVANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION\">AM\u00c9LIORER LA VITESSE DU SITE GR\u00c2CE AU LAZY LOADING DE VOS IMAGES ET EN SERVANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#POUVEZ-VOUS_OPTIMISER_LES_IMAGES_POUR_LE_REFERENCEMENT_SEO_SANS_IMPACT_SUR_LA_QUALITE\" title=\"POUVEZ-VOUS OPTIMISER LES IMAGES POUR LE R\u00c9F\u00c9RENCEMENT (SEO) SANS IMPACT SUR LA QUALIT\u00c9 ?\">POUVEZ-VOUS OPTIMISER LES IMAGES POUR LE R\u00c9F\u00c9RENCEMENT (SEO) SANS IMPACT SUR LA QUALIT\u00c9 ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#COMMENT_SE_CHARGER_DU_LAZY_LOADING_DES_IMAGES_POUR_AMELIORER_LA_VITESSE_DU_SITE\" title=\"COMMENT SE CHARGER DU LAZY LOADING DES IMAGES POUR AM\u00c9LIORER LA VITESSE DU SITE\">COMMENT SE CHARGER DU LAZY LOADING DES IMAGES POUR AM\u00c9LIORER LA VITESSE DU SITE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#COMMENT_COMPRESSER_ET_REDIMENSIONNER_CORRECTEMENT_LES_IMAGES\" title=\"COMMENT COMPRESSER ET REDIMENSIONNER CORRECTEMENT LES IMAGES ?\">COMMENT COMPRESSER ET REDIMENSIONNER CORRECTEMENT LES IMAGES ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#COMMENT_SERVIR_LES_IMAGES_DANS_LES_FORMATS_DE_LA_NOUVELLE_GENERATION\" title=\"COMMENT SERVIR LES IMAGES DANS LES FORMATS DE LA NOUVELLE G\u00c9N\u00c9RATION ?\">COMMENT SERVIR LES IMAGES DANS LES FORMATS DE LA NOUVELLE G\u00c9N\u00c9RATION ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#COMMENT_CHANGER_TOUTES_LES_IMAGES_EN_WEBP_ET_RENDRE_VOTRE_SITE_WEB_PLUS_RAPIDE\" title=\"COMMENT CHANGER TOUTES LES IMAGES EN WEBP ET RENDRE VOTRE SITE WEB PLUS RAPIDE\">COMMENT CHANGER TOUTES LES IMAGES EN WEBP ET RENDRE VOTRE SITE WEB PLUS RAPIDE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#COMMENT_CONVERTIR_DES_IMAGES_EN_WEBP_SUR_MON_SITE\" title=\"COMMENT CONVERTIR DES IMAGES EN WEBP SUR MON SITE ?\">COMMENT CONVERTIR DES IMAGES EN WEBP SUR MON SITE ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/#Et_voila_CEST_TOUT\" title=\"Et voil\u00e0. C\u2019EST TOUT !\">Et voil\u00e0. C\u2019EST TOUT !<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"AMELIORER_LA_VITESSE_DU_SITE_GRACE_AU_LAZY_LOADING_DE_VOS_IMAGES_ET_EN_SERVANT_DES_FORMATS_NOUVELLE_GENERATION\"><\/span>AM\u00c9LIORER LA VITESSE DU SITE GR\u00c2CE AU LAZY LOADING DE VOS IMAGES ET EN SERVANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nous avons partag\u00e9 quelques blogs r\u00e9cents sur la fa\u00e7on d\u2019am\u00e9liorer la vitesse du site. La semaine derni\u00e8re, j\u2019ai couvert <a href=\"https:\/\/blog.ezoic.com\/how-to-optimize-critical-css-to-make-your-website-faster\/\" target=\"_blank\" rel=\"noopener\">comment optimiser le CSS<\/a>. Cette semaine, je vous expliquerai comment configurer les images de votre site afin d\u2019am\u00e9liorer consid\u00e9rablement les temps de chargement, sans nuire \u00e0 la qualit\u00e9 des images.<\/p>\n<p><strong>Les recommandations d\u2019image les plus courantes avec les outils de vitesse de page les plus courants sont:<\/strong><\/p>\n<ul>\n<li>Taille appropri\u00e9e des images (taille du fichier)<\/li>\n<li>Charger les images de mani\u00e8re asynchrone (ce que l\u2019on appelle les \u00ab images \u00e0 chargement paresseux \u00bb ou lazy loading)<\/li>\n<li>Eviter le redimensionnement des images dans le navigateur<\/li>\n<li>Servez les images dans les formats \u00ab next-gen \u00bb (nouvelle g\u00e9n\u00e9ration)<\/li>\n<\/ul>\n<p>Alors que certains de ces objectifs sont tr\u00e8s simples \u00e0 atteindre, d\u2019autres peuvent \u00eatre tr\u00e8s difficiles \u00e0 r\u00e9aliser de mani\u00e8re efficace sur l\u2019ensemble d\u2019un site. Par exemple, le redimensionnement, la compression et la diffusion de toutes les images de votre site dans des formats de nouvelle g\u00e9n\u00e9ration peuvent prendre beaucoup de temps \u00e0 faire correctement. De plus, la plupart des solutions rapides pour le lazy loading d\u2019images sur un site ne prennent pas en compte les pixels et images tiers<\/p>\n<p>Ci-dessous, je vais vous montrer quelques astuces rapides et des solutions pour optimiser les 4 points ci-dessus sur l\u2019ensemble d\u2019un site (\u00e9tape par \u00e9tape). De cette fa\u00e7on, vous pouvez enfin vous d\u00e9barrasser de ces recommandations des outils de vitesse de page et rendre votre site plus rapide (je montre m\u00eame comment le faire sans codage).<\/p>\n<figure id=\"attachment_6646\" aria-describedby=\"caption-attachment-6646\" style=\"width: 740px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/pagespeed-score-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6646\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/pagespeed-score-min.png\" alt=\"am\u00e9liorer google pagespeed score avec des images\" width=\"740\" height=\"555\"><\/a><figcaption id=\"caption-attachment-6646\" class=\"wp-caption-text\"><em><strong>A permis l\u2019am\u00e9lioration du score de Vitesse de page de ce blog de 79 \u00e0 95 apr\u00e8s avoir effectu\u00e9 les changements ci-dessous.<\/strong><\/em><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<p><a href=\"\/?p=6183\">Lisez mon blog sur le service des formats next-gen en utilisant WordPress ici.<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"POUVEZ-VOUS_OPTIMISER_LES_IMAGES_POUR_LE_REFERENCEMENT_SEO_SANS_IMPACT_SUR_LA_QUALITE\"><\/span>POUVEZ-VOUS OPTIMISER LES IMAGES POUR LE R\u00c9F\u00c9RENCEMENT (SEO) SANS IMPACT SUR LA QUALIT\u00c9 ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Beaucoup d\u2019\u00e9diteurs et de cr\u00e9ateurs de contenu \u00e0 qui j\u2019ai parl\u00e9 s\u2019inqui\u00e8tent de laisser les SEO et les webmasters optimiser les images parce qu\u2019ils craignent que la compression ou la modification de la fa\u00e7on dont les images sont servies aura un impact sur la qualit\u00e9 de l\u2019image.<\/p>\n<p>Essentiellement, l\u2019\u00e9diteur ou l\u2019auteur du contenu ne veut pas que les visiteurs voient une version basse r\u00e9solution des images. C\u2019est tout \u00e0 fait logique. Personne ne veut que les visiteurs d\u2019un site voient une version de mauvaise qualit\u00e9 de leur site.<\/p>\n<p>En r\u00e9alit\u00e9, les formats d\u2019image de nouvelle g\u00e9n\u00e9ration, les images lazy loading et m\u00eame la plupart des formes de compression n\u2019affecteront pas la qualit\u00e9 de l\u2019image de mani\u00e8re remarquable pour vos visiteurs si vous le faites correctement.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Untitled-presentation-5.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6608\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Untitled-presentation-5.jpg\" alt=\"compression d\u2019image et vitesse de site Web\" width=\"830\" height=\"467\"><\/a>Heureusement, vous pouvez compresser sans perdre la r\u00e9solution des images, les redimensionner pour les adapter \u00e0 diff\u00e9rents \u00e9crans, les servir en format WebP et les charger sans jamais modifier la qualit\u00e9 visible des images que vous pouvez servir sur une page.<\/p>\n<p>Ce sont les meilleures pratiques pour optimiser votre site afin qu\u2019il adh\u00e8re aux recommandations communes sur les outils de vitesse de page (comme Google Pagespeed Insights).<\/p>\n<p><em>Si vous \u00eates photographe ou un site sp\u00e9cialis\u00e9 dans l\u2019image, et que vous souhaitez mettre \u00e0 disposition des versions haute r\u00e9solution de vos photos pour \u00eatre vues ou t\u00e9l\u00e9charg\u00e9es, cela peut toujours se faire par le biais de liens. La plupart des images qui s\u2019affichent sur la page peuvent \u00eatre servies d\u2019une mani\u00e8re qui est \u00e0 la fois optimale pour la vitesse du site et visuellement identique \u00e0 la version haute r\u00e9solution aux visiteurs venant sur votre site.<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_SE_CHARGER_DU_LAZY_LOADING_DES_IMAGES_POUR_AMELIORER_LA_VITESSE_DU_SITE\"><\/span>COMMENT SE CHARGER DU LAZY LOADING DES IMAGES POUR AM\u00c9LIORER LA VITESSE DU SITE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Comme je l\u2019ai mentionn\u00e9 plus haut, le lazy loading des images est un processus assez simple et il existe de nombreuses solutions rapides qui vous aideront \u00e0 le faire. Malheureusement, de nombreuses solutions de correction rapide qui chargent les images de mani\u00e8re asynchrone sur une page ne parviennent pas \u00e0 identifier les images \u00ab non natives \u00bb. Cela signifie qu\u2019ils manquent souvent des pixels et des images d\u2019une tierce partie.<\/p>\n<blockquote><p><strong>Qu\u2019est-ce qu\u2019une image non native ?<\/strong> Une image non native peut \u00eatre aussi simple que le logo Twitter affich\u00e9 sur un widget de partage social ou un pixel Facebook install\u00e9 dans votre en-t\u00eate ou pied de page. Il s\u2019agit souvent d\u2019images que les outils et plugins les plus courants ne peuvent pas voir.<\/p><\/blockquote>\n<p><strong>Qu\u2019est-ce que le lazy loading ?<\/strong><\/p>\n<p>Le lazy loading d\u2019images est un autre terme pour le chargement asynchrone d\u2019images sur une page. C\u2019est le processus de chargement des images apr\u00e8s la demande de page initiale. Lorsque les visiteurs du site font d\u00e9filer la page vers le bas, les images sont charg\u00e9es au fur et \u00e0 mesure, au lieu d\u2019\u00eatre charg\u00e9es d\u2019un seul coup lorsque la page est demand\u00e9e. Cela rend le chargement de la page plus rapide au d\u00e9part pour les lecteurs et fait de la navigation sur le site une meilleure exp\u00e9rience.<\/p>\n<p><strong>Comment mettre en \u0153uvre correctement le lazy loading ?<\/strong><\/p>\n<p>Si vous \u00eates un <a href=\"https:\/\/www.ezoic.com\" target=\"_blank\" rel=\"noopener\">utilisateur Ezoic<\/a> , rien de plus facile. Vous pouvez avoir des images natives et non natives en lazy loading instantan\u00e9ment si vous utilisez la nouvelle application Site Speed dans l\u2019AppStore Ezoic.<\/p>\n<p><a href=\"\/?page_id=3582\">L\u2019application Site Speed<\/a> effectue automatiquement le lazy loading de toutes les images selon les suggestions d\u00e9crites par Google. Elle fonctionne sur tous les sites, quel que soit le CMS ou l\u2019infrastructure.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Image-from-iOS-2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6604\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Image-from-iOS-2-1024x504.png\" alt=\"images de chargement paresseux \u00e0 l\u2019aide de l\u2019application de vitesse de site ezo\u00efque\" width=\"825\" height=\"406\"><\/a><\/p>\n<p>Si vous n\u2019\u00eates pas un utilisateur d\u2019Ezoic ou si vous pr\u00e9f\u00e9rez le mettre en oeuvre sans utiliser l\u2019application Site Speed, il y a plusieurs options. Comme je l\u2019ai d\u00e9j\u00e0 mentionn\u00e9, il existe de nombreuses solutions tr\u00e8s simples qui vous permettront de les mettre en \u0153uvre rapidement et facilement pour les images natives uniquement (ce qui est toujours mieux que rien).<\/p>\n<p>Si vous avez un site de type WordPress, vous pouvez simplement t\u00e9l\u00e9charger un plugin et l\u2019utiliser \u00e0 l\u2019\u00e9chelle du site avec tr\u00e8s peu de conflits pour toutes les images natives. J\u2019aime tout particuli\u00e8rement le plugin <a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load par WP-Rocket<\/a>.<\/p>\n<p>Ce plugin \u2013 et bien d\u2019autres encore \u2013 ont des param\u00e8tres tr\u00e8s simples qui permettent aux sites WordPress un lazy loading des images qu\u2019ils ont enregistr\u00e9es sous forme de fichiers sur leur site. Assurez-vous simplement d\u2019utiliser un plugin qui a \u00e9t\u00e9 test\u00e9 avec votre version de WordPress et qui a beaucoup d\u2019utilisateurs actifs.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/lazyload-images-min-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6650\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/lazyload-images-min-1.png\" alt=\"paresseux charger site web images plugin wordpress\" width=\"837\" height=\"511\"><\/a><\/p>\n<p>Si vous utilisez Joomla, <a href=\"https:\/\/extensions.joomla.org\/extension\/lazy-load-for-joomla\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Loading for Joomla<\/a> est le CMS standard. Les utilisateurs de Drupal peuvent utiliser <a href=\"https:\/\/www.drupal.org\/project\/lazyloader\" target=\"_blank\" rel=\"noopener noreferrer\">Drupal\u2019s <em>LazyLoader<\/em><\/a>.<\/p>\n<p>Ces plugins et extensions prennent en charge les images natives, mais le lazy loading d\u2019images non natives est un peu plus difficile. De plus, si vous n\u2019utilisez pas de CMS, comme WordPress ou Joomla, vous allez devoir trouver un moyen d\u2019impl\u00e9menter un lazy loading pour toutes les formes d\u2019images.<\/p>\n<p>Ecrire quelques JS simples peut g\u00e9n\u00e9ralement vous aider \u00e0 prendre soin de la grande majorit\u00e9 des images natives ou des images avec une balise &lt;img&gt; ou &lt;picture&gt; ; sur votre site.<\/p>\n<p><strong>Exemple JS pour le chargement paresseux d\u2019images natives sur des sites php personnalis\u00e9s ou tout autre site non-WP, Joomla, ou Drupal:.<\/strong><\/p>\n<blockquote>\n<pre><span style=\"color: #333333;\"><code id=\"actual-js-code\" class=\" cm-s-default\" data-lang=\"javascript\" data-og-lang=\"javascript\" data-alt-lang=\"javascript\"><span class=\"cm-variable\">document<\/span>.<span class=\"cm-property\">addEventListener<\/span>(<span class=\"cm-string\">\"DOMContentLoaded\"<\/span>, <span class=\"cm-keyword\">function<\/span>() {\n  <span class=\"cm-keyword\">var<\/span> <span class=\"cm-def\">lazyloadImages<\/span> <span class=\"cm-operator\">=<\/span> <span class=\"cm-variable\">document<\/span>.<span class=\"cm-property\">querySelectorAll<\/span>(<span class=\"cm-string\">\"img.lazy\"<\/span>);    \n  <span class=\"cm-keyword\">var<\/span> <span class=\"cm-def\">lazyloadThrottleTimeout<\/span>;\n  \n  <span class=\"cm-keyword\">function<\/span> <span class=\"cm-def\">lazyload<\/span> () {\n    <span class=\"cm-keyword\">if<\/span>(<span class=\"cm-variable-2\">lazyloadThrottleTimeout<\/span>) {\n      <span class=\"cm-variable\">clearTimeout<\/span>(<span class=\"cm-variable-2\">lazyloadThrottleTimeout<\/span>);\n    }    \n    \n    <span class=\"cm-variable-2\">lazyloadThrottleTimeout<\/span> <span class=\"cm-operator\">=<\/span> <span class=\"cm-variable\">setTimeout<\/span>(<span class=\"cm-keyword\">function<\/span>() {\n        <span class=\"cm-keyword\">var<\/span> <span class=\"cm-def\">scrollTop<\/span> <span class=\"cm-operator\">=<\/span> <span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">pageYOffset<\/span>;\n        <span class=\"cm-variable-2\">lazyloadImages<\/span>.<span class=\"cm-property\">forEach<\/span>(<span class=\"cm-keyword\">function<\/span>(<span class=\"cm-def\">img<\/span>) {\n            <span class=\"cm-keyword\">if<\/span>(<span class=\"cm-variable-2\">img<\/span>.<span class=\"cm-property\">offsetTop<\/span> <span class=\"cm-operator\">&lt;<\/span> (<span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">innerHeight<\/span> <span class=\"cm-operator\">+<\/span> <span class=\"cm-variable-2\">scrollTop<\/span>)) {\n              <span class=\"cm-variable-2\">img<\/span>.<span class=\"cm-property\">src<\/span> <span class=\"cm-operator\">=<\/span> <span class=\"cm-variable-2\">img<\/span>.<span class=\"cm-property\">dataset<\/span>.<span class=\"cm-property\">src<\/span>;\n              <span class=\"cm-variable-2\">img<\/span>.<span class=\"cm-property\">classList<\/span>.<span class=\"cm-property\">remove<\/span>(<span class=\"cm-string\">'lazy'<\/span>);\n            }\n        });\n        <span class=\"cm-keyword\">if<\/span>(<span class=\"cm-variable-2\">lazyloadImages<\/span>.<span class=\"cm-property\">length<\/span> <span class=\"cm-operator\">==<\/span> <span class=\"cm-number\">0<\/span>) { \n          <span class=\"cm-variable\">document<\/span>.<span class=\"cm-property\">removeEventListener<\/span>(<span class=\"cm-string\">\"scroll\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n          <span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">removeEventListener<\/span>(<span class=\"cm-string\">\"resize\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n          <span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">removeEventListener<\/span>(<span class=\"cm-string\">\"orientationChange\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n        }\n    }, <span class=\"cm-number\">20<\/span>);\n  }\n  \n  <span class=\"cm-variable\">document<\/span>.<span class=\"cm-property\">addEventListener<\/span>(<span class=\"cm-string\">\"scroll\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n  <span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">addEventListener<\/span>(<span class=\"cm-string\">\"resize\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n  <span class=\"cm-variable\">window<\/span>.<span class=\"cm-property\">addEventListener<\/span>(<span class=\"cm-string\">\"orientationChange\"<\/span>, <span class=\"cm-variable-2\">lazyload<\/span>);\n});<\/code><\/span><\/pre>\n<\/blockquote>\n<p><strong>Lazy loading les images difficiles \u00e0 obtenir\u2026. les images non-natives<\/strong><\/p>\n<p>Les Pagespeed Insights de Google serviront toujours des recommandations sur les images non natives \u2013 m\u00eame si elles sont de petites tailles \u2013 jusqu\u2019\u00e0 ce que vous soyez capable de les charger correctement de mani\u00e8re asynchrone. Les images non natives peuvent provenir du th\u00e8me de votre site, de pixels de plates-formes sociales ou simplement d\u2019images qui sont incorpor\u00e9es dans divers outils ou plugins de tiers utilis\u00e9s sur votre site.<\/p>\n<p>La plupart des plugins, extensions et outils ne sont pas capables de charger en lazy loading.<\/p>\n<p>Le processus de lazy loading d\u2019images non natives est le m\u00eame que celui que de nombreux utilisateurs qui n\u2019utilisent pas WordPress voudront utiliser pour effectuer le lazy loading sur leur site.<\/p>\n<figure id=\"attachment_6654\" aria-describedby=\"caption-attachment-6654\" style=\"width: 687px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/non-native-images-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6654\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/non-native-images-min.png\" alt=\"vitesse de chargement de l\u2019image\" width=\"687\" height=\"468\"><\/a><figcaption id=\"caption-attachment-6654\" class=\"wp-caption-text\"><em>Exemple d\u2019images non-natives, que des outils ou plugins communs <strong>SONT INCAPABLES<\/strong> de lazy load<\/em><\/figcaption><\/figure>\n<p>Si vous voulez obtenir ces images non-natives difficiles \u00e0 optimiser \u2013 et vous n\u2019utilisez pas Ezoic \u2013 il n\u2019y a pas de solution vraiment simple qui s\u2019applique \u00e0 chaque site. Malheureusement, les bases de code, les types de navigateurs et un certain nombre d\u2019autres facteurs rendront certaines solutions plus faciles que d\u2019autres pour diff\u00e9rents types de sites.<\/p>\n<p>L\u2019une des solutions les plus universelles est d\u2019initier un lazy loading personnalis\u00e9 sur toutes les images d\u2019une page en utilisant JQuery. C\u2019est <a href=\"http:\/\/jquery.eisbehr.de\/lazy\/\" target=\"_blank\" rel=\"noopener noreferrer\">une biblioth\u00e8que JQuery vraiment facile \u00e0 utiliser et robuste<\/a> qui est simple \u00e0 impl\u00e9menter si vous avez des connaissances de d\u00e9veloppeur de base. Si ce n\u2019est pas le cas, vous serez s\u00fbrement en mesure de tout comprendre.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/jquery-lazy-load-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6658\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/jquery-lazy-load-min.png\" alt=\"images de chargement paresseux \u00e0 l\u2019aide de jquery\" width=\"761\" height=\"545\"><\/a><\/p>\n<p>Il y a certainement des biblioth\u00e8ques de code beaucoup plus difficiles \u00e0 impl\u00e9menter et \u00e0 utiliser.<\/p>\n<p>En fin de compte, si tout ce que vous pouvez faire est le lazy loading de vos images natives en utilisant un plugin ou une extension, vous aurez quand m\u00eame acc\u00e9l\u00e9r\u00e9 votre site et am\u00e9lior\u00e9 vos scores de vitesse de page. Ne pas l\u2019effectuer sur des images non natives a peu de chances de ralentir consid\u00e9rablement un site. Cela d\u00e9pendra du nombre d\u2019images de tiers sur votre site particulier.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_COMPRESSER_ET_REDIMENSIONNER_CORRECTEMENT_LES_IMAGES\"><\/span>COMMENT COMPRESSER ET REDIMENSIONNER CORRECTEMENT LES IMAGES ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>C\u2019est un sujet que j\u2019ai d\u00e9j\u00e0 abord\u00e9 en profondeur.<\/p>\n<p>J\u2019ai discut\u00e9 <a href=\"https:\/\/blog.ezoic.com\/image-seo-tips-website-owners-digital-publishers\/\" target=\"_blank\" rel=\"noopener\">compression et optimisation d\u2019image dans un blog pr\u00e9c\u00e9dent<\/a> post sur les astuces simples SEO que tout webmaster peut faire. Je recommande de lire ce blog pour en savoir plus sur le redimensionnement des images selon les meilleures pratiques de Google.<\/p>\n<p><strong>Voici un r\u00e9sum\u00e9 rapide de l\u2019information:.<\/strong><\/p>\n<ol>\n<li>Les \u00e9diteurs utilisent souvent des images plus larges que la plupart des types d\u2019\u00e9cran<\/li>\n<li>Restaurer les images en largeur moyenne des pixels de l\u2019appareil vous aidera avec les tailles de fichiers<\/li>\n<li>Les JPEGs sont g\u00e9n\u00e9ralement plus petits que la plupart des PNGs<\/li>\n<li>Enregistrer des images au format JPEGS lorsqu\u2019il n\u2019y a pas de fond transparent peut aider avec les tailles de fichier<\/li>\n<li>Avec Photoshop, vous pouvez enregistrer pour le web et compresser les images \u00e0 votre satisfaction<\/li>\n<li>Vous pouvez aussi le faire avec <a href=\"https:\/\/imagecompressor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimizilla<\/a> \u2013 un outil de compression en ligne gratuit<\/li>\n<li><em><strong>Ci-dessous, je vais vous montrer une fa\u00e7on acc\u00e9l\u00e9r\u00e9e de faire tout cela en une seule fois dans les formats next-gen<\/strong><\/em><\/li>\n<\/ol>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/save-for-web-photoshop-2019-min.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6662\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/save-for-web-photoshop-2019-min-1024x875.jpg\" alt=\"enregistrer l\u2019image pour le Web\" width=\"620\" height=\"530\"><\/a><\/p>\n<p><strong>Les r\u00e8gles simples \u00e0 suivre:<\/strong><\/p>\n<ul>\n<li>Conserver toutes les images sous une taille de fichier maximale de 99KB<\/li>\n<li>Redimensionner les images afin qu\u2019elles soient inf\u00e9rieures \u00e0 1000px de largeur<\/li>\n<li>D\u00e9faut au format JPEG lors de l\u2019enregistrement d\u2019images<\/li>\n<\/ul>\n<p>En utilisant cette information, vous pouvez r\u00e9duire consid\u00e9rablement la taille des fichiers image. Malheureusement, cette fa\u00e7on de faire peut devenir assez manuelle si vous n\u2019avez pas r\u00e9ussi \u00e0 adh\u00e9rer aux meilleures pratiques sur votre site auparavant. Je vous recommande de commencer par les pages d\u2019accueil si vous d\u00e9cidez de revenir en arri\u00e8re et d\u2019optimiser toutes les images de votre site.<\/p>\n<p>Heureusement, il existe un moyen un peu plus rapide d\u2019y parvenir.<\/p>\n<p>Bien que cela n\u2019aide pas \u00e0 redimensionner physiquement certaines images, le processus que j\u2019aime pour servir des images dans des formats de nouvelle g\u00e9n\u00e9ration peut en fait vous \u00e9pargner une tonne de travail manuel pour comprimer vos images.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_SERVIR_LES_IMAGES_DANS_LES_FORMATS_DE_LA_NOUVELLE_GENERATION\"><\/span>COMMENT SERVIR LES IMAGES DANS LES FORMATS DE LA NOUVELLE G\u00c9N\u00c9RATION ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<blockquote><p><strong>Qu\u2019est-ce qu\u2019un format d\u2019image de nouvelle g\u00e9n\u00e9ration ?<\/strong> Un format d\u2019image de nouvelle g\u00e9n\u00e9ration fait r\u00e9f\u00e9rence \u00e0 un ensemble de types de fichiers qui ont am\u00e9lior\u00e9 la compression et la qualit\u00e9 pour une utilisation en ligne. Les formats les plus populaires sont JPEG 2000, JPEG XR et WebP. De nombreux formats n\u00e9cessitent des navigateurs sp\u00e9cifiques pour se charger correctement. Cela signifie que d\u2019autres types de fichiers images doivent \u00eatre utilis\u00e9s par d\u00e9faut si un format de nouvelle g\u00e9n\u00e9ration n\u2019est pas pris en charge par le navigateur du visiteur.<\/p><\/blockquote>\n<p>Servir ce type de formats aux visiteurs n\u2019est pas aussi difficile qu\u2019il n\u2019y para\u00eet \u00e0 premi\u00e8re vue. Bien que vous devrez configurer votre site pour servir correctement ces types d\u2019images, la mise en \u0153uvre de ces types de fichiers \u00e0 l\u2019\u00e9chelle du site est en fait assez facile.<\/p>\n<p>De plus, si cela ne vous d\u00e9range pas de d\u00e9penser une tr\u00e8s petite somme d\u2019argent, vous pouvez facilement adapter votre site au format d\u2019image de la prochaine g\u00e9n\u00e9ration assez rapidement. L\u2019ensemble du projet pourrait ne vous prendre qu\u2019une heure ou deux. Pour ceux qui ne veulent pas d\u00e9penser de l\u2019argent, nous avons un guide en profondeur sur <a href=\"\/?p=6183\">la fa\u00e7on de servir des images dans les formats next-gen en utilisant WordPress<\/a>.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webpimages.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6672\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webpimages.jpg\" alt=\"format d\u2019image webp next-gen\" width=\"805\" height=\"490\"><\/a><\/p>\n<p><strong>Quel est le meilleur format d\u2019image nouvelle g\u00e9n\u00e9ration ?<\/strong><\/p>\n<p>Tous les formats d\u2019images de la prochaine g\u00e9n\u00e9ration sont similaires en termes de compression et de qualit\u00e9, mais c\u2019est le WebP qui a r\u00e9cemment attir\u00e9 le plus l\u2019attention de Google et d\u2019autres grandes plateformes. Google Chrome et tous les autres principaux navigateurs prennent en charge les formats WebP dans toutes leurs mises \u00e0 jour les plus r\u00e9centes. Cela signifie qu\u2019il sera accessible et disponible pour la plupart des visiteurs.<\/p>\n<p>WebP est \u00e9galement un format open source et a \u00e9t\u00e9 largement adopt\u00e9 sur le Web.<\/p>\n<p>C\u2019est important si vous r\u00e9am\u00e9nagez un site entier pour qu\u2019il offre des formats d\u2019images de la prochaine g\u00e9n\u00e9ration, et que vous choisissez un format qui finira par devenir d\u00e9suet ou qui n\u2019est pas support\u00e9 par certains navigateurs, vous allez probablement servir les images JPEG ou PNG par d\u00e9faut sur votre site comme sauvegarde pour les visiteurs. Si vous n\u2019avez pas compress\u00e9 et optimis\u00e9 tous ces \u00e9l\u00e9ments manuellement, vous risquez de perdre beaucoup de temps et vos efforts seront en vain.<\/p>\n<p><strong>Qu\u2019est-ce qui est n\u00e9cessaire pour servir WebP et d\u2019autres formats d\u2019image de nouvelle g\u00e9n\u00e9ration ?<\/strong><\/p>\n<p>C\u2019est plus facile que vous ne le pensez. Vous remarquerez qu\u2019il ne s\u2019agit pas d\u2019une valeur par d\u00e9faut pour la plupart des logiciels d\u2019imagerie\/graphique permettant aux utilisateurs d\u2019enregistrer une image au format WebP. De plus, sans le bon code sur votre site Web, le t\u00e9l\u00e9chargement d\u2019une image au format WebP sur votre site pourrait entra\u00eener un cadre vide ou un espace vide pour les visiteurs.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webp-iamges12-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6676\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webp-iamges12-min-1024x586.png\" alt=\"images webp\" width=\"820\" height=\"469\"><\/a><\/p>\n<p>C\u2019est une solution facile.<\/p>\n<p>Vous pouvez ajouter du code simple \u00e0 votre site&lt;&gt;, et ensuite utiliser un certain nombre de convertisseurs diff\u00e9rents pour convertir toutes les images existantes en WebP.<\/p>\n<p>De l\u00e0, vous pouvez facilement t\u00e9l\u00e9charger des images WebP sur votre site ou utiliser divers outils pour convertir automatiquement les images que vous t\u00e9l\u00e9chargez sur votre site au format WebP. Certains outils vous recommanderont m\u00eame d\u2019enregistrer les fichiers au format JPEG et de les stocker comme sauvegarde par d\u00e9faut tout en permettant au convertisseur de servir le WebP sur la page, sauf si un visiteur se trouve dans un navigateur non pris en charge.<\/p>\n<p>C\u2019est en fait la meilleure configuration \u2013 et celle que je vais vous montrer ci-dessous \u2013 car elle couvre toutes vos bases, y compris le redimensionnement des images, les formats de nouvelle g\u00e9n\u00e9ration et le service des types de fichiers traditionnels aux visiteurs des navigateurs qui ne peuvent pas voir les images WebP.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Untitled-presentation-6-min.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6680\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Untitled-presentation-6-min.jpg\" alt=\"servir les formats d\u2019image webp sur le site Web\" width=\"960\" height=\"540\"><\/a><\/p>\n<p><a href=\"https:\/\/blog.ezoic.com\/how-to-optimize-critical-css-to-make-your-website-faster\/\" target=\"_blank\" rel=\"noopener\"><em>Voir le blog sur l\u2019optimisation CSS ici.<\/em><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_CHANGER_TOUTES_LES_IMAGES_EN_WEBP_ET_RENDRE_VOTRE_SITE_WEB_PLUS_RAPIDE\"><\/span>COMMENT CHANGER TOUTES LES IMAGES EN WEBP ET RENDRE VOTRE SITE WEB PLUS RAPIDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Il y a une multitude d\u2019approches diff\u00e9rentes que vous pourriez adopter \u00e0 cet \u00e9gard. Je vais vous montrer celui que j\u2019ai utilis\u00e9 pour ce blog (WordPress). Vous pouvez lire mon guide pour <a href=\"\/?p=6183\">le faire sp\u00e9cifiquement dans WordPress ici<\/a>.<\/p>\n<p>Cela a fait une diff\u00e9rence mod\u00e9r\u00e9e dans le score global de Google Pagespeed Insights et m\u2019a pris moins de 30 \u00e0 40 minutes \u00e0 mettre en \u0153uvre (le temps pour le convertisseur pour ex\u00e9cuter toutes les images peut avoir \u00e9t\u00e9 l\u00e9g\u00e8rement plus long).<\/p>\n<p>Bien que cela se fasse en utilisant WordPress comme CMS, vous constaterez que toutes les instructions ci-dessous et les outils que j\u2019utilise s\u2019appliquent \u00e0 tous les sites ; cependant, cela peut \u00eatre un peu plus facile si vous \u00eates un utilisateur de WordPress (pas de codage).<\/p>\n<p><strong>Comment ajouter des images WebP \u00e0 mon site ?<\/strong><\/p>\n<p>Tout d\u2019abord, nous devons rendre votre site capable de stocker, de servir et de rendre les formats d\u2019images WebP. Comme je l\u2019ai mentionn\u00e9 plus t\u00f4t, vous devez avoir un processus en place pour servir les fichiers d\u2019images de sauvegarde aux visiteurs qui utilisent des navigateurs qui ne prennent pas en charge le format WebP. Cela signifie g\u00e9n\u00e9ralement l\u2019utilisation de JS pour \u00e9crire des r\u00e8gles d\u2019affichage dans le code de votre site &lt;ou la modification de votre fichier&gt;.htaccess pour rediriger correctement les d\u00e9tails du navigateur de base don du fichier image.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webpplugin.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6684\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webpplugin.png\" alt=\"plugin webp\" width=\"980\" height=\"83\"><\/a><\/p>\n<p><strong>Option 1:<\/strong>Il y a en fait une tr\u00e8s belle source de JS qui est d\u00e9j\u00e0 Pagespeed-Insights-Optimized qui est simple \u00e0 ajouter \u00e0 votre site. Vous pouvez en fait <a href=\"https:\/\/wordpress.org\/plugins\/wp-webp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>l\u2019ajouter automatiquement en utilisant ce simple plugin<\/strong><\/a> si vous \u00eates un utilisateur de WordPress qui veut \u00e9viter tout codage possible (garder \u00e0 l\u2019esprit que les plugins fonctionnent diff\u00e9remment pour tous les sites).<\/p>\n<p><strong>Option 2:<\/strong> Sinon, vous devez ajouter ces fichiers \u00e0 votre base de donn\u00e9es <a href=\"http:\/\/webpjs.appspot.com\/without-webpjs-support.html\" target=\"_blank\" rel=\"noopener noreferrer\">au bas de cette page<\/a> et impl\u00e9menter le code ci-dessous\u2026<\/p>\n<blockquote><p><em>Seulement n\u00e9cessaire si vous n\u2019utilisez pas WordPress ou l\u2019option 1:<br \/>\n<\/em><br \/>\n&lt;&lt;script&gt;(function(){var WebP=new Image();Webp.onload=WebP.onerror=function(){<br \/>\nif(WebP.height!=2){var sc=document.createElement(&#8216;script&#8217;);sc.type=&#8217;text\/javascript&#8217;;sc.async=true;<br \/>\nvar s=document.getElementsByTagName(&#8216;script&#8217;)[0];sc.src=&#8217;js\/webpjs-0.0.2.min.js&#8217;;s.parentNode.insertBefore(sc,s);};<br \/>\nWebP.src=&#8217;data:image\/webp;base64,UklGRjoAAABXRUJVV4IC4AACyAgCdASoCAAALmk0mk0iIiIiIgBoSygABc6WWgAA\/veff\/0PP8bA\/\/LwYAAA&#8217;;}) ();&lt; \/script&gt;<\/p><\/blockquote>\n<p>Maintenant, vous avez la possibilit\u00e9 de servir les images WebP des visiteurs et par d\u00e9faut aux formats r\u00e9guliers s\u2019ils sont dans les navigateurs support\u00e9s. Ensuite, vous aurez besoin d\u2019un moyen de convertir les images existantes en WebP et de servir les images non-g\u00e9n\u00e9rationnelles nouvellement t\u00e9l\u00e9charg\u00e9es comme WebP lorsque vous ajoutez de nouveaux articles ou messages sur le site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_CONVERTIR_DES_IMAGES_EN_WEBP_SUR_MON_SITE\"><\/span>COMMENT CONVERTIR DES IMAGES EN WEBP SUR MON SITE ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Une fois que vous avez r\u00e9dig\u00e9 des r\u00e8gles pour servir les images de sauvegarde dans des formats universellement s\u00e9lectionn\u00e9s, vous pouvez utiliser le codec open source et t\u00e9l\u00e9charger le r\u00e9f\u00e9rentiel <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/using\" target=\"_blank\" rel=\"noopener noreferrer\">disponible ici<\/a> pour convertir les images au format WebP sur votre site. Cela vous permettra de servir les visiteurs dans les images WebP des navigateurs pris en charge directement \u00e0 partir de vos pages existantes.<\/p>\n<p><strong>Option plus facile:<\/strong> Il y a en fait beaucoup d\u2019outils et de plugins vraiment super qui simplifient beaucoup ce processus et \u00e9liminent le besoin de codage. Et pour \u00eatre honn\u00eate, l\u2019outil que je vais utiliser ci-dessous m\u2019a permis d\u2019\u00e9conomiser beaucoup de temps que j\u2019aurais probablement pass\u00e9 \u00e0 faire beaucoup d\u2019essais et d\u2019erreurs (ce qui n\u2019est pas une approbation).<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/shortpixel-plugin-for-webp-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6692\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/shortpixel-plugin-for-webp-min-1024x460.png\" alt=\"convertisseur de format d\u2019image de nouvelle g\u00e9n\u00e9ration\" width=\"815\" height=\"366\"><\/a><\/p>\n<p>Pour convertir les images existantes et capturer automatiquement toutes les images nouvellement t\u00e9l\u00e9charg\u00e9es au format WebP sur mon site, j\u2019ai vraiment aim\u00e9 utiliser <a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ShortPixel<\/a><em>(non affili\u00e9, je viens de trouver leur solution la meilleure pour mon site)<\/em>.<\/p>\n<p>ShortPixel a quelques fonctionnalit\u00e9s gratuites, mais la plupart des \u00e9diteurs devront probablement opter pour leurs plans d\u2019optimisation d\u2019image bas\u00e9s sur le cr\u00e9dit. Puisqu\u2019ils traitent et aident essentiellement \u00e0 stocker diverses sauvegardes de vos images, il y a des frais minimes associ\u00e9s \u00e0 l\u2019utilisation de leurs outils. Cependant, une grande partie du co\u00fbt initial est \u00e0 l\u2019avance, et le syst\u00e8me de cr\u00e9dit le rend assez facile et tr\u00e8s abordable pour presque tout le monde.<\/p>\n<p><a href=\"https:\/\/shortpixel.com\/api-tools\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6696\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/shortpixel-min-1024x440.png\" alt=\"convertir des images en formats next-gen\" width=\"859\" height=\"369\"><\/a><\/p>\n<p>Comme je l\u2019ai mentionn\u00e9 ci-dessus, j\u2019ai utilis\u00e9 le plugin WordPress et je me suis abonn\u00e9 \u00e0 un plan de cr\u00e9dit mensuel avec ShortPixel. Ils ont des outils et des ressources disponibles pour convertir et servir des images au format WebP pour d\u2019autres types de sites (Joomla, php personnalis\u00e9, etc.), donc ce que je montre ci-dessous ne s\u2019applique pas seulement aux sites WordPress. Toutefois, la mise en \u0153uvre sera l\u00e9g\u00e8rement diff\u00e9rente.<\/p>\n<p>Il <a href=\"https:\/\/shortpixel.com\/pricing\" target=\"_blank\" rel=\"noopener noreferrer\">me co\u00fbte moins de $40<\/a> pour convertir toutes les images de mon site. Il me restait aussi assez de cr\u00e9dits pour supporter mes futurs t\u00e9l\u00e9chargements pour quelques mois.<\/p>\n<p><strong>Les \u00e9tapes de conversion des images:<\/strong><\/p>\n<p>1.) Une fois que j\u2019ai s\u00e9lectionn\u00e9 le plan qui correspond \u00e0 mes besoins, j\u2019ai t\u00e9l\u00e9charg\u00e9 le plugin et entr\u00e9 ma cl\u00e9 API.<\/p>\n<p>2.) Ensuite, j\u2019ai configur\u00e9 ShortPixel pour qu\u2019il s\u2019aligne sur les meilleures pratiques de mon site. Voir ci-dessous.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/image-short1-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6700\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/image-short1-min-1024x363.png\" alt=\"param\u00e8tres pour les images webp du site Web\" width=\"838\" height=\"297\"><\/a><\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/short-pixel-settings-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6704\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/short-pixel-settings-min-1024x476.png\" alt=\"servir les formats d\u2019image next-gen sur mon site Web\" width=\"837\" height=\"389\"><\/a><\/p>\n<p>3.) Dans les param\u00e8tres, il existe un emplacement o\u00f9 vous pouvez sp\u00e9cifier que certaines extensions de fichier, noms de fichier et types de fichiers ne doivent jamais \u00eatre convertis. Cela vaut vraiment la peine d\u2019y r\u00e9fl\u00e9chir. S\u2019il y a des images ou des parties de votre site que vous ne souhaitez peut-\u00eatre pas convertir (arri\u00e8re-plans de diapositives, etc.), vous devriez envisager de les ajouter ici.<\/p>\n<p><em><strong>NOTE : Toutes les images peuvent \u00eatre sauvegard\u00e9es dans les param\u00e8tres et revenir facilement \u00e0 leur \u00e9tat original apr\u00e8s les avoir converties si cela affecte l\u2019apparence de votre site.<\/strong><\/em><\/p>\n<p>4.) Une fois avoir configur\u00e9 le plugin pour convertir et servir les images de la prochaine g\u00e9n\u00e9ration sur mon site selon mes pr\u00e9f\u00e9rences, j\u2019ai pu commencer \u00e0 t\u00e9l\u00e9charger et \u00e0 convertir en masse tous les fichiers de mon site.<\/p>\n<p>5.) Une fois avoir fini de t\u00e9l\u00e9charger des images en masse, j\u2019ai v\u00e9rifi\u00e9 mon site sur plusieurs navigateurs pour m\u2019assurer que mes images s\u2019affichaient correctement. Succ\u00e8s!<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/bulk-image-opt-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6708 \" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/bulk-image-opt-min-1024x318.png\" alt=\"convertir en bloc des images au format WebP next-gen\" width=\"840\" height=\"261\"><\/a><\/p>\n<p>Apr\u00e8s tout cela, mes images ont \u00e9t\u00e9 compress\u00e9es et optimis\u00e9es et j\u2019ai servi les images WebP des navigateurs support\u00e9s sur mon site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Et_voila_CEST_TOUT\"><\/span>Et voil\u00e0. C\u2019EST TOUT !<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dans les informations ci-dessus, vous pouvez trouver \u00e0 peu pr\u00e8s toutes les donn\u00e9es n\u00e9cessaires pour optimiser les images sur votre site et le rendre beaucoup plus rapide. Au minimum, il aura un meilleur score Pagespeed Insights.<\/p>\n<p>En combinant ceci avec les conseils d\u2019optimisation CSS de notre dernier blog, vous obtiendrez des <a href=\"\/?p=14259\">moyens percutants pour rendre votre site plus rapide<\/a>.<\/p>\n<p>Si vous \u00eates un utilisateur <a href=\"https:\/\/www.ezoic.com\" target=\"_blank\" rel=\"noopener\">Ezoic<\/a>, le lazy loading et les param\u00e8tres CSS \u00e0 l\u2019int\u00e9rieur de l\u2019application <a href=\"\/?page_id=3582\">Site Speed<\/a> peuvent rendre cela tr\u00e8s facile (disponible gratuitement dans l\u2019app store bient\u00f4t). Si vous n\u2019\u00eates pas un utilisateur d\u2019Ezoic, le plugin et les r\u00e8gles ci-dessus devraient fournir suffisamment d\u2019informations simplifi\u00e9es pour au moins am\u00e9liorer la fa\u00e7on dont vos images sont charg\u00e9es sur la page.<\/p>\n<p>Enfin, si vous voulez servir les formats d\u2019image de nouvelle g\u00e9n\u00e9ration et am\u00e9liorer la taille des fichiers, vous pouvez faire presque tout cela en suivant les \u00e9tapes de la derni\u00e8re section ci-dessus. La meilleure pratique consiste \u00e0 compresser et redimensionner manuellement toutes les images avant m\u00eame qu\u2019elles ne soient t\u00e9l\u00e9charg\u00e9es \u2013 de cette fa\u00e7on, m\u00eame lorsque les visiteurs utilisent des navigateurs qui ne prennent pas en charge les formats de la prochaine g\u00e9n\u00e9ration, ils re\u00e7oivent un fichier de plus petite taille.<\/p>\n<p>Si vous n\u2019avez pas sauvegard\u00e9 et compress\u00e9 les images correctement, je vous recommande de commencer maintenant quoi qu\u2019il arrive. M\u00eame si vous utilisez les outils d\u2019optimisation et les formats de nouvelle g\u00e9n\u00e9ration ci-dessus, il est judicieux d\u2019enregistrer toutes les images que vous t\u00e9l\u00e9chargez dans la taille la plus optimis\u00e9e possible.<\/p>\n<p>Si vous avez d\u2019autres questions au sujet de ces processus, vous pouvez les laisser ci-dessous.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; AM\u00c9LIORER LA VITESSE DU SITE GR\u00c2CE AU LAZY LOADING DE VOS IMAGES ET EN SERVANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION Nous avons partag\u00e9 quelques blogs r\u00e9cents sur la fa\u00e7on d\u2019am\u00e9liorer la vitesse du site. La semaine derni\u00e8re, j\u2019ai couvert comment optimiser le CSS. Cette semaine, je vous expliquerai comment configurer les images de votre site&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/ameliorez-la-vitesse-de-votre-site-grace-au-lazy-loading-vos-images-en-utilisant-des-formats-nouvelle-generation\/\">Continue reading <span class=\"screen-reader-text\">AM\u00c9LIOREZ LA VITESSE DE VOTRE SITE GR\u00c2CE AU LAZY LOADING VOS IMAGES, EN UTILISANT DES FORMATS NOUVELLE G\u00c9N\u00c9RATION<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[10],"tags":[8],"class_list":["post-959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-referencement-seo","tag-fr","entry"],"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/959"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/comments?post=959"}],"version-history":[{"count":0,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media\/976"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media?parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/categories?post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/tags?post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}