Créer un tableau de bord CrUX dans Looker Studio

Looker Studio (anciennement Data Studio) est un puissant outil de visualisation des données qui vous permet de créer des tableaux de bord basés sur des sources de big data comme le rapport d'expérience utilisateur Chrome. Dans ce guide, vous allez apprendre à créer votre propre tableau de bord CrUX personnalisé afin de suivre les tendances d'expérience utilisateur pour une origine.

Capture d'écran du tableau de bord CrUX montrant plusieurs graphiques à barres empilées qui changent au fil des mois.
Tableau de bord CrUX

Le tableau de bord CrUX intègre une fonctionnalité Looker Studio appelée connecteurs de communauté. Ce connecteur constitue un lien préétabli entre les données CrUX brutes dans BigQuery et les visualisations de Looker Studio. Ainsi, les utilisateurs du tableau de bord n'ont plus besoin d'écrire des requêtes ni de générer des graphiques. Tout est conçu pour vous. Il vous suffit de fournir une origine pour qu'un tableau de bord personnalisé soit généré.

Le tableau de bord CrUX par défaut

CrUX dispose d'un tableau de bord par défaut géré par l'équipe CrUX. De nouvelles métriques (par exemple, INP) sont ajoutées par l'équipe et disponibles lors du prochain chargement du tableau de bord.

Créer un tableau de bord personnalisé

Certains utilisateurs voudront peut-être personnaliser le tableau de bord. Dans ce cas, vous pouvez créer votre propre copie du tableau de bord par défaut et la modifier à votre guise.

Pour créer un tableau de bord personnalisé, accédez à g.co/chromeuxdash. Vous êtes redirigé vers la page du connecteur de communauté CrUX, où vous pouvez indiquer l'origine pour laquelle le tableau de bord sera généré. Notez que les nouveaux utilisateurs devront peut-être compléter leur demande d'autorisation ou indiquer leurs préférences marketing.

Capture de l'écran de configuration du connecteur de tableau de bord CrUX avec un champ permettant de saisir une URL d'origine et une case à cocher permettant de modifier ce champ dans les rapports.
Connecteur du tableau de bord CrUX

Le champ de saisie de texte n'accepte que les origines, et non les URL complètes. Par exemple:

Origine (compatible)
https://developer.chrome.com
URL (non compatible)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

Si vous omettez ce protocole, le protocole HTTPS est utilisé par défaut. Les sous-domaines sont importants. Par exemple, https://developers.google.com et https://www.google.com sont considérés comme des origines différentes.

Certains problèmes courants liés aux origines sont la fourniture d'un protocole incorrect (par exemple, http:// au lieu de https://) et l'omission du sous-domaine si nécessaire. Certains sites Web incluent des redirections. Par conséquent, si http://example.com redirige vers https://www.example.com, vous devez utiliser cette dernière, car c'est la version canonique de l'origine. En règle générale, utilisez l'origine que les utilisateurs voient dans la barre d'adresse.

Si vous cochez cette case, l'origine sera incluse dans l'URL du tableau de bord, ce qui permettra d'utiliser le même tableau de bord pour différentes origines en modifiant ce paramètre d'URL. Il est donc recommandé de le cocher.

Cliquez sur le bouton Connexion. Si vous avez coché cette case, vous êtes invité à confirmer votre choix.

Si votre origine n'est pas incluse dans l'ensemble de données CrUX, un message d'erreur semblable à celui illustré dans le schéma suivant peut s'afficher. L'ensemble de données comprend plus de 15 millions d'origines, mais celle que vous souhaitez ne contient peut-être pas suffisamment de données pour être incluse.

Capture d'écran d'un message d'erreur pop-up indiquant, entre autres messages d'erreur, "Il existe plus de 15 millions d'origines dans cet ensemble de données, mais https://doesnotexist.origin n'est pas l'une d'entre elles"
Message d'erreur concernant le connecteur de communauté CrUX lorsqu'une origine n'existe pas

