Boost Your Pagespeed Insights Score To Improve The Speed Of Your Website
octobre 30, 2020

Augmentez votre score PageSpeed Insights pour améliorer la vitesse de votre site web

Par damien

Des outils tels que PageSpeed Insights (PSI) et Lighthouse peuvent être utiles pour surveiller les performances de vos sites. Mais pourquoi en avez-vous besoin ? Lorsque vous construisez une expérience web moderne, il est important de mesurer, d’optimiser et de surveiller si vous voulez être rapide et le rester. Les performances jouent un rôle important dans le succès de tout site, car les sites très performants attirent et retiennent mieux les utilisateurs que les moins performants.

Dans cet article, on va parler de ce qu’il y a de mieux depuis le pain tranché : la mesure des performances et comment ces outils peuvent vous aider à améliorer votre site web.

Lighthouse offre un ensemble complet de possibilités de performance et le temps gagné par la mise en œuvre de chaque optimisation. Vous pouvez le trouver dans le panneau d’audit Chrome DevTools et dans PageSpeed Insights.

PageSpeed Insights rend compte des performances d’une page sur les appareils mobiles et de bureau et fournit des suggestions sur la manière dont cette page peut être améliorée.

PSI fournit des données de laboratoire (Lighthouse) et de terrain sur une page. Données de laboratoire est utile pour le débogage des problèmes de performances, car il est collecté dans un environnement contrôlé. Toutefois, il se peut qu’il ne permette pas de saisir les goulets d’étranglement du monde réel. Les données de terrain sont utiles pour saisir l’expérience réelle des utilisateurs, mais elles ont un ensemble de mesures plus limité.

Score de performance

En haut du rapport, l’ISP fournit une note qui résume la performance de la page. Ce score est déterminé en faisant fonctionner Lighthouse pour collecter et analyser les données de laboratoire concernant la page. Un score de 90 ou plus est considéré comme rapide et 50 à 90 est considéré comme modéré. Un score inférieur à 50 est considéré comme lent.

Données de laboratoire par rapport aux données de terrain

Données de laboratoire

Les données de laboratoire sont des données de performance collectées dans un environnement contrôlé avec des paramètres prédéfinis de l’appareil et du réseau

Il offre des résultats reproductibles et des capacités de débogage pour aider à identifier, isoler et corriger les problèmes de performance.

Points forts :

Utile pour le débogage de tout problème de performance de bout en bout et offre une visibilité approfondie de l’UX Fournit un environnement de test et de débogage reproductible

Limitations :

Peut ne pas saisir les goulets d’étranglement du monde réel Ne peut pas être corrélé avec les ICP des pages du monde réel

Remarque : des outils comme Lighthouse et WebPageTest collectent ce type de données.

Données de terrain

Les données de terrain (également appelées surveillance des utilisateurs réels, ou RUM) sont des données de performance collectées à partir de chargements de pages réels que vos utilisateurs vivent dans la nature.

Points forts :

Capture l’expérience réelle des utilisateurs Permet la corrélation avec les indicateurs clés de performance de l’entreprise

Limitations :

Ensemble restreint de mesures Capacités de débogage limitées

Remarque : des ensembles de données publiques comme le rapport sur l’expérience des utilisateurs de Chrome et des outils de performance comme le score de vitesse de PageSpeed Insights font état de ce type de données.

Indicateurs de performance

Lighthouse et PageSpeed Insights reprennent quelques mesures clés : First Contentful Paint, Speed Index et Time (Crédit photo : Addy Osmani)

Dans le passé, la performance du web était mesurée par l’événement de charge. Cependant, ce moment ne correspond pas nécessairement à ce qui préoccupe l’utilisateur. Ces dernières années, les équipes chargées des navigateurs ont travaillé à la normalisation d’un ensemble de nouvelles mesures et d’API qui permettent de saisir plus précisément les performances d’une page web.

