Real User Monitoring (RUM)

Le Real User Monitoring (RUM) mesure les Core Web Vitals dans le navigateur des personnes qui visitent votre site. Vous ajoutez un petit script à vos pages, et LoadFocus affiche LCP, INP, CLS, FCP et TTFB au 75e centile, par page et par appareil. Il montre aussi ce qui les ralentit : les éléments, images et scripts derrière les chiffres, et leurs écarts selon le pays, le navigateur, la connexion et le type de navigation.

Les exécutions de laboratoire indiquent à quelle vitesse une page peut s'afficher depuis un emplacement avec un profil d'appareil. Le RUM indique à quelle vitesse elle s'affiche pour vos visiteurs. Il fonctionne aussi là où les données de terrain du Chrome UX Report n'affichent rien, car il ne dépend pas d'un trafic Chrome suffisant sur votre site du point de vue de Google.

Ajouter un site

1. Cliquez sur RUM dans la barre latérale de l'application Page Speed ou ouvrez speed.loadfocus.com/rum. La page liste vos sites.
2. Cliquez sur Ajouter un site, saisissez le Nom du site et les Noms d'hôte sur lesquels il fonctionne, puis cliquez sur Créer le site.
3. Ouvrez le site et copiez le snippet de la section Installation. Collez-le dans le <head> de chaque page.

Séparez les noms d'hôte par des virgules, jusqu'à 10 par site. Seules les pages vues de ces noms d'hôte sont comptées, et *.example.com couvre example.com et tous ses sous-domaines. La vérification des noms d'hôte évite qu'on fausse vos chiffres par hasard, mais la clé du site dans le snippet est publique : considérez donc les chiffres comme des données de visite, pas comme un contrôle de sécurité.

Si votre site envoie une Referrer-Policy: no-referrer stricte, le navigateur n'envoie aucune origine avec la balise et ces pages vues ne sont pas comptées. Pour un tel site, cochez Accepter les pages vues des pages qui n'envoient pas d'origine dans les réglages du site. Le nom d'hôte est alors pris dans le snippet, que n'importe quelle page pourrait falsifier : laissez l'option désactivée si votre site n'en a pas besoin.

Le snippet

<script async src="https://speed.loadfocus.com/rum.js" data-site="YOUR_SITE_KEY"></script>

Le snippet affiché sur la page du site contient déjà votre clé. Le script se charge après votre page et envoie une petite balise de mesure quand le visiteur quitte la page ou masque l'onglet.

Trois réglages facultatifs :

• Échantillonnage. data-sample="0.25" mesure un quart des pages vues. Les pages vues hors de l'échantillon ne sont pas mesurées du tout. Le choix Mesurer au-dessus du snippet, sur la page du site, le règle pour vous.

• Noms de page. Par défaut, chaque page est nommée d'après son chemin. Pour regrouper des pages vous-même, définissez window.LOADFOCUS_RUM_PAGE sur la page, par exemple window.LOADFOCUS_RUM_PAGE = "/product/:id";.

• Version figée. Sur la page du site, Figer cette version (Subresource Integrity) vous donne un snippet qui charge une copie gelée du script avec son empreinte d'intégrité :

  <script async src="https://speed.loadfocus.com/rum.v1.js" integrity="sha384-..." crossorigin="anonymous" data-site="YOUR_SITE_KEY"></script>

  Rien de ce que LoadFocus déploie ne peut changer ce script, et le navigateur le refuse s'il diffère un jour de l'empreinte. Copiez le snippet depuis la page du site pour avoir la vraie empreinte. Pour une version plus récente, installez le nouveau snippet. Le snippet simple rum.js charge toujours la version actuelle.

Si votre site envoie une Content-Security-Policy, autorisez https://speed.loadfocus.com dans script-src (le script) et dans connect-src (la balise).

Ce qui est mesuré

