Gebruik het prestatiepaneel om de prestaties van uw website te analyseren.
Overzicht
In het Prestatiepaneel kunt u CPU-prestatieprofielen van uw webapplicaties vastleggen. Analyseer profielen om potentiële knelpunten in de prestaties te vinden en manieren waarop u het gebruik van resources kunt optimaliseren.
Gebruik het paneel Prestaties om het volgende te doen:
- Leg een prestatieprofiel vast.
- Wijzig de opname-instellingen.
- Analyseer een prestatierapport.
Zie Runtimeprestaties analyseren voor een uitgebreide handleiding over het verbeteren van de prestaties van uw website.
Open het Prestatiepaneel
Om het Prestatiepaneel te openen, opent u DevTools en selecteert u Prestaties in een reeks tabbladen bovenaan.
U kunt ook deze stappen volgen om het paneel Prestaties te openen via het menu Commando :
- Open DevTools .
- Open het Commandomenu door op te drukken:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P
- Begin met het typen van
Performance panel
, selecteer Prestatiepaneel weergeven en druk op Enter .
Observeer Core Web Vitals live
Wanneer u het Prestatiepaneel opent, worden uw lokale Largest Contentful Paint (LCP) en Cumulative Layout Shift (CLS) -statistieken onmiddellijk vastgelegd en weergegeven, zodat u hun score kunt zien (goed, moet worden verbeterd of slecht).
Als u interactie heeft met uw pagina, legt het Prestatiepaneel ook uw lokale Interaction to Next Paint (INP) en de bijbehorende score vast, waardoor u, naast LCP en CLS, een compleet overzicht krijgt van de kernwebvitaliteit van uw pagina via uw netwerkverbinding en apparaat.
Het Prestatiepaneel biedt een lijst met vastgelegde interacties onder de drie metrische kaarten. Om de lijst te wissen, klikt u op
Wissen .Voor een overzicht van de score van een statistiek beweegt u de muis over de statistiekwaarde om knopinfo te zien.
Vergelijk uw ervaring met de ervaring van uw gebruikers
U kunt ook veldgegevens ophalen uit het Chrome UX-rapport en de ervaring van de gebruikers van uw site vergelijken met uw lokale statistieken.
Veldgegevens toevoegen:
Klik in Prestatie > Volgende stappen > Veldgegevens op Instellen .
Let in het dialoogvenster Ophalen van veldgegevens configureren op de Privacyverklaring en klik op Ok .
Geavanceerd: Een mapping instellen tussen ontwikkel- en productieomgevingen...
Om automatisch de meest relevante veldgegevens te verkrijgen, kunt u optioneel (meerdere) mappings instellen tussen uw ontwikkelings- en productieoorsprong:
- Vouw in het dialoogvenster de sectie Geavanceerd uit en klik op + Nieuw .
Voer in de toewijzingstabel uw ontwikkelings- en productie-URL's in en klik op + .
Een toewijzing van
http://localhost:8080
aanhttps://example.com
zal bijvoorbeeld veldgegevens weergeven,example.com/page1
wanneer u naarlocalhost:8080/page1
navigeert.Als u de veldgegevens om wat voor reden dan ook niet automatisch kunt ophalen, kunt u
Altijd veldgegevens weergeven voor de onderstaande URL inschakelen en een URL opgeven. Het prestatiepaneel probeert eerst veldgegevens voor deze URL op te halen en toont u vervolgens deze veldgegevens, ongeacht naar welke pagina u navigeert.Als u de instellingen voor het ophalen van veldgegevens na de configuratie wilt wijzigen, klikt u op Perceelgegevens > Configureren
Nu het ophalen van veldgegevens is ingesteld, toont het prestatiepaneel u nu een vergelijking tussen uw lokale statistische scores en de scores die uw gebruikers ervaren. De verzamelperiode ziet u rechts onder Veldgegevens .
Om een uitsplitsing van een statistiekscore te krijgen, beweegt u de muis over de statistiekwaarde om knopinfo te zien.
Configureer uw omgeving zodat deze beter aansluit bij die van uw gebruikers
Als het ophalen van veldgegevens is ingesteld zoals beschreven in de vorige sectie, biedt het paneel Prestaties u aanbevelingen over hoe u uw omgeving kunt configureren zodat deze beter aansluit bij de ervaring van uw gebruikers.
Om uw omgeving te configureren:
Vouw op elke metrische kaart de sectie Overweeg uw lokale testomstandigheden uit, indien aanwezig, en lees de aanbevelingen.
Het lijkt erop dat u in dit voorbeeld, om beter aan te sluiten bij de ervaring van uw gebruikers, een gewone desktopschermgrootte wilt gebruiken en de CPU en het netwerk wilt vertragen.
Om overeen te komen met de omgevingsconfiguratie voor dit voorbeeld:
- Stel uw viewport in op een van de gebruikelijke schermformaten (bijvoorbeeld 720p of 1080p). Om specifieke apparaten en schermformaten te emuleren, kunt u de Apparaatmodus in het paneel Elementen gebruiken.
- 82% van de gebruikers van de website in dit voorbeeld gebruikt desktops om te browsen. Om er zeker van te zijn dat u uw lokale metrische scores vergelijkt met de juiste veldgegevens, kunt u Bureaublad selecteren in de vervolgkeuzelijst Veldgegevens > Apparaat .
- Stel in het gedeelte Omgevingsinstellingen de vervolgkeuzelijst Netwerk in op bijvoorbeeld Snel 4G en CPU op bijvoorbeeld 20x vertraging . U kunt er ook voor zorgen dat u in dezelfde sectie het vakje Netwerkcache uitschakelen .
Zorg ervoor dat uw omgeving is geconfigureerd, laad de pagina opnieuw, communiceer ermee om uw lokale INP vast te leggen en vergelijk de statistische scores opnieuw.
Het lijkt erop dat de statistische scores nu meer lijken op de scores die uw gebruikers ervaren. Dienovereenkomstig zijn de secties Overweeg uw lokale testomstandigheden verdwenen van de metrische kaarten.
Daarmee kunt u nu beginnen met het verbeteren van de Core Web Vitals van uw website:
Leg een prestatierapport vast en analyseer het
In de volgende secties volgt u de richtlijnen voor het opnemen van een profiel, het wijzigen van de opname-instellingen en het analyseren van het rapport.
Leg een prestatieprofiel vast
Wanneer u klaar bent om op te nemen, biedt het paneel Prestaties u de volgende opties:
- Registreer runtime-prestaties
- Registreer de laadprestaties
- Maak screenshots tijdens het opnemen
- Forceer afvalinzameling tijdens het opnemen
- Bewaar een opname
- Laad een opname
- Wis een opname
Wijzig de opname-instellingen
Met de opname-instellingen kunt u wijzigen hoe DevTools prestatieregistraties vastlegt en kunt u aanvullende informatie in het rapport krijgen. Klik op
voor opname-instellingen om het menu Instellingen voor opname te openen.Selecteer de volgende opties in het menu Opname-instellingen :
- JavaScript-voorbeelden uitschakelen : Schakelt de opname uit van de JavaScript-aanroepstacks die worden weergegeven in de hoofdtrack en die worden aangeroepen tijdens de opname. Zal de prestatieoverhead verminderen.
- Geavanceerde verfinstrumentatie inschakelen (langzaam) : legt geavanceerde verfinstrumentatie vast. Belemmert de prestaties aanzienlijk.
- CSS-selectorstatistieken inschakelen (langzaam) : legt CSS-selectorstatistieken vast. Belemmert de prestaties aanzienlijk.
- CPU-beperking : Simuleer lagere CPU-snelheden.
- Netwerkbeperking : Simuleer lagere netwerksnelheden.
- Hardware-concurrency : Configureer de waarde die wordt gerapporteerd door
navigator.hardwareConcurrency
.
Analyseer een prestatierapport
Zie Een uitvoeringsopname analyseren voor een complete handleiding over het gebruik van het deelvenster Prestaties .
Hieronder vindt u een groep onderwerpen uit de gids, plus andere nuttige documentatie:
Zo leert u hoe u door het rapport navigeert:
Om te leren hoe u zich kunt concentreren op wat belangrijk is voor uw workflow:
- Verander de volgorde van de nummers en verberg ze
- Verberg functies en hun kinderen in de vlammengrafiek
- Maak broodkruimels en spring tussen zoomniveaus
Voor meer informatie over de tabbladen Bottom-up, Oproepboom en Gebeurtenislogboek:
Zo leert u hoe u het rapport analyseert:
- Bekijk hoofdthreadactiviteit
- Lees het vlammendiagram
- Bekijk een schermafdruk
- Bekijk geheugenstatistieken
- Bekijk de duur van een gedeelte van een opname
- Analyseer de prestaties van de CSS-selector tijdens stijlherberekeningsgebeurtenissen
- Profileer de prestaties van Node.js met het paneel Prestaties
- Analyseer frames per seconde (FPS)
- Referentie van tijdlijngebeurtenissen
Verbeter de prestaties met deze panelen
Ontdek andere panelen waarmee u de prestaties van uw website kunt verbeteren:
- Lighthouse: Optimaliseer de snelheid van de website
- Geheugen: Overzicht geheugenpaneel
- Prestatie-inzichten: krijg bruikbare inzichten in de prestaties van uw website
- Rendering: Ontdek problemen met renderingprestaties
- Problemen: problemen opsporen en oplossen
- Prestaties: informatie over lagen bekijken