Gebruik het paneel Prestatie-inzichten om bruikbare en op gebruiksscenario's gebaseerde inzichten te verkrijgen in de prestaties van uw website.
Overzicht
Met het paneel 'Prestatie-inzichten ' kunt u het volgende doen:
- Registreer en meet de laadprestaties van webpagina's .
- Bekijk de prestatiegegevens van Web Vitals .
- Bekijk de netwerkactiviteit .
- Simuleer lagere CPU- en netwerksnelheden.
- Opnames importeren en exporteren.
Waarom een nieuw paneel?
Het nieuwe Performance Insights -paneel is een experiment om de volgende drie pijnpunten voor ontwikkelaars aan te pakken bij het werken met het bestaande Performance- paneel:
- Te veel informatie . Dankzij de vernieuwde gebruikersinterface stroomlijnt het paneel met prestatie-inzichten de gegevens en toont het alleen relevante informatie.
- Het is lastig om onderscheid te maken tussen gebruiksscenario's . Het paneel 'Prestatie-inzichten' ondersteunt analyses op basis van gebruiksscenario's. Momenteel ondersteunt het alleen het gebruiksscenario 'pagina laden', maar er zullen in de toekomst meer scenario's worden toegevoegd op basis van uw feedback , bijvoorbeeld interactiviteit .
- Vereist diepgaande kennis van de werking van browsers om effectief te kunnen gebruiken . Het paneel 'Prestatie-inzichten ' belicht de belangrijkste inzichten in het paneel 'Inzichten ', met bruikbare feedback over hoe problemen op te lossen.
Invoering
Deze handleiding leert u hoe u de laadprestaties van uw pagina kunt meten en begrijpen met het paneel Prestatie-inzichten . Lees verder of bekijk de videoversie van deze handleiding hierboven.
Open het paneel 'Prestatie-inzichten'
- Open DevTools .
Klik op Meer opties > Meer tools > Prestatie-inzichten .
U kunt ook het opdrachtmenu gebruiken om het paneel met prestatie-inzichten te openen.
Recordprestatie
Het paneel met prestatiegegevens kan algemene prestaties en gebruiksspecifieke prestaties (bijvoorbeeld laadtijd van een pagina) registreren.
- Open deze demopagina in een nieuw tabblad en open vervolgens het paneel 'Prestatie-inzichten' op de pagina.
Je kunt de netwerk- en CPU-belasting tijdens het opnemen beperken. Vink voor deze handleiding 'Cache uitschakelen' aan en stel de CPU-snelheid in op 4x lager in het下拉菜单 (dropdownmenu):
Klik op 'Pagina laden '. DevTools registreert prestatiegegevens terwijl de pagina opnieuw laadt en stopt de registratie automatisch een paar seconden nadat het laden van de pagina is voltooid.
Speel een uitvoeringsopname opnieuw af.
Gebruik de bedieningselementen onderaan om het afspelen van uw opname te regelen.
Hier volgt een voorbeeld van hoe je dat kunt doen.
- Klik op om de opname af te spelen.
- Klik op Pauze de weergave te pauzeren.
- Pas de afspeelsnelheid aan met het下拉菜单 (dropdownmenu).
- Klik op om het visuele voorbeeld weer te geven of te verbergen.
Navigeer door een opname van een optreden
DevTools zoomt automatisch uit om de volledige opnametijdlijn weer te geven. Je kunt door de opname navigeren met de zoomfunctie en de tijdlijn verplaatsen.
Om in te zoomen en de tijdlijn naar links en rechts te verschuiven, gebruikt u de bijbehorende navigatieknoppen:
- Klik op de tijdlijn om de afspeelkop te verplaatsen en een specifiek frame te bekijken.
- Klik op de knoppen ' en onderaan om in te zoomen. In dit geval zoomt u in op basis van de afspeelpositie.
- Sleep de horizontale schuifbalk onderaan om de tijdlijn naar links en rechts te verplaatsen.
U kunt ook toetsenbord sneltoetsen gebruiken. Klik op de om de sneltoetsen te bekijken. 
Bij gebruik van sneltoetsen zoomt u in op basis van uw muiscursor.
Bekijk prestatie-inzichten
Bekijk 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 hoofdpagina's te markeren.
Klik op een inzicht, bijvoorbeeld het render-blocking verzoek, om het in het detailvenster te openen. Om het probleem beter te begrijpen, kunt u de secties Bestand , Probleem , Oplossing en meer raadplegen.
Bekijk de prestatiegegevens van Web Vitals
Web Vitals is een initiatief van Google om uniforme richtlijnen te bieden voor kwaliteitsindicatoren die essentieel zijn voor een optimale gebruikerservaring op het web.
Je kunt deze statistieken bekijken in het deelvenster Tijdlijn en inzichten .
Beweeg de muis over de inzichten in de tijdlijn om meer te weten te komen over de statistieken.
Ontdek de vertragingen van de grootste inhoudelijke verf.
Largest Contentful Paint (LCP) is een van de Core Web Vitals- statistieken. Deze geeft de weergavetijd weer van het grootste zichtbare afbeeldings- of tekstblok binnen het weergavegebied, ten opzichte van het moment waarop de pagina voor het eerst begon te laden.
Een goede LCP-score is 2,5 seconden of minder.
Als het grootste, meest inhoudelijke element op uw pagina langer nodig heeft om te renderen, ziet u in de tijdlijn het LCP-logo met een geel vierkantje of een rode driehoek.
Om het detailvenster te openen, klikt u op het LCP-pictogram in de tijdlijn of in het inzichtenvenster aan de rechterkant. In dit venster kunt u mogelijke oorzaken van de vertragingen ontdekken en suggesties vinden om deze op te lossen.
In dit voorbeeld blokkeert een verzoek de weergave en kunt u kritieke stijlen inline toepassen om dit op te lossen. Zie Renderblokkerende resources verwijderen voor meer informatie.
Om de onderdelen van de LCP-rendertijd te bekijken, scrollt u naar beneden naar het gedeelte Details > Tijdschema .
De LCP-renderingstijd bestaat uit de volgende onderdelen:
| LCP-onderdeel | Beschrijving |
|---|---|
| Tijd tot eerste byte (TTFB) | De tijd die verstrijkt tussen het moment dat de gebruiker de pagina laadt en het moment dat de browser de eerste byte van het HTML-document ontvangt. |
| Vertraging bij het laden van resources | Het verschil tussen TTFB en het moment waarop de browser de LCP-bron begint te laden. |
| Laadtijd van de resources | De tijd die nodig is om de LCP-bron zelf te laden. |
| Vertraging bij het weergeven van elementen | Het tijdsverschil tussen het moment dat de LCP-bron volledig is geladen en het moment dat het LCP-element volledig is weergegeven. |
Als een LCP-element geen resource-lading vereist om te renderen, worden de resource-laadvertraging en -tijd weggelaten. Bijvoorbeeld wanneer het element een tekstknooppunt is dat wordt weergegeven met een systeemlettertype.
De weergave van de lay-out verandert de activiteit.
Bekijk de activiteit met betrekking tot lay-outwijzigingen in het spoor Lay-outwijzigingen .
Lay-outwijzigingen worden gegroepeerd in een sessievenster . In het voorbeeld zijn er twee sessievensters. Tussen de sessievensters is ruimte.
Cumulatieve lay-outverschuivingen (CLS) is een van de belangrijkste Web Vitals- statistieken. Gebruik de track 'Lay-outverschuivingen' om potentiële problemen en oorzaken van lay-outverschuivingen te identificeren.
Begin bij het verbeteren van de CLS-metriek altijd met het grootste sessievenster. In ons voorbeeld is sessievenster 1 het grootste venster, gebaseerd op de achtergrondkleur en het niveau.
Klik op een schermafbeelding om de details van de lay-outwijziging te bekijken, mogelijke oorzaken te achterhalen en de getroffen elementen te identificeren.
In ons voorbeeld is de mogelijke oorzaak het gebruik van media met onjuiste afmetingen . Zie 'Cumulatieve lay-outverschuiving optimaliseren' voor meer informatie over het oplossen van dit probleem.
Inzicht in de impact van lay-outverschuivingen op de score
Om te begrijpen hoe de scores worden berekend, gebruikt u het gedeelte 'Venster' in het deelvenster 'Details' . In ' Venster' wordt weergegeven bij welk sessievenster de huidige lay-outwijziging hoort.
Als de hele pagina wordt verschoven, is de maximale score voor elke lay-outverschuiving 1 In ons voorbeeld scoorde de eerste lay-outverschuiving 0.15 . De tweede lay-outverschuiving scoorde 0.041 .
De totale score voor dit sessievenster is 0.19 . Op basis van de CLS-drempelwaarde is verbetering nodig. De achtergrondkleur van het sessievenster weerspiegelt dit.
De grafiek van de achtergrond van het sessievenster neemt in de loop van de tijd toe. De cumulatieve score van de lay-outverschuiving weerspiegelt de toename op dat moment.
Bekijk netwerkactiviteit
Bekijk de netwerkactiviteit in het netwerkoverzicht . U kunt het netwerkoverzicht uitbreiden 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 de GPU-activiteit in het GPU- overzicht. Het GPU-overzicht is standaard verborgen. Om het in te schakelen, vinkt u GPU aan in de instellingen .
Gebruikerstijden bekijken
Om aangepaste prestatiemetingen te verkrijgen, kunt u Gebruikerstiming gebruiken en uw tijden visualiseren met de Timing- track. Zie de Gebruikerstiming API voor meer informatie.
Bekijk deze demopagina die de laadtijd van tekst berekent.
Om de tijden van gebruikers te bekijken:
- Markeer bepaalde gedeeltes in je applicatie met
performance.mark(). - Meet de verstreken tijd tussen markeringen met
performance.measure(). - Recordprestatie .
- Bekijk de metingen op de tijdregistratie . Als je de registratie niet ziet, controleer dan de gebruikerstijden in de instellingen .
- Klik op de tijdsaanduiding op het circuit om de details te bekijken.
De gebruikersinterface aanpassen
Om de tijdlijn en tracks aan te passen, klikt u op het instellingenpictogram het paneel en selecteert u de gewenste opties.
Een opname exporteren
Om een opname op te slaan, klikt u op exporteren '.
Een opname importeren
Om een opname te laden, selecteer je 'Importeren' > ' .
Een opname verwijderen
Om een opname te verwijderen:
- Klik op Verwijderen Er verschijnt een bevestigingsvenster.
- Klik in het dialoogvenster op Verwijderen om de verwijdering te bevestigen.