Prestatiepaneel: Analyseer de prestaties van uw website

Dale St. Marthe

Sofia Emelianova

Gebruik het paneel Prestaties om de prestaties van uw website te analyseren.

Overzicht

Met het paneel Prestaties kunt u CPU-prestatieprofielen van uw webapplicaties vastleggen. Analyseer de profielen om potentiële prestatieknelpunten te vinden en manieren te ontdekken om het resourcegebruik te optimaliseren.

Gebruik het paneel Prestaties om het volgende te doen:

• Leg een prestatieprofiel vast.
• Opname-instellingen wijzigen.
• Analyseer een prestatierapport.

Voor een uitgebreide handleiding over het verbeteren van de prestaties van uw website, raadpleegt u de pagina 'Runtimeprestaties analyseren' .

Open het paneel Prestaties

Om het paneel Prestaties te openen, opent u DevTools en selecteert u Prestaties in het tabbladmenu bovenaan.

U kunt het paneel Prestaties ook openen via het menu Opdrachten door de volgende stappen te volgen:

1. Open DevTools .
2. Open het Command-menu door op de volgende toets te drukken:
3. macOS: Command + Shift + P
4. Windows, Linux, ChromeOS: Control + Shift + P
5. Typ eerst Performance panel , selecteer 'Prestatiepaneel weergeven' en druk op Enter .

Bekijk Core Web Vitals live

Wanneer u het paneel Prestaties opent, worden direct uw lokale Largest Contentful Paint (LCP) en Cumulative Layout Shift (CLS) statistieken vastgelegd en weergegeven, inclusief hun score (goed, voor verbetering vatbaar of slecht).

Als u interactie hebt met uw pagina, registreert het Prestatiepaneel ook uw lokale Interaction to Next Paint (INP) en de bijbehorende score. Deze score geeft u, naast LCP en CLS, een compleet overzicht van de belangrijkste webstatistieken van uw pagina, rekening houdend met uw netwerkverbinding en apparaat.

Onder de drie meetkaarten in de tabbladen Interacties en Lay-outverschuivingen vindt u tabellen met informatie over vastgelegde interacties en lay-outverschuivingen, waaronder elementen, timing, fasen (voor interacties) en scores (voor lay-outverschuivingen). Om beide lijsten leeg te maken, klikt u op het blok Wissen .

Om een ​​gedetailleerdere weergave van een metrische score te krijgen, beweegt u de muis over de metrische waarde. Er verschijnt dan een tooltip.

Vergelijk jouw ervaring met de ervaring van je gebruikers.

Je kunt ook veldgegevens ophalen uit het Chrome UX-rapport en de ervaring van de gebruikers van je site vergelijken met je lokale statistieken.

Om veldgegevens toe te voegen:

1. Klik in Prestaties > Volgende stappen > Veldgegevens op Instellen .

   

2. In het dialoogvenster 'Gegevens ophalen van velden configureren' ziet u de privacyverklaring en klikt u op OK .

   Geavanceerd: Stel een koppeling in tussen de ontwikkel- en productieomgeving...

   Optioneel kunt u, om automatisch de meest relevante veldgegevens te verkrijgen, (meerdere) koppelingen instellen tussen uw ontwikkel- en productieomgevingen:

   1. Vouw in het dialoogvenster het gedeelte 'Geavanceerd' uit en klik op '+ Nieuw' .

   2. Voer in de mappingtabel uw ontwikkelings- en productie-URL's in en klik op + .

      

      Een voorbeeld: een koppeling van http://localhost:8080 naar https://example.com zal de veldgegevens voor example.com/page1 weergeven wanneer u naar localhost:8080/page1 navigeert.

      Als het om welke reden dan ook niet lukt om de veldgegevens automatisch op te halen, kunt u bovendien het selectievakje ' Altijd veldgegevens weergeven voor de onderstaande URL' inschakelen en een URL opgeven. Het prestatiepaneel zal dan eerst proberen de veldgegevens voor deze URL op te halen en deze vervolgens weergeven, ongeacht naar welke pagina u navigeert.

      Om uw instellingen voor het ophalen van veldgegevens na de configuratie te wijzigen, klikt u op Veldgegevens > Configureren.

   Nu het ophalen van veldgegevens is ingesteld, toont het prestatiepaneel een vergelijking tussen uw lokale metrische scores en de scores die uw gebruikers ervaren. U kunt de verzamelperiode zien in het gedeelte 'Veldgegevens' aan de rechterkant.

   

   Om een ​​gedetailleerdere weergave van een metrische score te krijgen, beweegt u de muis over de metrische waarde. Er verschijnt dan een tooltip.

Configureer uw omgeving zodat deze beter aansluit op die van uw gebruikers.

Nadat de veldgegevensophaling is ingesteld zoals beschreven in de vorige sectie, geeft het prestatiepaneel u aanbevelingen voor het configureren van uw omgeving, zodat deze beter aansluit op de gebruikerservaring.

Om uw omgeving te configureren:

1. Vouw in elke meetkaart het gedeelte ' Houd rekening met uw lokale testomstandigheden' uit , indien aanwezig, en lees de aanbevelingen.

   

   Het lijkt erop dat je in dit voorbeeld, om de ervaring van je gebruikers beter af te stemmen, een gangbare schermgrootte voor desktops kunt gebruiken en de CPU en het netwerk kunt beperken.