Si l'origine existe, vous êtes redirigé vers la page du schéma du tableau de bord. Vous voyez alors tous les champs inclus: chaque type de connexion effective, chaque facteur de forme, le mois de publication de l'ensemble de données, la répartition des performances pour chaque métrique et, bien sûr, le nom de l'origine. Vous n'avez rien à faire ni à modifier sur cette page. Il vous suffit de cliquer sur Créer un rapport pour continuer.

Capture d'écran de l'éditeur de schéma du tableau de bord CrUX avec différents champs, types, agrégations et descriptions avec la possibilité de les modifier ou d'ajouter de nouveaux champs.
Schéma du tableau de bord CrUX

Utiliser le tableau de bord

Chaque tableau de bord est fourni avec trois types de pages:

  1. Présentation des Core Web Vitals
  2. Performances des métriques
  3. Données démographiques sur les utilisateurs

Chaque page est accompagnée d'un graphique illustrant la répartition de chaque version mensuelle disponible dans le temps. À mesure que de nouveaux jeux de données sont publiés, vous pouvez actualiser le tableau de bord pour obtenir les données les plus récentes.

Les jeux de données mensuels sont publiés le deuxième mardi de chaque mois. Par exemple, l'ensemble de données qui comprend les données sur l'expérience utilisateur du mois de mai est publié le deuxième mardi de juin.

Présentation des Core Web Vitals

La première page présente les performances mensuelles des Core Web Vitals pour la source. Ce sont les métriques d'expérience utilisateur les plus importantes sur lesquelles Google vous recommande de vous concentrer.

Capture d'écran de la présentation des Core Web Vitals du tableau de bord CrUX montrant des informations sur les métriques LCP, INP et CLS.
Présentation des Core Web Vitals du tableau de bord CrUX

Consultez la page Core Web Vitals pour comprendre comment les utilisateurs d'ordinateurs et de téléphones perçoivent l'origine. Par défaut, le mois le plus récent lors de la création du tableau de bord est sélectionné. Pour passer d'une version mensuelle plus ancienne à une autre, utilisez le filtre Mois en haut de la page.

Notez que la tablette est omise par défaut dans ces graphiques, mais si nécessaire, vous pouvez supprimer le filtre Aucune tablette dans la configuration du graphique à barres:

Capture d'écran de la modification de l'option "Filtrer" dans Looker Studio
Modifier le tableau de bord CrUX pour afficher les tablettes sur la page Core Web Vitals

Performances des métriques

Après la page Core Web Vitals, vous trouverez des pages indépendantes pour toutes les metrics de l'ensemble de données CrUX.

Capture d'écran de la page LCP du tableau de bord CrUX montrant différents graphiques à barres empilées changeant au fil des mois.
Page LCP du tableau de bord CrUX

En haut de chaque page se trouve le filtre Appareil, que vous pouvez utiliser pour limiter les facteurs de forme inclus dans les données relatives à l'expérience. Par exemple, vous pouvez afficher le détail des expériences sur téléphone. Ce paramètre est appliqué d'une page à l'autre.

Les principales visualisations sur ces pages sont la répartition mensuelle des expériences classées dans les catégories "Bonnes", "Amélioration nécessaire" et "Médiocre". La légende comportant un code couleur sous le graphique indique l'ensemble des expériences incluses dans la catégorie. Par exemple, dans la capture d'écran précédente, vous pouvez voir le pourcentage d'expériences Largest Contentful Paint (LCP) "bonnes" qui fluctuent et s'aggravent légèrement au cours des derniers mois.

Les pourcentages d'expériences "satisfaisantes" et "mauvaises" du mois le plus récent sont affichés au-dessus du graphique, avec un indicateur de la différence en pourcentage par rapport au mois précédent. Pour cette origine, les "bonnes" expériences LCP ont chuté de 3,2% à 56,04% d'un mois sur l'autre.

De plus, pour les métriques telles que le LCP et les autres Core Web Vitals qui fournissent des recommandations explicites de centiles, vous trouverez la métrique "P75" entre les pourcentages "satisfaisant" et "faible". Cette valeur correspond au 75e centile de l'expérience utilisateur de l'origine. En d'autres termes, 75% des expériences sont supérieures à cette valeur. Notez que cela s'applique à la distribution globale sur tous les appareils à partir de l'origine. L'activation/la désactivation du filtre Appareil ne permet pas de recalculer le centile.

