Vue d’ensemble
\nPagespeed Insight<\/h2><\/span><\/div><\/div><\/div>Aujourd’hui, la performance d’un site web est essentielle pour le positionnement organique dans le Serp de Google, et cette tendance est encore plus corrobor\u00e9e par les nouvelles Vitales Web de base qui sont devenues un facteur de classement \u00e0 partir de mai 2021.<\/p>\n
L’onglet \u00ab\u00a0PageSpeed\u00a0\u00bb de Seo Spider vous permet de collecter des donn\u00e9es \u00e0 partir de deux sources :<\/p>\n
\n- PageSpeed Insights<\/strong>, qui utilise Lighthouse pour v\u00e9rifier la vitesse des pages web \u00e0 l’aide de \u00ab\u00a0donn\u00e9es de laboratoire\u00a0\u00bb ;<\/li>\n
- Chrome User Experience Report<\/strong> (CrUX, ou \u00ab\u00a0donn\u00e9es de terrain\u00a0\u00bb) qui vous permet d’obtenir des donn\u00e9es de navigation r\u00e9elles.<\/li>\n<\/ul>\n
Pour alimenter les donn\u00e9es de l’onglet \u00ab\u00a0PageSpeed\u00a0\u00bb, l’API PSI doit \u00eatre connect\u00e9e.<\/p>\n<\/div><\/div><\/div><\/div><\/div>
> > Configuration API PageSpeed Insights<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/span>Les mesures<\/h3><\/span><\/div><\/div><\/div>Dans l’onglet Pagespeed, vous disposez de plusieurs mesures g\u00e9n\u00e9riques :<\/p>\n
\n- \u00c9conomies totales de taille.<\/li>\n
- Gain de temps total.<\/li>\n
- Total des demandes.<\/li>\n
- Taille totale de la page.<\/li>\n
- HTML Taille.<\/li>\n
- Compte HTML.<\/li>\n
- Taille de l’image.<\/li>\n
- Nombre d’images.<\/li>\n
- CSS Taille.<\/li>\n
- Compte CSS.<\/li>\n
- JavaScript Taille.<\/li>\n
- Compte JavaScript.<\/li>\n
- Taille de la police.<\/li>\n
- Nombre de polices.<\/li>\n
- Taille du support.<\/li>\n
- Nombre de m\u00e9dias.<\/li>\n
- Autre taille.<\/li>\n
- Autre compte.<\/li>\n
- Tiers Taille.<\/li>\n
- Compte de tiers.<\/li>\n<\/ul>\n
Les mesures plus sp\u00e9cifiques disponibles sont r\u00e9parties entre \u00ab\u00a0CrUX Metrics\u00a0\u00bb, qui correspond aux donn\u00e9es de Chrome sur le terrain, et \u00ab\u00a0Lighthouse Metrix\u00a0\u00bb, qui contient les donn\u00e9es de laboratoire publi\u00e9es par PageSpeed Insight.<\/p>\n<\/div>
<\/div><\/div><\/span>CrUX Metrics<\/h3><\/span><\/div><\/div><\/div>\n- CrUX Performance.<\/li>\n
- CrUX First Contentful Paint Time (sec).<\/li>\n
- CrUX First Contentful Paint Cat\u00e9gorie.<\/li>\n
- CrUX First Input Delay Time (sec).<\/li>\n
- CrUX First Input Delay Cat\u00e9gorie.<\/li>\n
- CrUX Origin Performance.<\/li>\n
- CrUX Origin First Contentful Paint Time (sec).<\/li>\n
- CrUX Origin First Contentful Paint Cat\u00e9gorie.<\/li>\n
- CrUX Origin First Input Delay Time (sec).<\/li>\n
- CrUX Origin First Input Delay Category.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Lighthouse Metrics<\/h3><\/span><\/div><\/div><\/div>\n- Score de performance.<\/li>\n
- Temps d’acc\u00e8s au premier octet (ms).<\/li>\n
- Premier temps de peinture du contenu (sec).<\/li>\n
- Vitesse Index Temps (sec).<\/li>\n
- Temps d’interactivit\u00e9 (sec).<\/li>\n
- Premi\u00e8re note de peinture de contenu.<\/li>\n
- Premier temps de peinture significatif (sec).<\/li>\n
- Premier score significatif en peinture.<\/li>\n
- Score de l’indice de vitesse.<\/li>\n
- Estimation de la latence d’entr\u00e9e (ms).<\/li>\n
- Score de latence d’entr\u00e9e estim\u00e9.<\/li>\n
- Premi\u00e8re p\u00e9riode d’inactivit\u00e9 de l’unit\u00e9 centrale (sec).<\/li>\n
- Premier score d’inactivit\u00e9 de l’unit\u00e9 centrale.<\/li>\n
- Temps n\u00e9cessaire pour obtenir un score interactif.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Filtres Pagespeed<\/h3><\/span><\/div><\/div><\/div>En plus des mesures, l’onglet comprend les filtres suivants :<\/p>\n
\n- Supprimer les<\/strong> ressources bloquant le rendu<\/strong>: toutes les pages dont les ressources bloquent la \u00ab\u00a0premi\u00e8re peinture\u00a0\u00bb de la page sont affich\u00e9es, ainsi que les \u00e9conomies potentielles.<\/li>\n
- Images de taille correcte<\/strong>: le filtre met en \u00e9vidence toutes les pages qui contiennent des images de taille incorrecte et souligne les \u00e9conomies potentielles si elles sont corrig\u00e9es.<\/li>\n<\/ul>\n<\/div>
![\"Web](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/pagespeed_size_images.png\" "\\"Pagespeed")
<\/span><\/div>Id\u00e9alement, votre page web ne devrait pas afficher d’images plus grandes que la version affich\u00e9e sur l’\u00e9cran de l’utilisateur. La strat\u00e9gie la plus appropri\u00e9e est de servir des \u00ab\u00a0images r\u00e9actives\u00a0\u00bb en g\u00e9n\u00e9rant plusieurs versions et en sp\u00e9cifiant lesquelles utiliser dans votre code HTML ou CSS via des requ\u00eates m\u00e9dia, la taille de la fen\u00eatre, etc.<\/p>\n
D’autres solutions peuvent \u00eatre l’utilisation de CDN d’images ou l’utilisation de formats d’images vectorielles SVG pour s’adapter \u00e0 n’importe quelle taille, par exemple pour les ic\u00f4nes.<\/p>\n
\n- Diff\u00e9rer les images hors \u00e9cran<\/strong>: identifie toutes les pages qui contiennent des images cach\u00e9es ou hors \u00e9cran, ainsi que les \u00e9conomies potentielles. Pour r\u00e9soudre ce probl\u00e8me, vous pouvez envisager de charger ces images paresseusement apr\u00e8s les ressources critiques afin de r\u00e9duire l’indice \u00ab\u00a0Time to Interactive\u00a0\u00bb.<\/li>\n
- Minify CSS<\/strong>: toutes les pages dont les fichiers CSS n’ont pas \u00e9t\u00e9 minifi\u00e9s, ainsi que les \u00e9conomies potentielles si ces fichiers avaient \u00e9t\u00e9 correctement minifi\u00e9s.<\/li>\n<\/ul>\n<\/div>
![\"Core](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/minifyCss.png\" "\\"Minify")
<\/span><\/div>La minimisation des feuilles de style CSS am\u00e9liore le temps de chargement des pages, car les feuilles de style CSS utilis\u00e9es sont g\u00e9n\u00e9ralement plus volumineuses que ce qui est n\u00e9cessaire. Les fichiers CSS peuvent contenir des caract\u00e8res inutiles, tels que des commentaires, des espaces blancs et des indentations.<\/p>\n
Lorsqu’elles sont mises en ligne, ces polices peuvent \u00eatre supprim\u00e9es en toute s\u00e9curit\u00e9 pour r\u00e9duire la taille du fichier sans affecter la mani\u00e8re dont le navigateur traite les styles. Cette technique est appel\u00e9e minification.<\/p>\n<\/div>
![\"Esempio](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Esempio-minificazioni-css.png\" "\\"Esempio")
<\/span><\/div><\/div><\/div><\/div><\/div>Ce code peut \u00eatre r\u00e9duit en une seule ligne :<\/p>\n<\/div>
![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Minificazione-del-codice-html.png\" "\\"Minificazione")
<\/span><\/div><\/div><\/div><\/div><\/div>\n- Minify JavaScript<\/strong>: affiche toutes les pages dont les fichiers JavaScript n’ont pas \u00e9t\u00e9 minifi\u00e9s, ainsi que les \u00e9conomies potentielles. La minimisation des fichiers JavaScript permet de r\u00e9duire la taille de la charge utile et le temps d’analyse des scripts.
\nLa minification consiste \u00e0 supprimer les espaces blancs et tout code inutile afin de cr\u00e9er un fichier de code plus petit mais parfaitement valide. Par exemple, Terser est un outil de compression JavaScript tr\u00e8s r\u00e9pandu. webpack v4 inclut par d\u00e9faut un plugin pour cette biblioth\u00e8que afin de cr\u00e9er des fichiers de construction minifi\u00e9s.<\/li>\n- Supprimer les<\/strong> feuilles de style CSS inutilis\u00e9es : identifie les pages contenant des feuilles de style CSS inutilis\u00e9es, ainsi que les \u00e9conomies potentielles en octets. Les d\u00e9veloppeurs l’utilisent g\u00e9n\u00e9ralement pour ajouter des feuilles de style \u00e0 une page :<\/li>\n<\/ul>\n<\/div>
![\"file](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Rimozione-CSS-non-utilizzati.png\" "\\"Rimozione")
<\/span><\/div><\/div><\/div><\/div><\/div>Le fichier main.css que le navigateur t\u00e9l\u00e9charge est appel\u00e9 feuille de style externe et est stock\u00e9 s\u00e9par\u00e9ment du code HTML qui l’inclut. Ainsi, chaque fois qu’un navigateur rencontre cette condition, il doit t\u00e9l\u00e9charger, analyser et traiter toutes les feuilles de style externes qu’il rencontre avant de pouvoir afficher un contenu sur l’\u00e9cran de l’utilisateur.<\/p>\n
\n- Encoder efficacement les<\/strong> images : le filtre affiche les pages dont les images ne sont pas optimis\u00e9es, ainsi que les \u00e9conomies potentielles. Lighthouse rassemble toutes les images JPEG ou BMP de la page, r\u00e8gle le niveau de compression de chaque image sur 85, puis compare la version originale avec la version compress\u00e9e. Si l’\u00e9conomie potentielle est de 4 KiB ou plus, Lighthouse marque l’image comme \u00e9tant optimisable.<\/li>\n
- Serve Images in Next-Gen Formats<\/strong>: met en \u00e9vidence les pages dont les images sont servies dans des formats plus anciens tels que jpeg et png. Il est conseill\u00e9 d’utiliser des formats tels que AVIF et WebP, qui pr\u00e9sentent des caract\u00e9ristiques de compression et de qualit\u00e9 sup\u00e9rieures.<\/li>\n
- Activer la<\/strong> compression de texte : toutes les pages contenant des ressources textuelles qui n’ont pas \u00e9t\u00e9 compress\u00e9es, ainsi que les \u00e9conomies potentielles.<\/li>\n
- Pr\u00e9connexion \u00e0 l’origine requise<\/strong>: le filtre identifie toutes les pages qui sont connect\u00e9es \u00e0 d’autres domaines que le v\u00f4tre, mais qui ne donnent pas encore la priorit\u00e9 aux demandes de recherche avec des liens rel=preconnect, ainsi que les \u00e9conomies potentielles. Avant de demander une ressource \u00e0 un serveur, le navigateur doit \u00e9tablir une connexion avec le serveur pour rechercher le nom de domaine et le d\u00e9finir dans une adresse IP, pour \u00e9tablir une connexion avec le serveur et pour crypter la connexion. Au cours de toutes ces \u00e9tapes, le navigateur envoie des donn\u00e9es et re\u00e7oit des r\u00e9ponses du serveur. Ce processus est appel\u00e9 \u00ab\u00a0aller-retour\u00a0\u00bb et, en fonction des conditions du r\u00e9seau, prend du temps, ce qui affecte inexorablement les performances.<\/li>\n<\/ul>\n
Pour optimiser ce processus, vous pouvez utiliser la \u00ab\u00a0pr\u00e9connexion\u00a0\u00bb des ressources externes (connexions \u00e0 d’autres domaines) qui indique au navigateur les ressources auxquelles il doit se connecter en premier lieu parce qu’elles sont consid\u00e9r\u00e9es comme prioritaires.<\/p>\n<\/div>
![\"preconnect](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Risorse-in-Preconnect.png\" "\\"Risorse")
<\/span><\/div><\/div><\/div><\/div><\/div>Un exemple d’application de \u00ab\u00a0preconnect\u00a0\u00bb pourrait \u00eatre pour Google Tag Manager ou Google Analytics.<\/p>\n<\/div>
![\"preconnect](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Preconnect-Google-Tag-Manager.png\" "\\"Preconnect")
<\/span><\/div><\/div><\/div><\/div><\/div>Les \u00ab\u00a0demandes de cha\u00eene critique\u00a0\u00bb correspondent \u00e0 une s\u00e9rie de demandes de r\u00e9seau d\u00e9pendantes et importantes pour le rendu correct du document html.<\/p>\n
\n- R\u00e9duire les temps de r\u00e9ponse du serveur (TTFB<\/strong>) : la vitesse de chargement est essentielle pour une bonne exp\u00e9rience utilisateur et les utilisateurs y sont tr\u00e8s sensibles. Le taux d’abandon d’un site qui met plusieurs secondes \u00e0 se charger est directement proportionnel. L’une des causes les plus courantes est li\u00e9e \u00e0 la lenteur du serveur \u00e0 renvoyer le contenu de la page au navigateur. Ce filtre identifie toutes les pages pour lesquelles le navigateur a d\u00fb attendre plus de 600 ms la r\u00e9ponse du serveur dans la requ\u00eate principale du document.<\/li>\n
- \u00c9viter les redirections multiples<\/strong>: affiche les pages qui comportent des ressources de redirection et les \u00e9conomies potentielles r\u00e9alis\u00e9es en utilisant l’URL directe. Les redirections ralentissent la vitesse de chargement des pages. Lorsqu’un navigateur demande une ressource qui a \u00e9t\u00e9 redirig\u00e9e, le serveur renvoie g\u00e9n\u00e9ralement une r\u00e9ponse HTTP comme celle-ci :<\/li>\n<\/ul>\n<\/div>
![\"codice](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Risposta-Http.png\" "\\"Risposta")
<\/span><\/div>et le navigateur est oblig\u00e9 de faire une autre demande HTTP pour r\u00e9cup\u00e9rer la ressource au nouvel emplacement. Cette consid\u00e9ration n’a pas pour but de proscrire l’utilisation de 3xx mais lors de la cr\u00e9ation de cha\u00eenes de redirections ou de redirections multiples sur la m\u00eame page.
\nLes redirections vers les ressources n\u00e9cessaires au \u00ab\u00a0chemin de rendu critique\u00a0\u00bb doivent toujours \u00eatre \u00e9vit\u00e9es.<\/p>\n
\n- Preload Key Requests<\/strong>: identifie les pages html contenant des \u00e9l\u00e9ments susceptibles d’\u00eatre trait\u00e9s par \u00ab\u00a0preload\u00a0\u00bb.
\nLorsqu’une page est demand\u00e9e, le navigateur demande la page html au serveur en analysant le contenu et en envoyant des demandes distinctes pour chaque ressource de r\u00e9f\u00e9rence incluse dans le document. Pour am\u00e9liorer les performances, il est recommand\u00e9 d’acc\u00e9l\u00e9rer ce processus en demandant \u00e0 l’avance les ressources critiques.
\nUn exemple d’application pourrait \u00eatre la demande d’une police de caract\u00e8res dans un fichier CSS, puisque le navigateur ne la d\u00e9couvrirait qu’apr\u00e8s avoir lu la feuille de style. En utilisant la fonction \u00ab\u00a0Preload\u00a0\u00bb, vous allez pr\u00e9charger et r\u00e9cup\u00e9rer une ressource que le navigateur ne prendrait en compte qu’\u00e0 un stade ult\u00e9rieur, par exemple dans les demandes de cha\u00eene critique.
\nRappelez-vous que le navigateur met en cache la ressource en \u00ab\u00a0pr\u00e9chargement\u00a0\u00bb sans ex\u00e9cuter les scripts mais, les ayant d\u00e9j\u00e0 pris en compte, les servira imm\u00e9diatement une fois qu’ils auront \u00e9t\u00e9 demand\u00e9s.
\nCette fonctionnalit\u00e9 convient parfaitement aux d\u00e9pendances telles que JS, les polices de caract\u00e8res et CSS.<\/li>\n<\/ul>\nCette fonctionnalit\u00e9 est une directive permettant au navigateur de ne pas bloquer le chargement du document html. <> <> Pour mettre en \u0153uvre la directive \u00ab\u00a0Preload\u00a0\u00bb, il suffit d’ajouter la balise link dans la section head du fichier html ou d’utiliser l’en-t\u00eate HTTP Link.<\/p>\n<\/div>
![\"gestione](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Intestazioni-http-e-header.png\" "\\"Intestazioni")
<\/span><\/div>\n- Utiliser le format vid\u00e9o pour les images anim\u00e9es<\/strong>: identifie les pages contenant des GIF anim\u00e9s, ainsi que les \u00e9conomies potentielles si elles sont converties en vid\u00e9o.<\/li>\n
- \u00c9viter la taille excessive du DOM :<\/strong> identifie toutes les pages dont la taille du DOM d\u00e9passe les 1 500 n\u0153uds totaux recommand\u00e9s. La prise en compte des DOM est d’une importance vitale car elle peut nuire \u00e0 la performance et \u00e0 l’efficacit\u00e9 de plusieurs mani\u00e8res :\n
\n- le DOM comprend souvent de nombreux n\u0153uds qui ne sont pas visibles par l’utilisateur lorsque la page est charg\u00e9e pour la premi\u00e8re fois ; cette situation augmente inutilement le volume de donn\u00e9es \u00e0 servir aux utilisateurs et ralentit le temps de chargement (performance de chargement).<\/li>\n
- Au cours de la navigation, les utilisateurs et les scripts ont de nombreuses interactions avec la page web qui am\u00e8nent le navigateur \u00e0 r\u00e9organiser la position et le style des n\u0153uds dans le DOM, ce qui ralentit le rendu (performances d’ex\u00e9cution).<\/li>\n
- Si JavaScript utilise des s\u00e9lecteurs de requ\u00eate g\u00e9n\u00e9raux tels que document.querySelectorAll(‘li’), il peut, \u00e0 son insu, stocker des r\u00e9f\u00e9rences \u00e0 un tr\u00e8s grand nombre de n\u0153uds, ce qui peut surcharger les capacit\u00e9s de m\u00e9moire des appareils des utilisateurs (performances de la m\u00e9moire).<\/li>\n<\/ul>\n<\/li>\n
- R\u00e9duire le<\/strong> temps d’ex\u00e9cution du JavaScript<\/strong>: filtrez les pages de rapport dont le temps d’ex\u00e9cution du JavaScript est moyen ou lent. Lorsqu’une page html prend beaucoup de temps pour ex\u00e9cuter des scripts JavaScript, cela ralentit les performances :\n
\n- l’augmentation du co\u00fbt du r\u00e9seau : l’utilisation d’un plus grand nombre d’octets augmente le temps de t\u00e9l\u00e9chargement.<\/li>\n
- Le javascript est analys\u00e9 et compil\u00e9 dans le fil principal, qui ne reste pas disponible pour l’interaction avec l’utilisateur.<\/li>\n
- L’occupation du fil Javascript principal retarde \u00e9galement le TTI (Time to Interactive), ce qui p\u00e9nalise l’Ux de la page et les vitales d\u00e9di\u00e9es au web.<\/li>\n
- Si le Javascript contient de nombreuses r\u00e9f\u00e9rences, il peut inexorablement consommer beaucoup de m\u00e9moire, p\u00e9nalisant la consultation de la page par l’utilisateur.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Pour am\u00e9liorer les performances de l’ex\u00e9cution du Javascript, il est g\u00e9n\u00e9ralement recommand\u00e9 de \u00ab\u00a0minifier\u00a0\u00bb et de compresser le code, de supprimer le code inutilis\u00e9 et de le mettre en cache.<\/p>\n
\n- Serve Static Assets With An Efficient Cache Policy<\/strong>: renvoie toutes les pages contenant des ressources qui ne sont pas \u00ab\u00a0mises en cache\u00a0\u00bb, ainsi que les \u00e9conomies potentielles. Lorsqu’un navigateur demande une ressource, le serveur qui la fournit peut lui indiquer la dur\u00e9e pendant laquelle il doit la stocker temporairement ou la mettre en cache. Pour chaque demande ult\u00e9rieure de cette ressource, le navigateur utilise sa copie locale au lieu de l’obtenir du r\u00e9seau. Les \u00e9valuations de Lighthouse prennent en compte les polices, les m\u00e9dias, les images ou les feuilles de style qui r\u00e9pondent par le code d’\u00e9tat 2xx et qui n’ont pas explicitement d\u00e9clar\u00e9 une \u00ab\u00a0politique de non-cache\u00a0\u00bb.<\/li>\n<\/ul>\n
Voici un exemple de mise en cache via l’en-t\u00eate HTTP :<\/p>\n<\/div>
![\"codice](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Cache-Control.png\" "\\"Cache")
<\/span><\/div>La directive \u00ab\u00a0max-age\u00a0\u00bb indique au navigateur combien de temps une ressource doit rester dans le cache. Pour les \u00ab\u00a0biens statiques\u00a0\u00bb, un d\u00e9lai d’au moins un an est recommand\u00e9.<\/p>\n
\n- Minimiser le travail du thread principal<\/strong>: identifie toutes les pages dont le temps d’ex\u00e9cution sur le thread principal est moyen ou lent, ce qui p\u00e9nalise le rendu du document html. Le processus de rendu du navigateur transforme votre code en une page web avec laquelle les utilisateurs peuvent interagir. Par d\u00e9faut, le fil principal du processus de rendu g\u00e8re la majeure partie du code : il analyse le HTML et construit le DOM, il analyse le CSS et applique les styles sp\u00e9cifi\u00e9s, et il analyse, \u00e9value et ex\u00e9cute le JavaScript.<\/li>\n<\/ul>\n
Le fil principal traite \u00e9galement les \u00e9v\u00e9nements de l’utilisateur. Ainsi, lorsque le fil principal est occup\u00e9 \u00e0 faire autre chose, la page web peut ne pas r\u00e9pondre aux interactions de l’utilisateur, ce qui entra\u00eene une mauvaise exp\u00e9rience. Pour am\u00e9liorer ce processus, nous vous recommandons d’optimiser le javascript des tiers, de supprimer le code inutilis\u00e9, de r\u00e9duire les r\u00e9f\u00e9rences CSS et de les simplifier (minification), de reporter les CSS non critiques et de diviser les charges utiles du javascript.<\/p>\n
\n- Veiller \u00e0 ce que le texte reste visible pendant le chargement des<\/strong> polices : toutes les pages contenant des polices susceptibles de clignoter ou de devenir invisibles pendant le chargement des ressources.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div>
Aujourd’hui, la performance d’un site web est essentielle pour le positionnement organique dans le Serp de Google, et cette tendance est encore plus corrobor\u00e9e par les nouvelles Vitales Web de base qui sont devenues un facteur de classement \u00e0 partir de mai 2021.<\/p>\n
L’onglet \u00ab\u00a0PageSpeed\u00a0\u00bb de Seo Spider vous permet de collecter des donn\u00e9es \u00e0 partir de deux sources :<\/p>\n
- \n
- PageSpeed Insights<\/strong>, qui utilise Lighthouse pour v\u00e9rifier la vitesse des pages web \u00e0 l’aide de \u00ab\u00a0donn\u00e9es de laboratoire\u00a0\u00bb ;<\/li>\n
- Chrome User Experience Report<\/strong> (CrUX, ou \u00ab\u00a0donn\u00e9es de terrain\u00a0\u00bb) qui vous permet d’obtenir des donn\u00e9es de navigation r\u00e9elles.<\/li>\n<\/ul>\n
Pour alimenter les donn\u00e9es de l’onglet \u00ab\u00a0PageSpeed\u00a0\u00bb, l’API PSI doit \u00eatre connect\u00e9e.<\/p>\n<\/div><\/div><\/div><\/div><\/div>
> > Configuration API PageSpeed Insights<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/span>Les mesures<\/h3><\/span>
<\/div><\/div><\/div>Dans l’onglet Pagespeed, vous disposez de plusieurs mesures g\u00e9n\u00e9riques :<\/p>\n
- \n
- \u00c9conomies totales de taille.<\/li>\n
- Gain de temps total.<\/li>\n
- Total des demandes.<\/li>\n
- Taille totale de la page.<\/li>\n
- HTML Taille.<\/li>\n
- Compte HTML.<\/li>\n
- Taille de l’image.<\/li>\n
- Nombre d’images.<\/li>\n
- CSS Taille.<\/li>\n
- Compte CSS.<\/li>\n
- JavaScript Taille.<\/li>\n
- Compte JavaScript.<\/li>\n
- Taille de la police.<\/li>\n
- Nombre de polices.<\/li>\n
- Taille du support.<\/li>\n
- Nombre de m\u00e9dias.<\/li>\n
- Autre taille.<\/li>\n
- Autre compte.<\/li>\n
- Tiers Taille.<\/li>\n
- Compte de tiers.<\/li>\n<\/ul>\n
Les mesures plus sp\u00e9cifiques disponibles sont r\u00e9parties entre \u00ab\u00a0CrUX Metrics\u00a0\u00bb, qui correspond aux donn\u00e9es de Chrome sur le terrain, et \u00ab\u00a0Lighthouse Metrix\u00a0\u00bb, qui contient les donn\u00e9es de laboratoire publi\u00e9es par PageSpeed Insight.<\/p>\n<\/div>
<\/div><\/div><\/span>CrUX Metrics<\/h3><\/span>
<\/div><\/div><\/div>- \n
- CrUX Performance.<\/li>\n
- CrUX First Contentful Paint Time (sec).<\/li>\n
- CrUX First Contentful Paint Cat\u00e9gorie.<\/li>\n
- CrUX First Input Delay Time (sec).<\/li>\n
- CrUX First Input Delay Cat\u00e9gorie.<\/li>\n
- CrUX Origin Performance.<\/li>\n
- CrUX Origin First Contentful Paint Time (sec).<\/li>\n
- CrUX Origin First Contentful Paint Cat\u00e9gorie.<\/li>\n
- CrUX Origin First Input Delay Time (sec).<\/li>\n
- CrUX Origin First Input Delay Category.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Lighthouse Metrics<\/h3><\/span>
<\/div><\/div><\/div>- \n
- Score de performance.<\/li>\n
- Temps d’acc\u00e8s au premier octet (ms).<\/li>\n
- Premier temps de peinture du contenu (sec).<\/li>\n
- Vitesse Index Temps (sec).<\/li>\n
- Temps d’interactivit\u00e9 (sec).<\/li>\n
- Premi\u00e8re note de peinture de contenu.<\/li>\n
- Premier temps de peinture significatif (sec).<\/li>\n
- Premier score significatif en peinture.<\/li>\n
- Score de l’indice de vitesse.<\/li>\n
- Estimation de la latence d’entr\u00e9e (ms).<\/li>\n
- Score de latence d’entr\u00e9e estim\u00e9.<\/li>\n
- Premi\u00e8re p\u00e9riode d’inactivit\u00e9 de l’unit\u00e9 centrale (sec).<\/li>\n
- Premier score d’inactivit\u00e9 de l’unit\u00e9 centrale.<\/li>\n
- Temps n\u00e9cessaire pour obtenir un score interactif.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/span>
Filtres Pagespeed<\/h3><\/span>
<\/div><\/div><\/div>En plus des mesures, l’onglet comprend les filtres suivants :<\/p>\n
- \n
- Supprimer les<\/strong> ressources bloquant le rendu<\/strong>: toutes les pages dont les ressources bloquent la \u00ab\u00a0premi\u00e8re peinture\u00a0\u00bb de la page sont affich\u00e9es, ainsi que les \u00e9conomies potentielles.<\/li>\n
- Images de taille correcte<\/strong>: le filtre met en \u00e9vidence toutes les pages qui contiennent des images de taille incorrecte et souligne les \u00e9conomies potentielles si elles sont corrig\u00e9es.<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>Id\u00e9alement, votre page web ne devrait pas afficher d’images plus grandes que la version affich\u00e9e sur l’\u00e9cran de l’utilisateur. La strat\u00e9gie la plus appropri\u00e9e est de servir des \u00ab\u00a0images r\u00e9actives\u00a0\u00bb en g\u00e9n\u00e9rant plusieurs versions et en sp\u00e9cifiant lesquelles utiliser dans votre code HTML ou CSS via des requ\u00eates m\u00e9dia, la taille de la fen\u00eatre, etc.<\/p>\n
D’autres solutions peuvent \u00eatre l’utilisation de CDN d’images ou l’utilisation de formats d’images vectorielles SVG pour s’adapter \u00e0 n’importe quelle taille, par exemple pour les ic\u00f4nes.<\/p>\n
- \n
- Diff\u00e9rer les images hors \u00e9cran<\/strong>: identifie toutes les pages qui contiennent des images cach\u00e9es ou hors \u00e9cran, ainsi que les \u00e9conomies potentielles. Pour r\u00e9soudre ce probl\u00e8me, vous pouvez envisager de charger ces images paresseusement apr\u00e8s les ressources critiques afin de r\u00e9duire l’indice \u00ab\u00a0Time to Interactive\u00a0\u00bb.<\/li>\n
- Minify CSS<\/strong>: toutes les pages dont les fichiers CSS n’ont pas \u00e9t\u00e9 minifi\u00e9s, ainsi que les \u00e9conomies potentielles si ces fichiers avaient \u00e9t\u00e9 correctement minifi\u00e9s.<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>La minimisation des feuilles de style CSS am\u00e9liore le temps de chargement des pages, car les feuilles de style CSS utilis\u00e9es sont g\u00e9n\u00e9ralement plus volumineuses que ce qui est n\u00e9cessaire. Les fichiers CSS peuvent contenir des caract\u00e8res inutiles, tels que des commentaires, des espaces blancs et des indentations.<\/p>\n
Lorsqu’elles sont mises en ligne, ces polices peuvent \u00eatre supprim\u00e9es en toute s\u00e9curit\u00e9 pour r\u00e9duire la taille du fichier sans affecter la mani\u00e8re dont le navigateur traite les styles. Cette technique est appel\u00e9e minification.<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Ce code peut \u00eatre r\u00e9duit en une seule ligne :<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>- \n
- Minify JavaScript<\/strong>: affiche toutes les pages dont les fichiers JavaScript n’ont pas \u00e9t\u00e9 minifi\u00e9s, ainsi que les \u00e9conomies potentielles. La minimisation des fichiers JavaScript permet de r\u00e9duire la taille de la charge utile et le temps d’analyse des scripts.
\nLa minification consiste \u00e0 supprimer les espaces blancs et tout code inutile afin de cr\u00e9er un fichier de code plus petit mais parfaitement valide. Par exemple, Terser est un outil de compression JavaScript tr\u00e8s r\u00e9pandu. webpack v4 inclut par d\u00e9faut un plugin pour cette biblioth\u00e8que afin de cr\u00e9er des fichiers de construction minifi\u00e9s.<\/li>\n- Supprimer les<\/strong> feuilles de style CSS inutilis\u00e9es : identifie les pages contenant des feuilles de style CSS inutilis\u00e9es, ainsi que les \u00e9conomies potentielles en octets. Les d\u00e9veloppeurs l’utilisent g\u00e9n\u00e9ralement pour ajouter des feuilles de style \u00e0 une page :<\/li>\n<\/ul>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Le fichier main.css que le navigateur t\u00e9l\u00e9charge est appel\u00e9 feuille de style externe et est stock\u00e9 s\u00e9par\u00e9ment du code HTML qui l’inclut. Ainsi, chaque fois qu’un navigateur rencontre cette condition, il doit t\u00e9l\u00e9charger, analyser et traiter toutes les feuilles de style externes qu’il rencontre avant de pouvoir afficher un contenu sur l’\u00e9cran de l’utilisateur.<\/p>\n
- \n
- Encoder efficacement les<\/strong> images : le filtre affiche les pages dont les images ne sont pas optimis\u00e9es, ainsi que les \u00e9conomies potentielles. Lighthouse rassemble toutes les images JPEG ou BMP de la page, r\u00e8gle le niveau de compression de chaque image sur 85, puis compare la version originale avec la version compress\u00e9e. Si l’\u00e9conomie potentielle est de 4 KiB ou plus, Lighthouse marque l’image comme \u00e9tant optimisable.<\/li>\n
- Serve Images in Next-Gen Formats<\/strong>: met en \u00e9vidence les pages dont les images sont servies dans des formats plus anciens tels que jpeg et png. Il est conseill\u00e9 d’utiliser des formats tels que AVIF et WebP, qui pr\u00e9sentent des caract\u00e9ristiques de compression et de qualit\u00e9 sup\u00e9rieures.<\/li>\n
- Activer la<\/strong> compression de texte : toutes les pages contenant des ressources textuelles qui n’ont pas \u00e9t\u00e9 compress\u00e9es, ainsi que les \u00e9conomies potentielles.<\/li>\n
- Pr\u00e9connexion \u00e0 l’origine requise<\/strong>: le filtre identifie toutes les pages qui sont connect\u00e9es \u00e0 d’autres domaines que le v\u00f4tre, mais qui ne donnent pas encore la priorit\u00e9 aux demandes de recherche avec des liens rel=preconnect, ainsi que les \u00e9conomies potentielles. Avant de demander une ressource \u00e0 un serveur, le navigateur doit \u00e9tablir une connexion avec le serveur pour rechercher le nom de domaine et le d\u00e9finir dans une adresse IP, pour \u00e9tablir une connexion avec le serveur et pour crypter la connexion. Au cours de toutes ces \u00e9tapes, le navigateur envoie des donn\u00e9es et re\u00e7oit des r\u00e9ponses du serveur. Ce processus est appel\u00e9 \u00ab\u00a0aller-retour\u00a0\u00bb et, en fonction des conditions du r\u00e9seau, prend du temps, ce qui affecte inexorablement les performances.<\/li>\n<\/ul>\n
Pour optimiser ce processus, vous pouvez utiliser la \u00ab\u00a0pr\u00e9connexion\u00a0\u00bb des ressources externes (connexions \u00e0 d’autres domaines) qui indique au navigateur les ressources auxquelles il doit se connecter en premier lieu parce qu’elles sont consid\u00e9r\u00e9es comme prioritaires.<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Un exemple d’application de \u00ab\u00a0preconnect\u00a0\u00bb pourrait \u00eatre pour Google Tag Manager ou Google Analytics.<\/p>\n<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>Les \u00ab\u00a0demandes de cha\u00eene critique\u00a0\u00bb correspondent \u00e0 une s\u00e9rie de demandes de r\u00e9seau d\u00e9pendantes et importantes pour le rendu correct du document html.<\/p>\n
- \n
- R\u00e9duire les temps de r\u00e9ponse du serveur (TTFB<\/strong>) : la vitesse de chargement est essentielle pour une bonne exp\u00e9rience utilisateur et les utilisateurs y sont tr\u00e8s sensibles. Le taux d’abandon d’un site qui met plusieurs secondes \u00e0 se charger est directement proportionnel. L’une des causes les plus courantes est li\u00e9e \u00e0 la lenteur du serveur \u00e0 renvoyer le contenu de la page au navigateur. Ce filtre identifie toutes les pages pour lesquelles le navigateur a d\u00fb attendre plus de 600 ms la r\u00e9ponse du serveur dans la requ\u00eate principale du document.<\/li>\n
- \u00c9viter les redirections multiples<\/strong>: affiche les pages qui comportent des ressources de redirection et les \u00e9conomies potentielles r\u00e9alis\u00e9es en utilisant l’URL directe. Les redirections ralentissent la vitesse de chargement des pages. Lorsqu’un navigateur demande une ressource qui a \u00e9t\u00e9 redirig\u00e9e, le serveur renvoie g\u00e9n\u00e9ralement une r\u00e9ponse HTTP comme celle-ci :<\/li>\n<\/ul>\n<\/div>
<\/span><\/div>et le navigateur est oblig\u00e9 de faire une autre demande HTTP pour r\u00e9cup\u00e9rer la ressource au nouvel emplacement. Cette consid\u00e9ration n’a pas pour but de proscrire l’utilisation de 3xx mais lors de la cr\u00e9ation de cha\u00eenes de redirections ou de redirections multiples sur la m\u00eame page.
\nLes redirections vers les ressources n\u00e9cessaires au \u00ab\u00a0chemin de rendu critique\u00a0\u00bb doivent toujours \u00eatre \u00e9vit\u00e9es.<\/p>\n- \n
- Preload Key Requests<\/strong>: identifie les pages html contenant des \u00e9l\u00e9ments susceptibles d’\u00eatre trait\u00e9s par \u00ab\u00a0preload\u00a0\u00bb.
\nLorsqu’une page est demand\u00e9e, le navigateur demande la page html au serveur en analysant le contenu et en envoyant des demandes distinctes pour chaque ressource de r\u00e9f\u00e9rence incluse dans le document. Pour am\u00e9liorer les performances, il est recommand\u00e9 d’acc\u00e9l\u00e9rer ce processus en demandant \u00e0 l’avance les ressources critiques.
\nUn exemple d’application pourrait \u00eatre la demande d’une police de caract\u00e8res dans un fichier CSS, puisque le navigateur ne la d\u00e9couvrirait qu’apr\u00e8s avoir lu la feuille de style. En utilisant la fonction \u00ab\u00a0Preload\u00a0\u00bb, vous allez pr\u00e9charger et r\u00e9cup\u00e9rer une ressource que le navigateur ne prendrait en compte qu’\u00e0 un stade ult\u00e9rieur, par exemple dans les demandes de cha\u00eene critique.
\nRappelez-vous que le navigateur met en cache la ressource en \u00ab\u00a0pr\u00e9chargement\u00a0\u00bb sans ex\u00e9cuter les scripts mais, les ayant d\u00e9j\u00e0 pris en compte, les servira imm\u00e9diatement une fois qu’ils auront \u00e9t\u00e9 demand\u00e9s.
\nCette fonctionnalit\u00e9 convient parfaitement aux d\u00e9pendances telles que JS, les polices de caract\u00e8res et CSS.<\/li>\n<\/ul>\nCette fonctionnalit\u00e9 est une directive permettant au navigateur de ne pas bloquer le chargement du document html. <> <> Pour mettre en \u0153uvre la directive \u00ab\u00a0Preload\u00a0\u00bb, il suffit d’ajouter la balise link dans la section head du fichier html ou d’utiliser l’en-t\u00eate HTTP Link.<\/p>\n<\/div>
<\/span><\/div>- \n
- Utiliser le format vid\u00e9o pour les images anim\u00e9es<\/strong>: identifie les pages contenant des GIF anim\u00e9s, ainsi que les \u00e9conomies potentielles si elles sont converties en vid\u00e9o.<\/li>\n
- \u00c9viter la taille excessive du DOM :<\/strong> identifie toutes les pages dont la taille du DOM d\u00e9passe les 1 500 n\u0153uds totaux recommand\u00e9s. La prise en compte des DOM est d’une importance vitale car elle peut nuire \u00e0 la performance et \u00e0 l’efficacit\u00e9 de plusieurs mani\u00e8res :\n
- \n
- le DOM comprend souvent de nombreux n\u0153uds qui ne sont pas visibles par l’utilisateur lorsque la page est charg\u00e9e pour la premi\u00e8re fois ; cette situation augmente inutilement le volume de donn\u00e9es \u00e0 servir aux utilisateurs et ralentit le temps de chargement (performance de chargement).<\/li>\n
- Au cours de la navigation, les utilisateurs et les scripts ont de nombreuses interactions avec la page web qui am\u00e8nent le navigateur \u00e0 r\u00e9organiser la position et le style des n\u0153uds dans le DOM, ce qui ralentit le rendu (performances d’ex\u00e9cution).<\/li>\n
- Si JavaScript utilise des s\u00e9lecteurs de requ\u00eate g\u00e9n\u00e9raux tels que document.querySelectorAll(‘li’), il peut, \u00e0 son insu, stocker des r\u00e9f\u00e9rences \u00e0 un tr\u00e8s grand nombre de n\u0153uds, ce qui peut surcharger les capacit\u00e9s de m\u00e9moire des appareils des utilisateurs (performances de la m\u00e9moire).<\/li>\n<\/ul>\n<\/li>\n
- R\u00e9duire le<\/strong> temps d’ex\u00e9cution du JavaScript<\/strong>: filtrez les pages de rapport dont le temps d’ex\u00e9cution du JavaScript est moyen ou lent. Lorsqu’une page html prend beaucoup de temps pour ex\u00e9cuter des scripts JavaScript, cela ralentit les performances :\n
- \n
- l’augmentation du co\u00fbt du r\u00e9seau : l’utilisation d’un plus grand nombre d’octets augmente le temps de t\u00e9l\u00e9chargement.<\/li>\n
- Le javascript est analys\u00e9 et compil\u00e9 dans le fil principal, qui ne reste pas disponible pour l’interaction avec l’utilisateur.<\/li>\n
- L’occupation du fil Javascript principal retarde \u00e9galement le TTI (Time to Interactive), ce qui p\u00e9nalise l’Ux de la page et les vitales d\u00e9di\u00e9es au web.<\/li>\n
- Si le Javascript contient de nombreuses r\u00e9f\u00e9rences, il peut inexorablement consommer beaucoup de m\u00e9moire, p\u00e9nalisant la consultation de la page par l’utilisateur.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Pour am\u00e9liorer les performances de l’ex\u00e9cution du Javascript, il est g\u00e9n\u00e9ralement recommand\u00e9 de \u00ab\u00a0minifier\u00a0\u00bb et de compresser le code, de supprimer le code inutilis\u00e9 et de le mettre en cache.<\/p>\n
- \n
- Serve Static Assets With An Efficient Cache Policy<\/strong>: renvoie toutes les pages contenant des ressources qui ne sont pas \u00ab\u00a0mises en cache\u00a0\u00bb, ainsi que les \u00e9conomies potentielles. Lorsqu’un navigateur demande une ressource, le serveur qui la fournit peut lui indiquer la dur\u00e9e pendant laquelle il doit la stocker temporairement ou la mettre en cache. Pour chaque demande ult\u00e9rieure de cette ressource, le navigateur utilise sa copie locale au lieu de l’obtenir du r\u00e9seau. Les \u00e9valuations de Lighthouse prennent en compte les polices, les m\u00e9dias, les images ou les feuilles de style qui r\u00e9pondent par le code d’\u00e9tat 2xx et qui n’ont pas explicitement d\u00e9clar\u00e9 une \u00ab\u00a0politique de non-cache\u00a0\u00bb.<\/li>\n<\/ul>\n
Voici un exemple de mise en cache via l’en-t\u00eate HTTP :<\/p>\n<\/div>
<\/span><\/div>La directive \u00ab\u00a0max-age\u00a0\u00bb indique au navigateur combien de temps une ressource doit rester dans le cache. Pour les \u00ab\u00a0biens statiques\u00a0\u00bb, un d\u00e9lai d’au moins un an est recommand\u00e9.<\/p>\n
- \n
- Minimiser le travail du thread principal<\/strong>: identifie toutes les pages dont le temps d’ex\u00e9cution sur le thread principal est moyen ou lent, ce qui p\u00e9nalise le rendu du document html. Le processus de rendu du navigateur transforme votre code en une page web avec laquelle les utilisateurs peuvent interagir. Par d\u00e9faut, le fil principal du processus de rendu g\u00e8re la majeure partie du code : il analyse le HTML et construit le DOM, il analyse le CSS et applique les styles sp\u00e9cifi\u00e9s, et il analyse, \u00e9value et ex\u00e9cute le JavaScript.<\/li>\n<\/ul>\n
Le fil principal traite \u00e9galement les \u00e9v\u00e9nements de l’utilisateur. Ainsi, lorsque le fil principal est occup\u00e9 \u00e0 faire autre chose, la page web peut ne pas r\u00e9pondre aux interactions de l’utilisateur, ce qui entra\u00eene une mauvaise exp\u00e9rience. Pour am\u00e9liorer ce processus, nous vous recommandons d’optimiser le javascript des tiers, de supprimer le code inutilis\u00e9, de r\u00e9duire les r\u00e9f\u00e9rences CSS et de les simplifier (minification), de reporter les CSS non critiques et de diviser les charges utiles du javascript.<\/p>\n
- \n
- Veiller \u00e0 ce que le texte reste visible pendant le chargement des<\/strong> polices : toutes les pages contenant des polices susceptibles de clignoter ou de devenir invisibles pendant le chargement des ressources.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div>
- Minimiser le travail du thread principal<\/strong>: identifie toutes les pages dont le temps d’ex\u00e9cution sur le thread principal est moyen ou lent, ce qui p\u00e9nalise le rendu du document html. Le processus de rendu du navigateur transforme votre code en une page web avec laquelle les utilisateurs peuvent interagir. Par d\u00e9faut, le fil principal du processus de rendu g\u00e8re la majeure partie du code : il analyse le HTML et construit le DOM, il analyse le CSS et applique les styles sp\u00e9cifi\u00e9s, et il analyse, \u00e9value et ex\u00e9cute le JavaScript.<\/li>\n<\/ul>\n
- Serve Static Assets With An Efficient Cache Policy<\/strong>: renvoie toutes les pages contenant des ressources qui ne sont pas \u00ab\u00a0mises en cache\u00a0\u00bb, ainsi que les \u00e9conomies potentielles. Lorsqu’un navigateur demande une ressource, le serveur qui la fournit peut lui indiquer la dur\u00e9e pendant laquelle il doit la stocker temporairement ou la mettre en cache. Pour chaque demande ult\u00e9rieure de cette ressource, le navigateur utilise sa copie locale au lieu de l’obtenir du r\u00e9seau. Les \u00e9valuations de Lighthouse prennent en compte les polices, les m\u00e9dias, les images ou les feuilles de style qui r\u00e9pondent par le code d’\u00e9tat 2xx et qui n’ont pas explicitement d\u00e9clar\u00e9 une \u00ab\u00a0politique de non-cache\u00a0\u00bb.<\/li>\n<\/ul>\n
- \u00c9viter la taille excessive du DOM :<\/strong> identifie toutes les pages dont la taille du DOM d\u00e9passe les 1 500 n\u0153uds totaux recommand\u00e9s. La prise en compte des DOM est d’une importance vitale car elle peut nuire \u00e0 la performance et \u00e0 l’efficacit\u00e9 de plusieurs mani\u00e8res :\n
- Utiliser le format vid\u00e9o pour les images anim\u00e9es<\/strong>: identifie les pages contenant des GIF anim\u00e9s, ainsi que les \u00e9conomies potentielles si elles sont converties en vid\u00e9o.<\/li>\n
- \u00c9viter les redirections multiples<\/strong>: affiche les pages qui comportent des ressources de redirection et les \u00e9conomies potentielles r\u00e9alis\u00e9es en utilisant l’URL directe. Les redirections ralentissent la vitesse de chargement des pages. Lorsqu’un navigateur demande une ressource qui a \u00e9t\u00e9 redirig\u00e9e, le serveur renvoie g\u00e9n\u00e9ralement une r\u00e9ponse HTTP comme celle-ci :<\/li>\n<\/ul>\n<\/div>
- Serve Images in Next-Gen Formats<\/strong>: met en \u00e9vidence les pages dont les images sont servies dans des formats plus anciens tels que jpeg et png. Il est conseill\u00e9 d’utiliser des formats tels que AVIF et WebP, qui pr\u00e9sentent des caract\u00e9ristiques de compression et de qualit\u00e9 sup\u00e9rieures.<\/li>\n
- Supprimer les<\/strong> feuilles de style CSS inutilis\u00e9es : identifie les pages contenant des feuilles de style CSS inutilis\u00e9es, ainsi que les \u00e9conomies potentielles en octets. Les d\u00e9veloppeurs l’utilisent g\u00e9n\u00e9ralement pour ajouter des feuilles de style \u00e0 une page :<\/li>\n<\/ul>\n<\/div>
- Minify CSS<\/strong>: toutes les pages dont les fichiers CSS n’ont pas \u00e9t\u00e9 minifi\u00e9s, ainsi que les \u00e9conomies potentielles si ces fichiers avaient \u00e9t\u00e9 correctement minifi\u00e9s.<\/li>\n<\/ul>\n<\/div>
- Images de taille correcte<\/strong>: le filtre met en \u00e9vidence toutes les pages qui contiennent des images de taille incorrecte et souligne les \u00e9conomies potentielles si elles sont corrig\u00e9es.<\/li>\n<\/ul>\n<\/div>
- Supprimer les<\/strong> ressources bloquant le rendu<\/strong>: toutes les pages dont les ressources bloquent la \u00ab\u00a0premi\u00e8re peinture\u00a0\u00bb de la page sont affich\u00e9es, ainsi que les \u00e9conomies potentielles.<\/li>\n
- Chrome User Experience Report<\/strong> (CrUX, ou \u00ab\u00a0donn\u00e9es de terrain\u00a0\u00bb) qui vous permet d’obtenir des donn\u00e9es de navigation r\u00e9elles.<\/li>\n<\/ul>\n
![\"Panoramica](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/03\/Report-per-le-performance.png\")
<\/a><\/span><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[89],"tags":[93,91,92],"class_list":["post-4086","post","type-post","status-publish","format-standard","hentry","category-vue-densemble-de-screaming-frog","tag-avance","tag-onglets-superieurs","tag-vue-densemble"],"acf":[],"yoast_head":"\n