Pour s’assurer que ces mesures sont pertinentes pour les utilisateurs, nous les avons structurées autour de quelques questions clés :

Est-ce que cela se produit ? La navigation a-t-elle démarré avec succès ? Le serveur a-t-il répondu ? Est-il utile ? A-t-il rendu suffisamment de contenu pour que les utilisateurs puissent s’y intéresser ? est-il utilisable ? Les utilisateurs peuvent-ils interagir avec la page ou celle-ci est-elle occupée ? Est-elle agréable ? Les interactions sont-elles fluides et naturelles, sans décalage ?

Il existe un certain nombre de paramètres importants à mesurer et Lighthouse et PageSpeed Insights essaient de saisir quelques paramètres clés.

First Contentful Paint marque le moment où le premier texte ou la première image est peint. Le temps d’interactivité est le temps nécessaire pour que la page devienne totalement interactive (par exemple, l’utilisateur peut cliquer et voir une réponse). L’indice de vitesse indique la vitesse à laquelle le contenu d’une page est visiblement peuplé.

De nouvelles mesures intéressantes seront intégrées à nos outils cette année :

Largest Contentful Paint (LCP) : mesure le temps entre le début du chargement de la page et le moment où le plus grand bloc de texte ou élément d’image est rendu à l’écran. Total Blocking Time (TBT) : mesure le temps total entre FCP et TTI où le fil principal a été bloqué suffisamment longtemps pour empêcher la réactivité des entrées

En savoir plus sur les mesures de performance modernes.

Données de terrain du monde réel

PageSpeed Insights compare les données de terrain du monde réel sur la première peinture de contenu et le premier délai de saisie (Crédit photo : Addy Osmani)

Lorsque l’ISP reçoit une URL, elle la recherche dans l’ensemble de données du rapport sur l’expérience des utilisateurs de Chrome (CrUX). S’il est disponible, le PSI rapporte les données métriques du First Contentful Paint (FCP) et du First Input Delay (FID) pour l’origine et éventuellement l’URL de la page spécifique.

Classement rapide, modéré et lent

L’ISP classe également les données de terrain en trois catégories, décrivant les expériences jugées rapides, modérées ou lentes. L’ISP fixe les seuils suivants pour les expériences rapides/modérées/lentes, sur la base de l’ensemble des données du CrUX :

FCP :

Rapide : 0 – 1 000 msMoyen : 1 000 ms – 3 000 ms Lent : plus de 3 000 ms

FID :

Rapide : 0 – 100 msMoyen : 100 ms – 300 msLent : plus de 300 msDonnées Lab

Les audits de Lighthouse soulignent vos possibilités d’améliorer les mesures et les diagnostics sur la façon dont une page adhère aux meilleures pratiques (Crédit photo : Addy Osmani)

L’ISP utilise Lighthouse pour analyser l’URL donnée, générant un score de performance qui estime la performance de la page selon différentes mesures, notamment : La première peinture de contenu, l’indice de vitesse, le temps d’interactivité et la latence d’entrée estimée.

Chaque mesure est étiquetée par une icône :

Une mesure rapide est indiquée par une coche verte Une mesure modérée est indiquée par un cercle d’information orange Une mesure lente est indiquée par un triangle d’avertissement rougeAudits

Lighthouse estime la performance de la page sur différents critères, notamment First Contentful Paint, Speed Index, Time to Interactive (Crédit image : Addy Osmani)

Lighthouse sépare ses audits en trois sections différentes :

Opportunités fournit des suggestions pour améliorer les mesures de performance de la page. Chaque suggestion de cette section estime la vitesse de chargement de la page si l’amélioration est mise en œuvreDiagnostics fournit des informations supplémentaires sur la manière dont une page respecte les meilleures pratiques en matière de développement webLes audits passés indiquent les audits qui ont été passés avec succès par la page

Le score de l’ISP est déterminé en faisant tourner Lighthouse pour analyser les données de laboratoire concernant la page. Voir la FAQ pour plus de détails (Crédit image : Addy Osmani)Optimiser les performances

Les possibilités de rapport Lighthouse fournissent des suggestions sur la manière d’améliorer les mesures de performance de la page (Crédit image : Addy Osmani)

Il existe plusieurs optimisations que vous pouvez appliquer pour améliorer vos mesures Lighthouse/ PageSpeed Insights.

Pour améliorer First Contentful Paint :

Minimiser les CSS et supprimer les CSS inutilisés Éliminer toute ressource bloquant le rendu Préconnecter aux origines requises Réduire les temps de réponse du serveur Éviter les redirections de pages multiples Éviter une taille de DOM excessive S’assurer que le texte reste visible pendant le chargement des polices web (par exemple avec l’affichage des polices)

L’envoi de grandes quantités de JavaScript a un impact significatif sur la vitesse de votre site, en particulier sur la rapidité avec laquelle les utilisateurs peuvent interagir avec vos pages. Pour améliorer le temps d’interactivité d’un site, vous pourriez :

Minimiser et comprimer JavaScript N’envoyer que le JavaScript dont les utilisateurs ont besoin, quand ils en ont besoin (par exemple, en fractionnant le code) Réduire l’impact du code tiers (par exemple, en chargeant paresseusement ces ressources) Réduire le temps d’exécution du JavaScript en optimisant les longues tâches coûteuses Précharger les principaux scripts, en particulier si votre site est une application d’une seule page

Nombre de ces optimisations peuvent également améliorer votre indice de vitesse. Vous trouverez ici d’autres conseils sur les performances de Lighthouse/PageSpeed.

API PageSpeed Insights

L’outil PageSpeed Insights permet également de récupérer les données de l’API de l’ISP et de les restituer avec la visionneuse officielle Lighthouse (Crédit photo : Addy Osmani)

L’API PageSpeed Insights est liée à l’ISP. Elle fournit un accès gratuit au contrôle des performances des pages web et renvoie des données avec des suggestions d’amélioration. L’API V5 comprend des données de laboratoire provenant de Lighthouse et des données du monde réel provenant du rapport sur l’expérience des utilisateurs de Chrome (CrUX).

Les données
const url = ‘https://wordpress.org’ ;
const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}` ;
const response = await fetch(apiCall) ;
const json = await response.json() ;

La sortie de psi ressemble un peu à ceci lorsqu’elle est utilisée comme CLI avec PageSpeed Insights V5 (Crédit image : Addy Osmani)

Les équipes utilisent l’API pour créer des tableaux de bord, des rapports personnalisés et des intégrations personnalisées avec d’autres outils de mesure de l’expérience des utilisateurs. Les réponses de l’API peuvent être utilisées pour contrôler et représenter graphiquement n’importe quelle donnée de l’outil PSI dont nous avons parlé plus haut.

Il est possible de créer des rapports très personnalisés à partir des données de l’ISP. Par exemple, Vrbo, un site de location de vacances, représente graphiquement les données réelles de l’API PSI pour suivre l’évolution des performances à long terme afin de s’assurer que sa vitesse reste compétitive dans le secteur du voyage.

web.dev Measure utilise le même back end que le PSI et utilise ces données pour une mesure historique dans le temps (Crédit photo : Addy Osmani)

Web.dev Measure utilise le même back end que le PSI et utilise ces données pour une mesure historique dans le temps.

Il est utile de se familiariser avec la structure de la réponse de l’API de l’ISP. Des informations sur les mesures sont disponibles pour le laboratoire et le terrain/monde réel :

“js
const url = ‘https://wordpress.org’ ;
const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}` ;
fetch(apiCall)
.then(response => response.json())
.then(json => {
// Mesures du monde réel
const cruxMetrics = {
“First Contentful Paint” : json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
“Délai de première entrée” : json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
} ;
// Mesures de laboratoire
const lighthouse = json.lighthouseResult ;
const lighthouseMetrics = {
First Contentful Paint’ : lighthouse.audits[‘first-contentful-paint’].displayValue,
Indice de vitesse : lighthouse.audits[‘speed-index’].displayValue,
“Time To Interactive” : lighthouse.audits[“interactive”].displayValue,
} ;
// …
}) ;