Mises en garde techniques concernant les centiles

Sachez que les métriques de centile sont basées sur les données d'histogramme de BigQuery.La précision sera donc grossière: 100 ms pour le LCP, 25 ms pour l'INP et 0,05 pour le CLS. En d'autres termes, un LCP P75 de 3 800 ms indique que le véritable 75e centile se situe entre 3 800 ms et 3 900 ms.

En outre, l'ensemble de données BigQuery utilise une technique appelée "répartition des classes", qui consiste à regrouper intrinsèquement les densités des expériences utilisateur dans des classes très grossières de précision décroissante. Cela nous permet d'inclure des densités minutes dans la fin de la distribution sans avoir à dépasser une précision de quatre chiffres. Par exemple, les valeurs LCP de moins de 3 secondes sont regroupées dans des bacs d'une largeur de 200 ms. Entre 3 et 10 secondes, les bins ont une largeur de 500 ms. Au-delà de 10 secondes, les classes ont une largeur de 5 000 ms... Plutôt que d'avoir des classes de largeurs variables, la répartition des classes garantit que toutes les classes ont une largeur constante de 100 ms (le plus grand diviseur commun) et que la distribution est interpolée de façon linéaire dans chaque classe.

Les valeurs P75 correspondantes dans des outils tels que PageSpeed Insights ne sont pas basées sur l'ensemble de données public BigQuery et peuvent fournir des valeurs de précision en millisecondes.

Données démographiques sur les utilisateurs

Deux dimensions sont incluses sur les pages des données démographiques des utilisateurs: les appareils et les types de connexion effectives (ECT). Ces pages illustrent la répartition des pages vues sur l'ensemble de l'origine pour les utilisateurs de chaque catégorie démographique.

La page de répartition par types d'appareil indique la répartition des utilisateurs de téléphones, d'ordinateurs et de tablettes au fil du temps. De nombreuses origines ont tendance à avoir peu ou pas de données sur les tablettes. Vous verrez donc souvent "0%" au bord du graphique.

Capture d'écran du tableau de bord CrUX montrant l'évolution de la répartition des appareils d'un mois à l'autre.
Page des appareils du tableau de bord CrUX

De même, la page de distribution ECT indique la répartition des expériences 4G, 3G, 2G, 2G lentes et hors connexion.

Les distributions de ces dimensions sont calculées à l'aide des segments des données d'histogramme First Contentful Paint (FCP).

Questions fréquentes

Voici quelques-unes des questions fréquentes sur la création de tableaux de bord CrUX dans Looker Studio:

Quand utiliser le tableau de bord CrUX plutôt que d'autres outils ?

Le tableau de bord CrUX est basé sur les mêmes données sous-jacentes que celles disponibles sur BigQuery, mais vous n'avez pas besoin d'écrire une seule ligne de code SQL pour extraire les données et vous n'avez jamais à craindre de dépasser les quotas sans frais. La configuration d'un tableau de bord est plus rapide et plus simple que d'interroger les données sous-jacentes. Toutes les visualisations sont générées pour vous et vous avez le contrôle de les partager avec qui vous voulez.

Existe-t-il des limites à l'utilisation du tableau de bord CrUX ?

Étant basé sur BigQuery, le tableau de bord CrUX hérite également de toutes ses limites. Elle est limitée aux données au niveau de l'origine avec une précision mensuelle.

Le tableau de bord CrUX renonce également à la polyvalence des données brutes de BigQuery pour plus de simplicité et de commodité. Par exemple, les distributions de métriques sont uniquement attribuées à "Bon", "Amélioration nécessaire" et "Médiocre", contrairement aux histogrammes complets. Le tableau de bord CrUX fournit également des données à l'échelle mondiale, tandis que l'ensemble de données BigQuery vous permet de zoomer sur des pays spécifiques.

Où puis-je en savoir plus sur Looker Studio ?

Pour en savoir plus, consultez la page Fonctionnalités de Looker Studio.