LCP, INP et CLS sont les Core Web Vitals. Les valeurs suivent les mêmes règles que la bibliothèque web-vitals de Google : le LCP s'arrête à la première interaction, le CLS est la plus grande rafale de décalages de mise en page, l'INP écarte une valeur aberrante par tranche de 50 interactions, et ce qui s'affiche dans un onglet ouvert en arrière-plan ne compte pas. Chaque page vue est classée mobile ou ordinateur.

Une balise est envoyée par page vue. Une page restaurée depuis le cache avant/arrière du navigateur compte comme une nouvelle page vue, comme la bibliothèque web-vitals de Google la signale.

Les pages vues des bots, robots d'indexation, navigateurs headless, outils de laboratoire comme Lighthouse (moniteurs LoadFocus compris) et scripts ne sont pas comptées. La page du site indique combien ont été écartées ces dernières 24 heures.

Confidentialité

Le script ne dépose aucun cookie et ne stocke rien dans le navigateur. Chaque balise contient le chemin de la page, le type d'appareil et les valeurs, ainsi que ce qui les explique :

• De courts sélecteurs CSS des éléments derrière le LCP, l'INP et le CLS : la balise, l'identifiant et jusqu'à deux noms de classe, jamais de texte ni d'autres attributs.
• L'adresse de l'image LCP et du script le plus lent, sans la query string.
• Le type de connexion et la façon dont la page a été ouverte (visite normale, rechargement, retour ou avance).

Par ailleurs :

• La query string et le hash de la page ne sont jamais envoyés.
• Les identifiants, nombres, jetons et adresses e-mail dans les chemins sont regroupés sous :id, si bien que /orders/48213 et /orders/48214 comptent tous deux comme /orders/:id.
• L'adresse IP du visiteur sert en mémoire à trouver le pays et, sous forme d'empreinte qui change chaque jour, aux limites de fréquence. Elle n'est jamais conservée.

Les chemins et les ids d'éléments viennent de vos propres pages. Si un chemin peut contenir un nom, par exemple /u/jane.doe, donnez à ces pages un nom commun avec window.LOADFOCUS_RUM_PAGE. Il n'y a rien à ajouter à un bandeau cookies.

Lire le tableau de bord

Chaque site a sa propre page. Choisissez la Période (7 jours, 28 jours ou 90 jours) et vous voyez :

• Une tuile par métrique avec son p75, colorée bon, à améliorer ou médiocre, la part des pages vues dans chaque tranche et la part qui est bonne.
• Un graphique quotidien du p75 de la métrique sur laquelle vous cliquez, avec les seuils bon et médiocre en pointillés et les pages vues en barres pâles.
• Pages : vos pages les plus vues avec leurs pages vues et le p75 de LCP, INP et CLS. Au-delà des 300 premiers chemins distincts d'une journée, les pages sont comptées dans (autres pages). Survolez le LCP d'une page pour voir ses quatre phases.
• Appareils : la part des pages vues et le p75 de LCP, INP et CLS pour Mobile et Ordinateur.

Les chiffres apparaissent quelques minutes après les premières visites.

Chaque site de la page RUM affiche Reçoit des données ou En attente de la première page vue. Un p75 calculé sur moins de 30 pages vues est affiché en gris comme Trop peu pour juger, avec son nombre, car il peut encore beaucoup varier. Les jours du graphique sont des jours UTC.

Ce qui ralentit vos pages

Sous les pages et les appareils, chaque site montre ce qui se cache derrière ses chiffres. Le même snippet le collecte, il n'y a donc rien à configurer.

Ce qui ralentit le LCP

Une barre découpe le LCP en quatre phases, chacune au 75e centile :

• Temps jusqu'au premier octet : jusqu'à l'arrivée du premier octet de la page.
• Délai de chargement : de là jusqu'au moment où le navigateur commence à télécharger l'image LCP.
• Durée de chargement : le téléchargement de l'image.
• Délai de rendu : de la fin du téléchargement jusqu'à l'affichage de l'image ou du texte.

