Orbit
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…
Het tabblad Web Vitals rapporteert Core Web Vitals die zijn verzameld van echte bezoekers van uw project in plaats van van een synthetische test. Wat u ziet, is dus wat mensen werkelijk ervaren op hun eigen apparaten en verbindingen.
Waar Web Vitals zich bevindt
Open Orbit, klik op het project en kies Web Vitals onder de groep Observability in de projecttabstrip. De pagina heet Web Vitals en verklaart zijn eigen kopnummer: p75 is de score die wordt gebruikt voor Page Experience.
Tot u de collector aan uw site toevoegt, heeft de pagina niets weer te geven. Begin dus met de instellingskaart onderaan.
De Collector toevoegen
De instellingskaart geeft u een eenregelige scripttag om aan uw <head> toe te voegen:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
De exacte regel, met de slug van uw project al ingevuld, staat op de pagina. Kopieer deze van daar in plaats van deze in te typen.
Het script verzamelt vijf metriek als bezoekers elke pagina verlaten en rapporteert deze in één batch. Er wordt geen persoonlijk identificeerbare informatie vastgelegd en er worden geen cookies ingesteld, dus het voegt geen toestemmingsvereiste van zichzelf toe.
Gegevens verschijnen binnen ongeveer dertig seconden na de eerste echte paginaweergave. Mocht er niets verschijnen, dan laadt het script niet: controleer het netwerktabblad van uw browser op de live site.
Er is een tweede kopie van dezelfde collector beschikbaar onder Settings, in de Web Analytics-kaart, die vanuit het paneeldomein laadt en voor de sluitende </body> tag gaat. Beide werken en voeden dezelfde gegevens. Gebruik er één, niet beide, anders wordt elke paginaweergave twee keer geteld.
De vijf metriek
| Metriek | Wat het meet |
|---|---|
| LCP | Largest Contentful Paint: hoe lang tot de hoofdinhoud zichtbaar is |
| INP | Interaction to Next Paint: hoe snel de pagina reageert op invoer |
| CLS | Cumulative Layout Shift: hoeveel de lay-out verschuift tijdens het laden |
| FCP | First Contentful Paint: hoe lang tot iets wordt getekend |
| TTFB | Time to First Byte: hoe lang de server erover deed om te reageren |
De eerste drie zijn de eigenlijke Core Web Vitals. FCP en TTFB zijn diagnostisch: ze vertellen u of een slechte LCP door een trage server of een trage pagina komt.
P75 lezen
Elk getal op deze pagina is een p75, geen gemiddelde, over de monsters in het geselecteerde venster. Drie kwart van uw bezoekers had minstens zo'n goede ervaring; een kwart had het slechter.
Die keuze is belangrijk. Een gemiddelde wordt gedomineerd door de vele snelle bezoeken op goede verbindingen en verbergt de staart. Een p75 doet dat niet: als uw p75 LCP vier seconden is, wacht één op de vier bezoekers langer dan dat.
Elke metriekekaart heeft een beoordeling van Goed, Verbetering nodig of Slecht, plus het aantal monsters waaruit het is berekend. Voor LCP geeft de pagina de grenzen direct aan: goed is 2500ms of minder, en slecht is meer dan 4000ms.
Wees voorzichtig met kaarten met een klein aantal monsters. Een p75 over een dozijn monsters is ruis. Verbreed het venster met de selector bovenaan de pagina, of wacht op meer verkeer, voordat u erop reageert.
Het trenddiagram
Het trenddiagram toont de dagelijkse p75 voor LCP en CLS over het geselecteerde venster, met de goede en slechte drempels gemarkeerd. De ondertitel vertelt u waar u naar moet zoeken: vlakke lijnen zijn gezond.
Een stapverandering op een specifieke dag is het nuttige signaal, omdat deze bijna altijd aansluit op een deploy. Controleer de datum tegen het tabblad Deployments, of markeer de gebeurtenis op de projecttijdlijn zodat deze de volgende keer wordt geannoteerd: zie Orbit Timeline Annotations.
Een langzame stijging over weken is een ander probleem, meestal geaccumuleerd paginagewicht in plaats van één enkele verandering.
Top landen
Top countries toont het volume van monsters per land, afgeleid van edge-headers. Het is daar voor context en niet voor analyses: een p75 die globaal slecht lijkt, blijkt vaak prima voor uw belangrijkste markt en wordt gedomineerd door een kleiner, verder weg publiek.
Als het meeste van uw verkeer ver van uw origin verwijderd is, is dat een argument voor meer agressieve caching aan de edge in plaats van verdere codeoptimalisatie.
Pagina's die aandacht nodig hebben
De tabel Pages needing attention rangschikt paden op basis van hoe ver hun p75 boven de goede drempel voor elke metriek ligt, met het aantal monsters voor elke rij.
Werk deze tabel af in plaats van te proberen de hele site te verbeteren. Twee of drie templates vormen meestal het grootste deel van het probleem, en het repareren van een template reparaert elke pagina die het gebruikt.
Veelvoorkomende oorzaken, in de volgorde waarin het de moeite waard is ze te controleren:
- Een hero-afbeelding die niet is geschaald of voorgeladen. Dit is verreweg het meest voorkomende LCP-probleem.
- Een externe script die de main thread blokkeert. Chat-widgets, tagmanagers en analytics-stacks zijn de gebruikelijke verdachten en zij schaffen INP het meest schade aan.
- Afbeeldingen en embeds zonder afmetingen. Deze veroorzaken dat de lay-out verschuift als zij laden, wat precies is wat CLS meet.
- Een trage origin-respons. Als TTFB slecht is, zal geen van het bovenstaande u helpen; de oplossing is caching of een sneller antwoord, niet frontend-werk.
Geen monsters in dit venster
Als de pagina zegt dat er geen monsters zijn, is een van de volgende drie dingen waar:
- De collector is niet toegevoegd, of laadt niet op de pagina's die bezoekers bezoeken.
- Het is onlangs toegevoegd en niemand heeft het nog bezocht.
- Het geselecteerde venster is korter dan de pauze sinds uw laatst bekende verkeer.
Verbreed het venster eerst, omdat dat gratis is, controleer vervolgens of het script aanwezig is in de geserveerde HTML van de live site en niet alleen in uw bron.
Hoe lang gegevens worden bewaard
Individuele monsters worden automatisch verwijderd zodra ze 30 dagen oud zijn, door een nachtelijke taak. Met de vensterkiezer kunt u door de bewaarde geschiedenis kijken; er is geen archief erbuiten.
Als u een langetermijnrecord nodig hebt, maak dan een schermafbeelding of noteer de p75-waarden op een moment in de tijd, bijvoorbeeld net voor en net na een prestatieproject, zodat u later een voor en na kunt aanquoten.
Vitals op de openbare statuspagina
Als u een statuspagina voor het project publiceert, kan deze dezelfde Core Web Vitals-samenvatting aan uw bezoekers tonen, samen met uptime en recente deploys. Zie Orbit Status Page.
Waar nu heen
- Orbit Project Analytics voor de getallen aan de build-kant en een verkorte vitals-samenvatting.
- Orbit Timeline Annotations om de deploys en incidenten achter een stapverandering te markeren.
- Website Speed voor algemeen prestatieadvies.