2. Om de omgevingsconfiguratie voor dit voorbeeld te laten overeenkomen:

   1. Stel uw viewport in op een van de gangbare schermformaten (bijvoorbeeld 720p of 1080p). Om specifieke apparaten en schermformaten te emuleren, kunt u de apparaatmodus in het paneel Elementen gebruiken.
   2. In dit voorbeeld gebruikt 82% van de websitegebruikers een desktopcomputer om te browsen. Om er zeker van te zijn dat u uw lokale metrische scores vergelijkt met de juiste veldgegevens, kunt u 'Desktop' selecteren in de vervolgkeuzelijst 'Veldgegevens > Apparaat' .
   3. In het gedeelte Omgevingsinstellingen kunt u de vervolgkeuzelijst Netwerk bijvoorbeeld instellen op Snel 4G en de CPU bijvoorbeeld op 20x vertraging . U kunt er ook voor zorgen dat u het selectievakje Netwerkcache uitschakelen in hetzelfde gedeelte aanvinkt.

3. Nadat je je omgeving hebt geconfigureerd, vernieuw je de pagina, interacteer je ermee om je lokale INP vast te leggen en vergelijk je de scores opnieuw.

   

   Het lijkt erop dat de meetwaarden nu beter overeenkomen met de ervaringen van uw gebruikers. Daarom is het gedeelte ' Houd rekening met uw lokale testomstandigheden' verdwenen uit de meetwaardenkaarten.

Daarmee kunt u nu beginnen met het verbeteren van de belangrijkste webstatistieken van uw website:

• Optimaliseer LCP
• Optimaliseer INP
• Optimaliseer CLS

Een prestatierapport vastleggen en analyseren

In de volgende secties leest u hoe u een profiel kunt vastleggen, opname-instellingen kunt wijzigen en het rapport kunt analyseren.

Leg een prestatieprofiel vast

Wanneer je klaar bent om op te nemen, biedt het paneel 'Prestatie ' je de volgende opties:

• Record runtime-prestaties
• Recordprestaties onder belasting
• Maak schermafbeeldingen tijdens het opnemen.
• Afvalinzameling forceren tijdens opname
• Sla een opname op
• Een opname laden
• Een opname wissen

Opname-instellingen wijzigen

Met de opname-instellingen kunt u wijzigen hoe DevTools prestatiemetingen vastlegt en kunt u extra informatie in het rapport krijgen. Klik op Opname- instellingen om het menu Opname-instellingen te openen.

Selecteer de volgende opties in het menu 'Opname-instellingen' :

• JavaScript-voorbeelden uitschakelen : Hiermee wordt het vastleggen van de JavaScript-aanroepstacks die in het hoofdspoor worden weergegeven en die tijdens de opname worden aangeroepen, uitgeschakeld. Dit vermindert de prestatieoverhead.
• Geavanceerde lakmeetapparatuur inschakelen (traag) : Legt geavanceerde lakmeetapparatuur vast. Belemmert de prestaties aanzienlijk.
• CSS-selectorstatistieken inschakelen (traag) : legt CSS-selectorstatistieken vast. Dit heeft een aanzienlijke invloed op de prestaties.
• CPU-throttling : Simuleer lagere CPU-snelheden.
• Netwerkbeperking : Simuleer lagere netwerksnelheden.

Analyseer een prestatierapport

Zie 'Een uitvoeringsopname analyseren' voor een complete handleiding over het gebruik van het paneel 'Uitvoering' .

Hieronder vindt u een overzicht van onderwerpen uit de handleiding, aangevuld met andere nuttige documentatie:

Om te leren hoe u door het rapport kunt navigeren:

• Navigeer door de opname
• Zoekactiviteiten
• Volg de initiators van gebeurtenissen

Gebruik Performance Insights om bruikbare inzichten te verkrijgen in de prestaties van uw website:

• Prestatie-inzichten

Om te leren hoe je je kunt concentreren op wat belangrijk is voor je workflow:

• Wijzig de volgorde van de nummers en verberg ze.
• Verberg functies en hun subfuncties in het vlamdiagram.
• Maak navigatiepaden aan en spring tussen zoomniveaus.

Om meer te weten te komen over de tabbladen Bottom-up, Call tree en Event log:

• Bekijk activiteiten in een tabel

Om te leren hoe u het rapport kunt analyseren:

• Bekijk de activiteit in de hoofdthread
• Raadpleeg het vlamdiagram.
• Bekijk een schermafbeelding
• Bekijk geheugenstatistieken
• Bekijk de duur van een gedeelte van een opname.
• Analyseer de prestaties van CSS-selectors tijdens Recalculate Style-gebeurtenissen.
• Profileer de Node.js-prestaties met het prestatiepaneel.
• Analyseer het aantal frames per seconde (FPS).
• Tijdlijngebeurtenisreferentie

Verbeter de prestaties met deze panelen.

Ontdek andere dashboards die u kunnen helpen de prestaties van uw website te verbeteren:

• Lighthouse: Optimaliseer de websitesnelheid
• Geheugen: Overzicht van het geheugenpaneel
• Rendering: Ontdek problemen met de renderingprestaties
• Problemen opsporen en oplossen
• Prestaties: Informatie over lagen bekijken