Gebruik het paneel Prestatie-inzichten om bruikbare en gebruiksgerichte inzichten te krijgen over de prestaties van uw website.
Waarom een nieuw paneel?
Het nieuwe paneel Prestatie-inzichten is een experiment om deze drie pijnpunten voor ontwikkelaars aan te pakken bij het werken met het bestaande paneel Prestaties :
- Te veel informatie . Met de opnieuw ontworpen gebruikersinterface stroomlijnt het paneel Prestatie-inzichten de gegevens en wordt alleen relevante informatie weergegeven.
- Moeilijk onderscheid te maken tussen gebruiksscenario's . Het paneel Prestatie-inzichten ondersteunt use-case-gestuurde analyses. Het ondersteunt momenteel alleen de use-case voor het laden van pagina's, en er zullen er in de toekomst nog meer volgen op basis van uw feedback , bijvoorbeeld interactiviteit .
- Vereist diepgaande kennis van de manier waarop browsers werken om effectief te kunnen gebruiken . Het paneel Prestatie-inzichten belicht de belangrijkste inzichten in het deelvenster Inzichten , met bruikbare feedback over hoe u problemen kunt oplossen.
Invoering
In deze zelfstudie leert u hoe u de laadprestaties van uw pagina's kunt meten en begrijpen met het paneel Prestatie-inzichten . Lees verder of bekijk de videoversie van deze tutorial hierboven.
Open het paneel Prestatie-inzichten
- Open DevTools .
Klik op Meer opties > Meer tools > Prestatie-inzichten .
U kunt ook het Commandomenu gebruiken om het paneel Prestatie-inzichten te openen.
Recordprestaties
Het paneel Prestatie-inzichten kan algemene en gebruiksgerichte prestaties (bijvoorbeeld het laden van pagina's) registreren.
- Open deze demopagina op een nieuw tabblad en open op de pagina het paneel Prestatie-inzichten .
U kunt het netwerk en de CPU vertragen tijdens het opnemen. Voor deze zelfstudie vinkt u Cache uitschakelen aan en stelt u de CPU in op 4x vertraging in het vervolgkeuzemenu:
Klik op Meet de paginalading . DevTools registreert prestatiestatistieken terwijl de pagina opnieuw wordt geladen en stopt vervolgens automatisch de opname een paar seconden nadat het laden van de pagina is voltooid.
Een uitvoeringsopname opnieuw afspelen
Gebruik de bedieningselementen onderaan om het afspelen van uw opname te regelen.
Hier is een voorbeeld van hoe u het moet doen.
- Klik op Play om de opname af te spelen.
- Klik op Pauze om de herhaling te pauzeren.
- Pas de afspeelsnelheid aan met de vervolgkeuzelijst.
- Klik op Schakel visueel voorbeeld in om het visuele voorbeeld weer te geven of te verbergen.
Navigeer door een uitvoeringsopname
DevTools zoomt automatisch uit om de volledige opnametijdlijn weer te geven. U kunt met zoom door de opname navigeren en de tijdlijn verplaatsen.
Gebruik de bijbehorende navigatieknoppen om in te zoomen en de tijdlijn naar links en rechts te verplaatsen:
- Klik op de tijdlijn om de afspeelkop te verplaatsen en een bepaald frame weer te geven.
- Klik op de knoppen Inzoomen en Uitzoomen onderaan om in te zoomen. In dit geval zoom je in op basis van de afspeelkop.
- Sleep de horizontale schuifbalk onderaan om de tijdlijn naar links en rechts te verplaatsen.
Als alternatief kunt u sneltoetsen gebruiken. Klik op de om de snelkoppelingen te bekijken. 
Wanneer u snelkoppelingen gebruikt, zoomt u in op basis van uw muiscursor.
Bekijk prestatie-inzichten
Krijg een lijst met prestatie-inzichten in het deelvenster Inzichten . Identificeer en los potentiële prestatieproblemen op.
Beweeg de muis over elk van de inzichten om ze op de hoofdtracks te markeren.
Klik op een inzicht, bijvoorbeeld de weergaveblokkeringsaanvraag, om deze te openen in het detailvenster . Om het probleem verder te begrijpen, bekijkt u de secties Bestand , Probleem , Hoe op te lossen en meer.
Bekijk de prestatiestatistieken van Web Vitals
Web Vitals is een initiatief van Google om uniforme begeleiding te bieden voor kwaliteitssignalen die essentieel zijn voor het leveren van een geweldige gebruikerservaring op internet.
U kunt deze statistieken bekijken in het deelvenster Tijdlijn en inzichten .
Beweeg de muis over de inzichten op de tijdlijn voor meer informatie over de statistieken.
Ontdek vertragingen van de grootste inhoudsvolle verf
Largest Contentful Paint (LCP) is een van de Core Web Vitals- statistieken. Het rapporteert de weergavetijd van de grootste afbeelding of tekstblok die zichtbaar is in de viewport, ten opzichte van het moment waarop de pagina voor het eerst werd geladen.
Een goede LCP-score is 2,5 seconden of minder.
Als het langer duurt om de grootste inhoudsvolle verf op uw pagina weer te geven, ziet u in de tijdlijn de LCP-badge met een geel vierkant of een rode driehoek.
Om het deelvenster Details te openen, klikt u op de LCP-badge op de tijdlijn of in het deelvenster Inzichten aan de rechterkant. In het deelvenster kunt u mogelijke oorzaken voor de vertragingen ontdekken en suggesties geven voor het oplossen ervan.
In dit voorbeeld blokkeert een verzoek de weergave en kunt u essentiële stijlen inline toepassen om dit probleem op te lossen. Zie Bronnen die het renderen blokkeren elimineren voor meer informatie.
Om de subonderdelen van de LCP-rendertijd te bekijken, scrolt u omlaag naar de sectie Details > Uitsplitsing van timing .
De LCP-rendertijd bestaat uit de volgende subonderdelen:
| LCP-subonderdeel | Beschrijving |
|---|---|
| Tijd tot eerste byte (TTFB) | De tijd vanaf het moment waarop de gebruiker begint met het laden van de pagina tot het moment waarop de browser de eerste byte van het HTML-documentantwoord ontvangt. |
| Vertraging bij het laden van bronnen | Het verschil tussen TTFB en het moment waarop de browser de LCP-bron begint te laden. |
| Laadtijd van bronnen | De tijd die nodig is om de LCP-resource zelf te laden. |
| Elementweergavevertraging | Het verschil tussen het moment waarop de LCP-bron klaar is met laden totdat het LCP-element volledig is weergegeven. |
Als een LCP-element geen bronbelasting vereist om te renderen, worden de vertraging en tijd voor het laden van de bron weggelaten. Als het element bijvoorbeeld een tekstknooppunt is dat wordt weergegeven met een systeemlettertype.
Bekijk de activiteit van lay-outverschuivingen
Bekijk de activiteit van lay-outverschuivingen op het spoor Lay-outverschuivingen .
Lay-outverschuivingen worden gegroepeerd in een sessievenster . In het voorbeeld zijn er twee sessievensters. Er zitten gaten tussen de sessievensters.
Cumulatieve lay-outverschuivingen (CLS) is een van de belangrijkste webvitaliteitsstatistieken . Gebruik het spoor Lay-outverschuivingen om mogelijke problemen en oorzaken van lay-outverschuivingen te identificeren.
Begin altijd met het grootste sessievenster bij het verbeteren van de CLS-metriek. In ons voorbeeld is sessievenster 1 het grootste venster, gebaseerd op de achtergrondkleur en het niveau.
Klik op een screenshot om de details van de lay-outverschuiving te bekijken en mogelijke hoofdoorzaken en getroffen elementen te identificeren.
In ons voorbeeld is de mogelijke hoofdoorzaak niet-gedimensioneerde media . Zie Cumulatieve lay-outverschuiving optimaliseren voor meer informatie over hoe u dit kunt oplossen.
Begrijp de score van lay-outverschuivingen
Om te begrijpen hoe de scores worden berekend, gebruikt u de sectie Venster in het deelvenster Details . In het venster wordt weergegeven tot welk sessievenster de huidige lay-outverschuiving behoort.
Als de hele pagina wordt verschoven, is de maximale score van elke lay-outverschuiving 1 . In ons voorbeeld scoorde de eerste lay-outverschuiving 0.15 . De tweede indelingsverschuiving scoorde 0.041 .
De totaalscore voor dit sessievenster is 0.19 . Op basis van de CLS-drempel is verbetering nodig. De achtergrondkleur van het sessievenster weerspiegelt hetzelfde.
De achtergrondgrafiek van het sessievenster neemt in de loop van de tijd toe. De cumulatieve score van de lay-outverschuiving weerspiegelt de toename op dat moment.
Netwerkactiviteit bekijken
Bekijk netwerkactiviteit in de netwerktrack . U kunt de netwerktrack uitvouwen om alle netwerkactiviteiten te bekijken en op elk item klikken om de details te bekijken.
Rendereractiviteit bekijken
Bekijk de renderactiviteit in het Renderer -spoor. U kunt elke renderer uitvouwen om de activiteiten te bekijken en op elk item klikken om de details te bekijken.
Bekijk GPU-activiteit
Bekijk GPU-activiteit in de GPU- track. De GPU-track is standaard verborgen. Om dit in te schakelen, vinkt u GPU aan in Instellingen .
Bekijk gebruikerstimings
Om aangepaste prestatiemetingen te krijgen, kunt u User Timing gebruiken en uw timings visualiseren met de Timing- track. Zie de User timing API voor meer informatie.
Bekijk deze demopagina die de verstreken tijd voor het laden van tekst berekent.
Gebruikerstimings bekijken:
- Markeer plaatsen in uw toepassing met
performance.mark(). - Meet de verstreken tijd tussen markeringen met
performance.measure(). - Recordprestaties .
- Bekijk de metingen op de Timings track. Als je de track niet kunt zien, controleer dan de Gebruikerstiming in Instellingen .
- Om details te bekijken, klikt u op de timing op de track.
Pas de gebruikersinterface aan
Om de tijdlijn en sporen aan te passen, klikt u op het van het paneel en vinkt u de gewenste opties aan.
Exporteer een opname
Om een opname op te slaan, klikt u op Download .
Importeer een opname
Om een opname te laden, selecteert u importeren .
Verwijder een opname
Een opname verwijderen:
- Klik op Verwijderen . Er wordt een bevestigingsvenster geopend.
- Klik in het dialoogvenster op Verwijderen om de verwijdering te bevestigen.