Les réponses de l’API PSI sont axées sur les données de performance. Cela dit, vous pouvez fournir l’argument ?category pour spécifier toute catégorie d’audit Lighthouse supplémentaire pour laquelle vous souhaitez obtenir des données.

“”sh
curl -i “https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://web.dev&category=pwa&category=performance&category=accessibility&category=best-practices&category=seo

Vous pouvez également fournir un argument de localisation ou de stratégie (de bureau ou mobile – qui simule un chargement de page sur un appareil de classe médiane – par exemple un Moto G4 – sur un réseau mobile).

Lighthouse (et l’API du PSI) commencent à prendre en charge des recommandations spécifiques à la pile qui offrent des conseils plus détaillés sur la mise en œuvre des optimisations (par exemple WordPress) (Crédit image : Addy Osmani)

Lighthouse commence à soutenir les Stack Packs, des recommandations spécifiques aux piles qui fournissent des conseils plus détaillés sur la manière de mettre en œuvre des optimisations (par exemple WordPress). Les réponses de l’API de l’ISP prennent également en charge cette fonctionnalité. Ainsi, si vous testez un site WordPress, ces chaînes sont incluses (par exemple, une URL de démonstration pour wordpress.org serait https:// www.googleapis.com/pagespeedonline/v5/ runPagespeed?rl=https://wordpress.org).

L’outil PSI permet également de récupérer les données de l’API PSI et de les restituer avec la visionneuse officielle Lighthouse Viewer. Passez ?psiurl comme paramètre pour voir cela en action.

L’un des outils que nous avons construit en plus de l’ISP est le module psi Node, qui offre un rapport de performance pratique dans votre processus de construction.

Les
const psi = require(‘psi’) ;
(async () => {
// Obtenez le rapport PageSpeed Insights
const { data } = await psi(‘https://web.dev’) ;
console.log(‘Speed score:’, data.lighthouseResult.categories.performance.score) ;
// Sortie d’un rapport formaté sur le terminal
attendez psi.output(‘https://theverge.com’) ;
console.log(“Done”) ;
})() ;

Vous pouvez utiliser Google Sheets et un cron job pour surveiller plusieurs URL en envoyant régulièrement un ping à l’API PSI (Crédit photo : Addy Osmani)

Vous pouvez également utiliser Google Sheets et un cron job pour automatiser la surveillance de plusieurs URL (par exemple les concurrents) en envoyant régulièrement un ping à l’API de l’ISP. Un guide pratique et une fiche que vous pouvez copier sont disponibles ici.

Services de tiers

Les services de surveillance continue tels que SpeedCurve, Calibre ou Treo s’appuient sur des outils comme Lighthouse et PageSpeed Insights sous le capot. Si vous préférez qu’un service se charge de vérifier régulièrement vos résultats et de vous envoyer des rapports plutôt que de vous envoyer les vôtres, pensez à les consulter. En fin de compte, utilisez la solution qui est la plus logique pour votre site !

Soyez rapide, restez rapide !

Lorsqu’il s’agit de l’expérience utilisateur, la vitesse est importante. Il est essentiel de comprendre les différentes perspectives offertes par les mesures de performances, puis d’établir celles qui sont importantes pour votre expérience utilisateur. Des outils comme Lighthouse et PageSpeed Insights peuvent mesurer votre expérience et mettre en évidence les possibilités d’amélioration. Ils peuvent constituer un élément utile de la boîte à outils de votre site pour vous permettre d’aller vite et de rester rapide.