À propos de cet atelier de programmation
1. Avant de commencer
Dans cet atelier de programmation, vous allez apprendre à mesurer les signaux Web essentiels d'une page Web à l'aide de l'API PageSpeed Insights (PSI) et de l'API Chrome UX Report (CrUX).
Les deux API renvoient des données "Signaux Web essentiels" identiques, mais chacune offre des avantages distincts. Outre les données de CrUX sur le terrain, l'API PSI fournit des données de Lighthouse, l'outil Open Source automatisé et Open Source de Google qui audite les pages Web et recommande de les améliorer. L'API CrUX ne fournit pas de données Lighthouse, elle s'exécute donc plus rapidement.
Google vous recommande de mesurer les signaux Web essentiels sur les appareils mobiles et les ordinateurs. Les signaux Web essentiels incluent ces trois métriques, qui s'appliquent à toutes les pages Web et vous fournissent des informations essentielles sur l'expérience utilisateur:
- LCP (Largest Contentful Paint) Mesure les performances de chargement et devrait se produire dans les 2,5 secondes suivant le début du chargement de la page.
- FID (First Input Delay) Mesure l'interactivité et devrait survenir dans les 100 millisecondes.
- CLS (Cumulative Layout Shift) Mesure la stabilité visuelle et doit être comprise entre 0,1 et 1,
Prerequisites
- Article Signaux Web.
- Article sur les seuils des métriques des Signaux Web essentiels
- Connaissances de base de l'utilisation de la ligne de commande
Objectifs de l'atelier
- Mesurer les signaux Web essentiels à l'aide de l'API PSI
- Mesurer les signaux Web essentiels à l'aide de l'API CrUX
Prérequis
- Un compte Google
- Accès à une ligne de commande
- Éditeur de texte de votre choix
- Un navigateur Web de votre choix
- L'URL de votre choix (cet atelier de programmation utilise https://developers.google.com).
2. Mesurer les signaux Web essentiels avec l'API PSI
- Si vous avez besoin des données de performances de la version classique d'une URL, exécutez la commande
curlsuivante pour demander les données de l'API PageSpeed Insights et les enregistrer dans un fichierresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Remplacez l'espace réservé YOUR_URL par votre URL.
- Si vous avez besoin des données de performances de la version mobile d'une URL, définissez le paramètre de requête
strategysur une valeurmobileà la fin de la chaîne d'API dans la commande fournie à l'étape précédente:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Remplacez l'espace réservé YOUR_URL par votre URL.
- Dans votre éditeur de texte, ouvrez le fichier
response.txt, puis recherchez la propriétéloadingExperience:
réponse.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
La propriété loadingExperience signale ces informations pour chacun des signaux Web essentiels en fonction de l'URL et du type d'appareil indiqués dans la requête API:
- La propriété
percentileindique le 75e centile pour chaque métrique. - La propriété
distributionsindique le pourcentage de pages vues pour lesquelles a besoin d'amélioration ou pour chaque. - La propriété
categoryclasse les métriques comme lentes, moyennes ou rapides.
Si le contenu de la propriété loadingExperience est vide, l'URL ne dispose pas de suffisamment de données de performances disponibles. Ce problème survient généralement lorsque vous testez des pages Web à faible trafic.
- Recherchez la propriété
originLoadingExperience:
response.txt.
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
La propriété originLoadingExperience indique les expériences cumulées pour l'ensemble de l'origine, et pas uniquement l'URL. Elle fournit les mêmes informations pour chacun des signaux Web essentiels, comme expliqué à l'étape précédente.
3. Mesurer les signaux Web essentiels avec l'API CrUX
Obtenir une clé API
- Dans Google Cloud Console, recherchez
Chrome UX, puis sélectionnez API Rapport sur l'expérience utilisateur Chrome dans le menu déroulant. - Sur la page API Chrome UX Report, cliquez sur Activer, puis attendez que le bouton Activer devienne un bouton Gérer et sélectionnez Gérer.
- Dans le menu de navigation, cliquez sur Identifiants, puis sélectionnez Créer des identifiants et clé d'API et copiez la clé API.
Envoyer une demande
- Depuis votre ligne de commande, demandez des données sur les performances de votre URL à l'aide de l'API CrUX et enregistrez-les dans un fichier
response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
Remplacez l'espace réservé YOUR_API_KEY par votre clé API, puis remplacez l'espace réservé YOUR_URL par votre URL.
- Dans l'éditeur de texte, ouvrez le fichier
response.txt:
réponse.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
La réponse de l'API CrUX fournit les informations suivantes pour chacun des signaux Web essentiels:
- La propriété
histogramindique le pourcentage d'utilisateurs dont l'expérience est lente, moyenne ou rapide pour une statistique donnée. - La propriété
percentilesindique l'observation du 75e centile pour une métrique donnée.
Si un message d'erreur s'affiche, indiquant que les données sont introuvables, cela signifie que les données de performances disponibles sont insuffisantes pour une URL donnée. Ce problème survient généralement lorsque vous testez des pages Web à faible trafic.
4. Félicitations
Félicitations ! Vous avez mesuré les signaux Web essentiels d'une page Web à l'aide des API PSI et CrUX.