Comment rem\u00e9dier aux avertissements de PageSpeed ? <\/em><\/p> Chaque rapport de PageSpeed inclut une s\u00e9rie de recommandations et de warnings, divis\u00e9s en deux grandes cat\u00e9gories : <\/p> La section Opportunit\u00e9s<\/em> se concentre sur les mesures de performance qui pourraient aider \u00e0 r\u00e9duire le temps de chargement. <\/p> La section Diagnostics<\/em> est consacr\u00e9e aux meilleures pratiques de d\u00e9veloppement web qui devraient \u00eatre mises en place sur la page analys\u00e9e. <\/p> Dans ce guide, nous allons passer en revue les recommandations de Page Speed Insights les plus communes. Nous les expliquerons en des termes faciles \u00e0 comprendre, puis nous verrons comment y r\u00e9pondre, ou du moins comment les remettre dans le contexte. <\/p> Dans la section Opportunit\u00e9s<\/em>, PageSpeed Insights vous donne des conseils sur les mesures de performances qui pourraient aider votre page \u00e0 se charger plus rapidement. <\/p> Chaque recommandation est accompagn\u00e9e d\u2019une estimation du temps qui serait gagn\u00e9 si la solution sugg\u00e9r\u00e9e \u00e9tait mise en place. Un exemple dans la section Opportunit\u00e9s: diff\u00e9rer le CSS inutilis\u00e9 pourrait faire gagner 0,16 secondes au temps de chargement de cette page <\/em><\/p> Voyons quelles sont les recommandations PSI les plus courantes dans cette section, et comment s\u2019en occuper. <\/p> Avec cette recommandation, Google vous encourage \u00e0 retirer ou diff\u00e9rer les fichiers JS ou CSS qui interf\u00e8rent avec le chargement du contenu visible<\/em> de vos pages Web. <\/p> Le contenu visible<\/em> est le contenu que votre utilisateur voit d\u00e8s qu\u2019il ouvre la page, avant de commencer \u00e0 faire d\u00e9filer la page.<\/p> Pour comprendre ce que pageSpeed veut dire en vous encourageant \u00e0 diff\u00e9rer les ressources bloquant le rendu (que ce soit un script ou une feuille de style), il faut d\u2019abord comprendre ce qu\u2019est une ressources bloquant le rendu.<\/p> Voici ce que dit la documentation de WP Rocket<\/a> :<\/p> \u201cAvant que le navigateur puisse afficher une page web, il doit parcourir son HTML.<\/em><\/p> Pendant ce processus, d\u00e8s que le navigateur rencontre un \u00e9l\u00e9ment qui comprend un script ou un feuille de style, il doit s\u2019arr\u00eater, faire une requ\u00eate pour le fichier, attendre qu\u2019il charge depuis le serveur et l\u2019ex\u00e9cuter avant de pouvoir continuer \u00e0 traiter le HTML. Certaines ressources CSS et JS doivent \u00eatre charg\u00e9es et trait\u00e9es avant de pouvoir afficher quoique ce soit sur la page (elles sont appel\u00e9es des ressources critiques), d\u2019autres peuvent \u00eatre remises \u00e0 plus tard et charg\u00e9es dans un second temps sans que cela n’impacte la page ou l\u2019exp\u00e9rience de l\u2019utilisateur.<\/p> Diff\u00e9rer le chargement des ressources non-critiques ou du CSS non utilis\u00e9, et les charger apr\u00e8s que le navigateur a affiche la page est une bonne pratique pour r\u00e9duire de quelque (milli) secondes le temps de chargement.<\/p> Alors, comment diff\u00e9rer le chargement du JS\/CSS bloquant le rendu et supprimer le CSS non utilis\u00e9 ?<\/strong><\/p> S\u2019attaquer \u00e0 ce probl\u00e8me manuellement peut \u00eatre assez d\u00e9licat car cela implique creuser dans votre code et l\u2019\u00e9diter vous-m\u00eame. Si vous pr\u00e9f\u00e9rez faire appel \u00e0 un programme, voici un exemple de comment supprimer le javascript bloquant le rendu<\/a> et un autre sur la suppression du CSS<\/a> bloquant le rendu. <\/p> La solution la plus facile est d\u2019utiliser un plugin comme WP Rocket ! <\/p> Notre plugin inclut deux options qui vous aideront \u00e0 r\u00e9pondre aux recommandations de PSI :<\/p> Optimiser le chargement du CSS<\/strong><\/p> Chargement diff\u00e9r\u00e9 de JavaScript<\/strong><\/p> Il faut noter que, parfois, il est tr\u00e8s difficile (sinon impossible) d\u2019\u00e9liminer enti\u00e8rement tout le CSS et JS bloquant le rendu. Cela d\u00e9pend \u00e9norm\u00e9ment de la mani\u00e8re dont le th\u00e8me et les plugins que vous utilisez sur votre site WordPRess sont cod\u00e9s. <\/p> Mais par exemple, pensez aux feuilles de style qui pourraient n\u2019\u00eatre n\u00e9cessaires qu\u2019apr\u00e8s le chargement de la page, le CSS d’une fen\u00eatre modale n’apparaissant qu’apr\u00e8s avoir cliqu\u00e9 sur un bouton sp\u00e9cifique.<\/p> Si vous n\u2019avez pas cod\u00e9 vous m\u00eame votre site au complet, et que vous utilisez \u00e0 la place des th\u00e8mes et des plugins que d\u2019autres d\u00e9veloppeurs ont cr\u00e9\u00e9s, il faut accepter que vous ne pourrez pas les contr\u00f4ler \u00e0 100 %. <\/p> Il n\u2019est pas n\u00e9cessaire de diff\u00e9rer TOUTES vos ressources CSS et JS bloquant le rendu, d\u2019autant plus que parfois, le processus peut mener \u00e0 des pages cass\u00e9es (ce qui est bien pire qu\u2019un \u201cred score\u201c de Google PageSpeed Insight !).<\/p> En supprimant les r\u00e8gles inutilis\u00e9es de vos feuilles de style, vous r\u00e9duisez la charge inutile de votre site.<\/p> C’est ce que l\u2019on appelle les ressources CSS inutilis\u00e9es.<\/p> Un cas typique de CSS inutilis\u00e9s est celui des th\u00e8mes et plugins WordPress pr\u00e9-construits : ils contiennent g\u00e9n\u00e9ralement plus de code que n\u00e9cessaire pour chaque page car l’auteur ne peut pas pr\u00e9voir comment l’utilisateur va construire son site.<\/p> Il est tr\u00e8s difficile d’automatiser cette t\u00e2che avec pr\u00e9cision, et encore plus de supprimer ce CSS \u00e0 la main.<\/p> Chris Coyer, auteur de CSS Tricks, en explique toutes les raisons.<\/a><\/p> Avec WP Rocket, vous pouvez utiliser l’option Optimiser le Chargement CSS<\/em> qui va diff\u00e9rer le chargement du CSS, mais notre plugin ne peut pas supprimer les parties inutilis\u00e9es.<\/p> Pour vraiment satisfaire \u00e0 cette recommandation, vous devrez coder votre site sur mesure.<\/p> Si votre serveur r\u00e9pond lentement aux requ\u00eates de vos utilisateurs, l\u2019exp\u00e9rience utilisateur globale de votre site en sera affect\u00e9e.<\/p> Comme nous l\u2019avons d\u00e9j\u00e0 mentionn\u00e9 dans notre guide sur les temps de chargements lents<\/a>, pour obtenir les meilleures performances de votre site, il est capital d\u2019avoir un serveur rapide. <\/p> Quand Google PageSpeed vous demande de r\u00e9duire le temps de r\u00e9ponse serveur; il fait r\u00e9f\u00e9rence \u00e0 la mesure du Time to First Byte<\/em>.<\/p> Nous parlons de ce sujet dans notre guide : Le time to first byte : comment le mesurer, l\u2019interpr\u00e9ter et le r\u00e9duire !<\/a><\/p> Ces deux recommandations sont li\u00e9es \u00e0 l\u2019une des techniques d\u2019optimisation de code les plus populaires : la minification. <\/strong><\/p> La minification est la techniques rend les pages HTML, les scripts CSS et JS moins lisibles (pour les humains, \u00e9videmment !) mais plus rapides \u00e0 charger !<\/a><\/p> Cette m\u00e9thode retire tous les caract\u00e8res inutiles, les retours \u00e0 la ligne, les marges, les espaces et les commentaires que les d\u00e9veloppeurs ajoutent aux pages web et aux scripts. <\/p> Les d\u00e9veloppeurs ont besoin des commentaires, des marges et des espaces pour rendre les pages et les scripts plus lisibles au moment du d\u00e9veloppement. <\/p> Mais quand l\u2019ouvrage est termin\u00e9 et que le site est en ligne, tous ces \u00e9l\u00e9ments deviennent superflus. Ils augmentent le trafic du r\u00e9seau et alourdissent la bande passante avec des requ\u00eates r\u00e9seau. C\u2019est l\u00e0 que la minification entre en sc\u00e8ne : elle rend le code plus l\u00e9ger et r\u00e9duit le temps de chargement, pour que l\u2019utilisateur final le re\u00e7oive plus rapidement.<\/p> Alors, comment minifier des fichiers CSS et JS ?<\/strong><\/p> Il y a deux mani\u00e8res de minifier vos CSS et JavaScript : <\/p> Pour savoir comment minifier vos fichiers manuellement, allez voir notre guide : Les meilleurs outils de minification pour le CSS et JS.<\/a><\/p> Pour rendre la minification automatiques et ne pas vous occuper des petites modifications manuelles, vous pouvez utiliser un plugin WordPress.<\/p> Il y a beaucoup de plugins de minification efficaces sur le march\u00e9, mais encore une fois, WP Rocket pourrait \u00eatre la solution parfaite pour vous !<\/strong> ?<\/p> Notre plugin inclut la minification HTML, CSS et JS, ainsi que la combinaison CSS et JS.<\/p> Minifier et combiner les fichiers CSS<\/em><\/strong><\/p> Minifier et combiner les fichiers JS<\/em><\/strong> Comme nous l\u2019avons mentionn\u00e9 dans notre note sur la suppression des ressources bloquant le rendu, la minification et la combinaison sont des fonctionnalit\u00e9s avanc\u00e9es qui peuvent aussi parfois <\/em>casser l\u2019agencement de vos pages. Allez voir notre documentation pour comprendre comment r\u00e9gler les probl\u00e8mes potentiels li\u00e9s \u00e0 la minification \/ combinaison<\/a>.<\/p> Les redirections 301 sont en effet tr\u00e8s importantes pour informer votre navigateur qu\u2019une requ\u00eate HTTP provient d\u2019une source situ\u00e9e \u00e0 un autre endroit, et \u00e9viter les erreurs 404<\/a> ; mais lorsque les redirections s\u2019entassent, elles ont tendance \u00e0 ralentir vos pages. <\/p> PageSpeed Insights prend en compte les redirections quand une page en comporte plus de deux. <\/p> La solution id\u00e9ale serait, \u00e9videmment, de mettre \u00e0 jour les liens d\u2019origine vers les nouvelles ressources.<\/p> Avec cette recommandation, PageSpeed Insights vous sugg\u00e8re de mettre en place la compression GZIP. <\/p> Comme Google l\u2019explique :<\/a><\/p> La compression de texte diminue la taille en byte des r\u00e9ponses r\u00e9seau qui incluent du texte. Moins de bytes charg\u00e9s signifie des temps de chargement plus rapides. <\/em><\/p> La compression GZIP est une m\u00e9thode populaire et efficace pour donner plus de vitesse \u00e0 votre site WordPress en r\u00e9duisant le poids total des pages et en am\u00e9liorant le time to first paint<\/a>.<\/p> Tout ce qu\u2019il y a \u00e0 savoir sur la mani\u00e8re dont mettre en place la compression GZIP sur votre site WordPRess est inclus dans notre guide !<\/a><\/p> Cet avertissement de PageSpeed appara\u00eet \u00e0 chaque fois que du contenu provenant d\u2019une source tierce se trouve sur votre site (par exemple les polices de caract\u00e8res charg\u00e9es depuis Google, ou une vid\u00e9o de YouTube) et que vous ne faites pas un prefetch <\/em>pour la r\u00e9solution DNS correspondante. <\/p> Qu\u2019est ce que le prefetch <\/em>de DNS ? \u201cAvec le prefetch, vous pouvez dire \u00e0 votre navigateur d\u2019aller chercher les ressources dont l\u2019utilisateur pourrait avoir besoin plus tard pour une navigation ou interaction future, si cet utilisateur fait l\u2019action que vous aviez pr\u00e9vue. Ces ressources seront alors r\u00e9cup\u00e9r\u00e9es \u00e0 la priorit\u00e9 la plus basse par le navigateur, lorsque la page en cours aura fini de charger et qu\u2019il y aura de la bande passante disponible.\u201d<\/em><\/p> Avec le prefetching de DNS, vous pouvez indiquer au navigateur de faire une recherche DNS sur une page pendant que l\u2019utilisateur la navigue. Lorsque une requ\u00eate est envoy\u00e9e pour la ressource externe, la r\u00e9solution DNS aura d\u00e9j\u00e0 \u00e9t\u00e9 trait\u00e9e, ce qui aura pour effet de r\u00e9duire la latence. <\/p> Les requ\u00eates de prefetching de DNS peuvent donner un petit gain d\u2019acc\u00e9l\u00e9ration \u00e0 votre temps de chargement, et vous pouvez l\u2019appliquer facilement (et satisfaire PageSpeed) avec WP Rocket. <\/p> Cet avertissement fait r\u00e9f\u00e9rence \u00e0 la strat\u00e9gie d\u2019optimisation du Critical Rendering Path (CRP)<\/a>. De cette mani\u00e8re, le navigateur peut charger la page plus rapidement. <\/p> Pour s\u2019occuper de cette recommandation PSI, vous devez d\u00e9clarer des liens de pr\u00e9chargement dans votre HTML, afin que le navigateur sache qu\u2019il doit charger ces ressources d\u00e8s que possible <\/p> WP Rocket vous permet de vous occuper de cet avertissement uniquement pour les fichiers CSS : en activant l\u2019option Optimiser le chargement du CSS, WP Rocket ajoute l\u2019attribut rel=\u00a0\u00bbpreload\u00a0\u00bb <\/em>\u00e0 vos fichiers CSS.<\/p> Vous trouverez plus d\u2019information sur comment WP Rocket g\u00e8re le CSS critical ic<\/a>i.<\/p> Les images hors \u00e9cran sont celles qui n\u2019apparaissent pas lorsque l\u2019utilisateur ouvre une page. <\/p> On les appelle les images below-the-fold.<\/em><\/p> Puisque l\u2019utilisateur ne peut pas les voir lorsqu\u2019il charge la page, il est inutile de charger ces images dans le processus de chargement. <\/p> Avec cette recommandation, PageSpeed vous sugg\u00e8re de diff\u00e9rer le chargement des images qui ne sont pas \u00e0 l\u2019\u00e9cran pour le reporter au moment o\u00f9 l\u2019utilisateur d\u00e9file sur la page et envoie une requ\u00eate pour le contenu below-the-fold<\/em>.<\/p> Pour diff\u00e9rer le chargement des images offscreen, vous pouvez appliquer du LazyLoad sur ces images<\/strong>.<\/p> Le LazyLoad est une technique qui vous permet de diff\u00e9rer le chargement d\u2019une image (pour en savoir plus sur le LazyLoad et comment l\u2019appliquer \u00e0 vos images, allez lire notre guide<\/a>). Si vous choisissez la seconde option, vous avez deux excellentes alternatives : <\/p> 2) WP Rocket, qui inclut l\u2019option le LazyLoad pour vos images : <\/p> En choisissant l\u2019un des deux, vous satisferez aux exigences de PageSpeed Insights. Cela devrait r\u00e9soudre l\u2019avertissement concernant les images offscreen non diff\u00e9r\u00e9es. <\/p> Gardez en t\u00eate que le LazyLoad de WP Rocket ne peut pas \u00eatre appliqu\u00e9 \u00e0 toutes les images pour le moment (comme par exemple les images de fond charg\u00e9es depuis les feuilles de styles.).<\/p> Pour savoir \u00e0 quel moment ces exceptions s\u2019appliquent, allez voir notre documentation<\/a>.<\/p> L\u2019art d\u2019optimiser les images est tr\u00e8s facile \u00e0 ma\u00eetriser. Pour redimensionner et optimiser vos images, vous devez suivre quelques \u00e9tapes que nous d\u00e9crivons en d\u00e9tails dans notre guide : comment compresser et r\u00e9duire le poids de vos images<\/a>.<\/p> L\u2019encodage d\u2019images et le processus qui enregistre les images dans un format compress\u00e9 plus efficace. Il existe un outil efficace qui s\u2019occupe de la strat\u00e9gie d\u2019optimisation de vos images : notre outil gratuit Imagify<\/a>. Il vous aidera \u00e0 travailler sur vos fichiers et \u00e0 r\u00e9gler la majorit\u00e9 des avertissements de PageSpeed qui concernent les images.<\/p> Avec cette recommandation, PageSpeed vous demande d\u2019utiliser des formats d\u2019images plus modernes, comme JPEG 2000<\/strong>, JPEG XR<\/strong> et WebP<\/strong><\/a>.<\/p> Ces formats d\u2019images sont meilleurs que leurs pr\u00e9d\u00e9cesseurs, JPEG et PNG, en termes de qualit\u00e9 et de fonctionnalit\u00e9s de compression : ils peuvent se charger plus vite et consomment moins de donn\u00e9es mobile. <\/p> Notre plugin d\u2019optimisation d\u2019image Imagify<\/a> est capable de convertir les images au format WebP, profitez-en ! WP Rocket offrira bient\u00f4t la compatibilit\u00e9 WebP (il sera ajout\u00e9 \u00e0 l\u2019une de nos prochaines versions.).<\/p> Toutes les recommandations dans la section Diagnostics<\/em> se concentrent sur les performances et les meilleures pratiques qui peuvent aider \u00e0 am\u00e9liorer votre site. <\/p> Voyons quelles sont les recommandations de PSI les plus communes dans cette section et ce que vous pouvez faire pour les r\u00e9gler. <\/p> Cet avertissement PSI concerne le chargement des polices de caract\u00e8res web, qui sont souvent des fichiers lourds qui ralentissent beaucoup le chargement des pages. <\/p> Certains navigateurs cachent le texte d\u2019une page en attendant que les polices de caract\u00e8res se chargent. Cet effet s\u2019appelle \u00ab\u00a0flash de texte invisible\u00a0\u00bb.<\/p> Mais cette solution n\u2019est pas id\u00e9ale pour l\u2019exp\u00e9rience utilisateur. Dans ce cas, la meilleure solution est de permettre aux utilisateurs de voir le texte en utilisant une police de caract\u00e8res syst\u00e8me. <\/p> L\u2019effet produit sera le \u00ab\u00a0flash de texte non stylis\u00e9\u00a0\u00bb, mais en utilisant une police de caract\u00e8re syst\u00e8me par d\u00e9faut, le navigateur pourra r\u00e9duire de mani\u00e8re significative le temps de chargement, puisque qu\u2019il utilisera une police de caract\u00e8res qui est d\u00e9j\u00e0 dans son syst\u00e8me. <\/p> Une fois que la police de caract\u00e8res web que vous avez choisie \u00e0 l\u2019origine sera enti\u00e8rement charg\u00e9e, elle sera visible pour l\u2019utilisateur. Personne n\u2019aura \u00e0 fixer une page remplie de texte invisible si vous choisissez la solution \u201cflash de texte non stylis\u00e9\u00a0\u00bb<\/a>.<\/p> WP Rocket 3.3.5 propose la compatibilit\u00e9 pour les polices de caract\u00e8re Google <\/strong>en utilisant la propri\u00e9t\u00e9 \u00ab\u00a0swap<\/em>\u00a0\u00bb de la propri\u00e9t\u00e9 font-display :<\/p> Cela signifie que si vous utilisez des polices de caract\u00e8res Google, WP Rocket vous aidera \u00e0 vous occuper de l\u2019effet \u00ab\u00a0flash de texte non stylis\u00e9\u00a0\u00bb.<\/p> Pour en apprendre plus sur l\u2019optimisation des polices de caract\u00e8res web, vous pouvez lire notre guide<\/a>.<\/p> Ces recommandations concernent l\u2019utilisation de scripts JS et leur impact sur les performances de temps de chargement de vos pages. <\/p> L\u2019utilisation de JS a un prix pour votre site : une fois charg\u00e9, il doit \u00eatre \u201clu\u201d et \u201ccompris\u201d par le navigateur (parcouru et compil\u00e9) puis \u00eatre ex\u00e9cut\u00e9 dans le navigateur. Plus il y a de JS sur votre page, plus il faudra de temps au navigateur pour le parcourir, compiler et l\u2019ex\u00e9cuter.<\/p> D\u2019apr\u00e8s la note sur \u201cMinimiser le travail de la trame principale<\/em>\u201c, voici comment PageSpeed le d\u00e9finit :<\/p> Essayez de r\u00e9duire le temps pass\u00e9 \u00e0 parcourir, compiler et ex\u00e9cuter le JS. D\u00e9livrer des charges JS plus petites devrait vous aider. <\/em><\/p> Pour r\u00e9duire le temps d\u2019ex\u00e9cution de JS et minimiser le travail de la trame principale, vous devez retirer le JS qui n\u2019est pas n\u00e9cessaire sur votre page<\/strong> en d\u00e9sactivant le le chargement des fichiers JS des plugins et des th\u00e8mes sur la page. <\/p> Vous pouvez utiliser des plugins sp\u00e9cifiques pour vous aider \u00e0 retirer le JS inutile de vos pages, comme : <\/p> Utilisez les avec pr\u00e9caution et parlez-en au d\u00e9veloppeur ou consultez la documentation avant de les utiliser. <\/p> Une politique de mise en cache est l\u2019ensemble des \u00e9tapes qui sont mises en place pour faire en sorte que vos pages sont mises en cache et chargent rapidement. Ici, PageSpeed vous recommande de r\u00e9duire le nombre de requ\u00eates r\u00e9seaux. <\/p> Les requ\u00eates r\u00e9seau ont un impact important sur les vitesses de chargement des pages, mais elles affectent \u00e9galement l\u2019exp\u00e9rience utilisateur, le taux de rebond et le SEO.<\/p> Pour r\u00e9gler cet avertissement et r\u00e9duire la quantit\u00e9 de requ\u00eates HTTP sur votre site, vous pouvez suivre notre guide.<\/a><\/p> Les \u00e9l\u00e9ments DOM sont tous les tags sur une page (comme DIV, HTML, BODY, etc.).<\/p>Recommandations PageSpeed Insights : Opportunit\u00e9s<\/h2>
<\/p>![\"Opportunities](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Opportunities-tab-PageSpeed-Insights-1.png\")
Eliminer les ressources qui bloquent le rendu <\/h3>
La plupart des th\u00e8mes WordPress et des plugins chargent non pas un, mais de nombreux fichiers CSS et\/ou JavaScript. On comprend donc pourquoi ce processus peut vraiment allonger le temps de premier affichage d\u2019une page.\u201d<\/em><\/p>![\"Optimize](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/optimize-css-delivery.png\")
<\/figure>![\"Load](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Load-JavaScript-Deferred.jpg\")
<\/figure>Supprimer les ressources CSS inutilis\u00e9es<\/strong><\/h3>
Alors, comment supprimer les ressources CSS inutilis\u00e9es ?<\/h4>
R\u00e9duire le temps de r\u00e9ponse serveur (TTFB)<\/h3>
Minifier le CSS et minifier le JavaScript<\/h3>
<\/p>![\"Minimize](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/css-file-optimization-by-wprocket.png\")
<\/p>![\"Minify](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/minify_combine_js-1024x357.jpg\")
Cela d\u00e9pend toujours du code du th\u00e8mes et des autres extensions que vous utilisez : certains fichiers JS et CSS peuvent \u00eatre incompatibles avec la minification. Gardez donc l\u2019oeil ouvert lorsque vous mettez cette technique en place. <\/p>Nombreuses redirections de pages <\/h3>
Mettre en place la compression de texte<\/h3>
Pr\u00e9-connexion aux origines de requ\u00eates<\/h3>
<\/strong>Voici une d\u00e9finition extraite de notre guide sur les diff\u00e9rences entre preload, prefetch, et preconnect<\/a>:<\/p>![\"Prefetch](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/prefetch-DNS-requests-1024x430.png\")
<\/figure>Pr\u00e9-charger les requ\u00eates cl\u00e9s<\/h3>
Il est utile de donner la priorit\u00e9 au CRP avant d\u2019autres ressources, et de d\u00e9cider de leur ordre de chargement. <\/p>Diff\u00e9rer le chargement des images hors-\u00e9cran<\/h3>
Vous pouvez appliquer manuellement le LazyLoad sur vos fichiers images<\/a>, ou bien utiliser un plugin qui le fait pour vous. <\/p>![\"Free](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/LazyLoad-WP-Rocket-Plugin.png\")
<\/figure>![\"Enable](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Enable-LazyLoad-on-WP-Rocket-Media-Tab.png\")
Donner aux images la dimension ad\u00e9quate <\/h3>
Vous pourrez voir une \u00e9norme am\u00e9lioration dans la vitesse de chargement des pages, et Google PageSpeed le remarquera et vous r\u00e9compensera pour ce changement ! <\/p>Encoder efficacement et optimiser les images<\/h3>
Pour optimiser les images, on utilise un ensemble de mesures qui font en sorte que les images chargent plus vite, telles que :<\/p>Servir les images au format next-gen<\/h3>
PageSpeed Insights recommendations: Diagnostics<\/h2>
![\"Diagnostics](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Diagnostics-PageSpeed-Insights-1.png\")
Faire en sorte que le texte reste visible pendant le chargement de polices web<\/h3>
![\"Combine](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Combine-Google-Fonts-Files.png\")
Minimiser le travail de la trame principale et r\u00e9duire le temps d\u2019ex\u00e9cution de JavaScript<\/h4>
Servir les ressources statiques avec une m\u00e9thode de mise en cache efficace<\/h3>
Comme nous l\u2019avons d\u00e9j\u00e0 vu dans notre guide sur le temps de chargement et la mise en cache<\/a>, il y a plusieurs couches de cache disponibles que vous pouvez contr\u00f4ler et appliquer d\u00e8s que possible \u00e0 votre site, comme la mise en cache de page, la mise en cache c\u00f4t\u00e9 serveur, la mise en cache d\u2019objet et la mise en cache navigateur.
Lorsque Google PageSpeed vous demande de servir les ressources statiques avec une politique de mise en cache efficace, il fait r\u00e9f\u00e9rence \u00e0 la mise en cache navigateur.
Pour apprendre comment vous occuper de cet avertissement, vous pouvez lire notre guide sur comment r\u00e9soudre l\u2019avertissement de static cache de PageSpeed<\/a>.
Si vous utilisez WP Rocket, vous n\u2019avez pas \u00e0 vous soucier de \u00e7a, puisque notre plugin applique automatiquement les en-t\u00eates Expire<\/em> n\u00e9cessaires dans le fichier htaccess<\/strong>.
Si vous utilisez un serveur NGINX, vous n\u2019aurez pas le fichier htaccess et les en-t\u00eates mentionn\u00e9s ci-dessus ne seront pas appliqu\u00e9s. Cependant, WP Rocket est pr\u00eat \u00e0 l\u2019emploi sur les serveurs NGINX. Apprenez-en plus \u00e0 ce sujet ici<\/a>.<\/p>\u00c9viter les \u00e9normes charges r\u00e9seau<\/h3>
Eviter une taille excessive du DOM<\/h3>