Orbit
Kapsule Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Orbit Web Vitals
L'onglet Web Vitals rapporte les Core Web Vitals collectés auprès des vrais visiteurs de votre projet plutôt que d'un test synthétique, donc ce que vous voyez est ce que les gens vivent réellement sur leurs appareils et connexions.
Où se trouvent les Web Vitals
Ouvrez Orbit, cliquez sur le projet, et choisissez Web Vitals sous le groupe Observability dans la bande d'onglets du projet. La page s'intitule Web Vitals et explique son propre nombre en titre : p75 est le score utilisé pour Page Experience.
Tant que vous n'ajoutez pas le collecteur à votre site, la page n'a rien à afficher, alors commencez par la carte de configuration en bas.
Ajouter le Collecteur
La carte de configuration vous donne une balise script d'une ligne à ajouter au <head> de votre site :
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
La ligne exacte, avec le slug de votre projet déjà rempli, se trouve sur la page. Copiez-la de là plutôt que de la taper.
Le script collecte cinq métriques quand les visiteurs quittent chaque page, et les rapporte en un seul lot. Aucune information personnellement identifiable n'est capturée et aucun cookie n'est défini, donc il n'ajoute pas lui-même d'obligation de consentement.
Les données commencent à apparaître environ trente secondes après la première visite de page réelle. Si rien ne s'affiche après cela, le script ne se charge pas : vérifiez l'onglet réseau de votre navigateur sur le site en direct.
Une deuxième copie du même collecteur est proposée sous Settings, dans la carte Web Analytics, qui se charge à partir du domaine du panneau et se place avant la balise </body> fermante. L'une ou l'autre fonctionne et les deux alimentent les mêmes données. Utilisez-en une seule, pas les deux, sinon chaque visite de page est comptabilisée deux fois.
Les Cinq Métriques
| Métrique | Ce qu'elle mesure |
|---|---|
| LCP | Largest Contentful Paint : combien de temps jusqu'à ce que le contenu principal soit visible |
| INP | Interaction to Next Paint : à quelle vitesse la page répond à l'entrée |
| CLS | Cumulative Layout Shift : de combien la mise en page saute en chargeant |
| FCP | First Contentful Paint : combien de temps jusqu'à ce que quelque chose soit dessiné |
| TTFB | Time to First Byte : combien de temps le serveur a pris pour commencer à répondre |
Les trois premiers sont les Core Web Vitals proprement dits. FCP et TTFB sont diagnostiques : ils vous disent si un mauvais LCP vient d'un serveur lent ou d'une page lente.
Lire p75
Chaque chiffre sur cette page est un p75, pas une moyenne, sur les échantillons dans la fenêtre sélectionnée. Les trois quarts de vos visiteurs ont eu une expérience au moins aussi bonne ; un quart l'a eu plus mauvaise.
Ce choix a de l'importance. Une moyenne est dominée par les nombreuses visites rapides sur de bonnes connexions et cache la queue. Un p75 ne le fait pas : si votre p75 LCP est de quatre secondes, un visiteur sur quatre attend plus longtemps que cela.
Chaque carte de métrique porte une note de Bon, Nécessite une amélioration ou Mauvais, ainsi que le nombre d'échantillons à partir duquel elle a été calculée. Pour LCP, la page énonce les limites directement : bon est 2500 ms ou moins, et mauvais est plus de 4000 ms.
Traitez toute carte avec un petit nombre d'échantillons avec suspicion. Un p75 sur une douzaine d'échantillons est du bruit. Élargissez la fenêtre avec le sélecteur en haut de la page, ou attendez plus de trafic, avant d'agir.
Le Graphique de Tendance
Le graphique de tendance trace le p75 quotidien pour LCP et CLS dans la fenêtre sélectionnée, avec les seuils bon et mauvais marqués. Le sous-titre vous indique ce que vous recherchez : les lignes plates sont saines.
Un changement brutal un jour précis est le signal utile, car il s'aligne presque toujours avec un déploiement. Vérifiez la date par rapport à l'onglet Deployments, ou marquez l'événement sur la chronologie du projet pour qu'il soit annoté la prochaine fois : voir Orbit Timeline Annotations.
Une lente dérive vers le haut sur des semaines est un problème différent, généralement un poids de page accumulé plutôt qu'un changement unique.
Pays Principaux
Top countries affiche le volume d'échantillons par pays, dérivé des en-têtes de bord. C'est là pour le contexte plutôt que pour l'analyse : un p75 qui semble mauvais globalement s'avère souvent bon pour votre marché principal et dominé par un public plus petit et plus éloigné.
Si la plupart de votre trafic est loin de votre origine, c'est un argument pour mettre en cache plus agressivement à la périphérie plutôt que d'optimiser davantage votre code.
Pages Nécessitant une Attention
La table Pages needing attention classe les chemins par la distance de leur p75 au-dessus du seuil bon pour chaque métrique, avec le nombre d'échantillons pour chaque ligne.
Travaillez sur cette table plutôt que d'essayer d'améliorer l'ensemble du site. Deux ou trois modèles représentent généralement la plupart du problème, et corriger un modèle corrige chaque page qui l'utilise.
Les causes courantes, dans l'ordre dans lequel elles valent la peine d'être vérifiées :
- Une image de héros qui n'est pas dimensionnée ou préchargée. C'est le problème LCP le plus fréquent de loin.
- Un script tiers bloquant le thread principal. Les widgets de chat, les gestionnaires de balises et les piles d'analyse sont les suspects habituels, et ils nuisent surtout à INP.
- Des images et des intégrations sans dimensions. Ils provoquent le saut de la mise en page en chargeant, ce que mesure exactement CLS.
- Une réponse d'origine lente. Si TTFB est mauvais, rien de ce qui précède ne vous sauvera ; la solution est la mise en cache ou une réponse plus rapide, pas du travail frontal.
Aucun Échantillon Dans Cette Fenêtre
Si la page indique qu'il n'y a pas d'échantillons, l'une de ces trois choses est vraie :
- Le collecteur n'a pas été ajouté, ou ne se charge pas sur les pages que les gens visitent.
- Il a été ajouté récemment et personne n'a encore visité.
- La fenêtre sélectionnée est plus courte que l'écart depuis votre dernier trafic.
Élargissez d'abord la fenêtre, puisque c'est gratuit, puis vérifiez que le script est présent dans le HTML servi du site en direct plutôt que seulement dans votre source.
Combien de Temps les Données Sont Conservées
Les échantillons individuels sont supprimés automatiquement une fois qu'ils ont 30 jours, par un travail nocturne. Le sélecteur de fenêtre vous permet de regarder à travers l'historique conservé ; il n'y a pas d'archive au-delà.
Si vous avez besoin d'un enregistrement à long terme, prenez une capture d'écran ou notez les valeurs p75 à un moment donné, par exemple juste avant et juste après un projet de performance, afin d'avoir un avant et après que vous puissiez citer plus tard.
Vitals Sur la Page de Statut Public
Si vous publiez une page de statut pour le projet, elle peut afficher le même résumé Core Web Vitals à vos visiteurs, aux côtés du temps de disponibilité et des déploiements récents. Voir Orbit Status Page.
Où Aller Ensuite
- Orbit Project Analytics pour les chiffres côté compilation et un résumé vitals condensé.
- Orbit Timeline Annotations pour marquer les déploiements et incidents derrière un changement brutal.
- Website Speed pour des conseils généraux de performance.