Un LCP texte n'a ni délai ni durée de chargement. Chaque phase est son propre centile, leur somme ne donne donc pas le LCP ci-dessus. Sous la barre, Élément liste les éléments qui ont été le LCP sous forme de court sélecteur CSS, avec leur type (Image ou Texte), les pages vues et le LCP, et Image liste les images LCP par adresse.

Ce qui ralentit l'INP

Une barre découpe l'interaction la plus lente de chaque page vue en Délai d'entrée (attente du thread principal), Traitement (exécution des gestionnaires d'événements) et Présentation (affichage de l'image suivante). Interactions les plus lentes liste les éléments sur lesquels les visiteurs ont cliqué, appuyé ou saisi du texte, avec l'événement. Scripts exécutés pendant l'interaction la plus lente liste le script qui a tourné le plus longtemps pendant celle-ci, par adresse, avec ce qui l'a lancé (Lancé par, par exemple event-listener). Seuls Chrome et Edge signalent les scripts.

Ce qui se décale

Ce qui se décale liste l'élément qui a le plus bougé dans la plus grande rafale de décalages de mise en page de chaque page vue, avec son CLS.

Chacun de ces tableaux garde jusqu'à 100 éléments, images ou scripts différents par jour et par site. Le reste est compté dans (autres éléments), (autres images) ou (autres scripts).

Répartitions

Répartitions affiche les pages vues et le p75 de LCP, INP, CLS et TTFB par :

• Pays : d'après l'adresse IP du visiteur, consultée à l'arrivée de la page vue et non conservée. Jusqu'à 60 pays par jour et par site, le reste dans Autres pays. Les pays proviennent des données GeoLite2 créées par MaxMind.
• Navigateur : Chrome, Edge, Safari, Firefox, Samsung Internet, Opera ou Autres navigateurs.
• Connexion : le type de connexion effectif indiqué par le navigateur (4g, 3g, 2g, slow-2g). Seuls Chrome, Edge et les autres navigateurs Chromium l'indiquent, les visites depuis Safari et Firefox apparaissent donc comme Non indiqué.
• Navigation : Visite normale, Rechargement, Retour ou avance, Cache retour/avance (une page restaurée instantanément) et Prérendue.

Alertes

Dans Alertes, sur la page d'un site, choisissez une métrique, saisissez un seuil après p75 au-dessus de, cochez les canaux d'alerte sous Prévenir et cliquez sur Ajouter une alerte. Vous pouvez ajouter jusqu'à 5 alertes par site. Chacune est vérifiée toutes les heures sur aujourd'hui et hier (UTC), dès qu'au moins 30 pages vues sont mesurées. Vous recevez un message quand le p75 passe au-dessus du seuil et un autre quand il repasse en dessous. Les alertes partent vers les canaux d'alerte de votre équipe.

Marqueurs de déploiement

Pour voir vos mises en production sur le graphique quotidien, envoyez un marqueur avec la clé du site (la valeur data-site du snippet) comme configId :

curl -X POST "https://speed.loadfocus.com/api/test/applighthouse/annotations" \
  -H "loadfocus-auth: YOUR_API_KEY" -H "content-type: application/json" \
  -d '{"label":"Deployed v1.4.2","configId":"YOUR_SITE_KEY"}'

Les marqueurs envoyés sans configId apparaissent sur tous les sites et moniteurs. Plus de détails dans Blocage des builds en CI et marqueurs de déploiement.

Limites

Les pages vues sont comptées par équipe. La page indique combien vous en avez utilisé ce mois-ci. Une fois la limite atteinte, les nouvelles pages vues ne sont plus comptées jusqu'au mois suivant.

Pour changer le nom ou les noms d'hôte d'un site, utilisez Modifier le site. Supprimer le site supprime le site et toutes ses données.

Connexe

• Données de terrain réelles (CrUX)
• Métriques Core Web Vitals
• Largest Contentful Paint