Prestatiepaneel: Analyseer de prestaties van uw website

Dal St. Marthe
Dale St. Marthe
LinkedIn

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 :

  1. Open DevTools .
  2. Open het Commandomenu door op te drukken:
  3. macOS: Command + Shift + P
  4. Windows, Linux, ChromeOS: Control + Shift + P Commandomenu met
  5. 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 paneel Prestaties biedt een lijst met vastgelegde interacties onder de drie metrische kaarten. Om de lijst te wissen, klikt u op Wissen .

Om een ​​uitsplitsing van een statistiekscore te krijgen, 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:

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

    De knop 'Instellen' in het gedeelte Volgende stappen.

  2. 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:

    1. Vouw in het dialoogvenster de sectie Geavanceerd uit en klik op + Nieuw .

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

      Het in kaart brengen tussen ontwikkeling en productie vindt zijn oorsprong in het geavanceerde gedeelte.

      Een toewijzing van http://localhost:8080 aan https://example.com zal bijvoorbeeld veldgegevens weergeven, example.com/page1 wanneer u naar localhost: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 .

    De verzameling veldgegevens is voltooid nadat deze is opgehaald.

    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:

  1. Vouw op elke metrische kaart de sectie Overweeg uw lokale testomstandigheden uit , indien aanwezig, en lees de aanbevelingen.

    De secties 'Overweeg uw lokale testomstandigheden' zijn op elke statistische kaart uitgebreid.

    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.

  2. Om overeen te komen met de omgevingsconfiguratie voor dit voorbeeld:

    1. 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 Elementenpaneel gebruiken.
    2. 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 .
    3. 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 .

  3. 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.

    De omgeving is geconfigureerd om aan te sluiten bij de echte gebruikerservaring.

    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:

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 :

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:

Voor meer informatie over de tabbladen Bottom-up, Oproepboom en Gebeurtenislogboek:

Zo leert u hoe u het rapport analyseert:

Verbeter de prestaties met deze panelen

Ontdek andere panelen waarmee u de prestaties van uw website kunt verbeteren: