Deelvenster Prestaties: de prestaties van uw website analyseren

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

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

Overzicht

In het deelvenster Prestaties kun je CPU-prestatieprofielen van je web-apps opnemen. Analyseer profielen om potentiële prestatieknelpunten en manieren te vinden om het resourcegebruik te optimaliseren.

Gebruik het deelvenster Prestaties om het volgende te doen:

  • Neem een prestatieprofiel op.
  • Instellingen voor vastleggen wijzigen
  • Analyseer een prestatierapport.

Ga naar Runtimeprestaties analyseren voor een uitgebreide handleiding over hoe je de prestaties van je website verbetert.

Het deelvenster Prestaties openen

Als je het deelvenster Prestaties wilt openen, open je DevTools en selecteer je Prestaties uit een reeks tabbladen bovenaan.

Je kunt ook deze stappen volgen om het deelvenster Prestaties te openen met het opdrachtmenu:

  1. Open DevTools.
  2. Open het opdrachtmenu door op het volgende te drukken:
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Ctrl+Shift+P Opdrachtmenu met
  5. Begin met typen Performance panel, selecteer Prestatievenster tonen en druk op Enter.

Core Web Vitals live waarnemen

Als je het deelvenster Prestaties opent, worden je lokale statistieken voor Largest Contentful Paint (LCP) en Cumulative Layout Shift (CLS) meteen vastgelegd en getoond. Ook wordt de score vermeld (goed, moet worden verbeterd of slecht).

Als je interactie hebt met je pagina, legt het deelvenster Prestaties ook je lokale Interaction to Next Paint (INP) en de score vast. Naast LCP en CLS krijg je zo een compleet overzicht van de Core Web Vitals van je pagina via je netwerkverbinding en apparaat. Het legt ook Core Web Vitals vast en rapporteert hierover voor zachte navigaties aan de clientzijde in apps met één pagina.

Onder de 3 statistiekkaarten op de tabbladen Interacties en Verschuivingen in de indeling vind je tabellen met informatie over vastgelegde interacties en verschuivingen in de indeling, waaronder elementen, timings, fasen (voor interacties) en scores (voor verschuivingen in de indeling). Als je beide lijsten wilt wissen, klik je op Wissen.

Als je een uitsplitsing van een statistiekscore wilt, plaats je de cursor op de statistiekwaarde om een tooltip te bekijken.

Vergelijk uw ervaring met die van uw gebruikers

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

Zo voeg je veldgegevens toe:

  1. Klik in Prestaties > 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: Stel een toewijzing in tussen ontwikkel- en productieomgevingen...

    Als je automatisch de meest relevante veldgegevens wilt ophalen, kun je (meerdere) toewijzingen instellen tussen je ontwikkelings- en productieoorsprongen:

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

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

      De toewijzing tussen een ontwikkelings- en productieoorsprong in het geavanceerde gedeelte.

      Als u bijvoorbeeld http://localhost:8080 toewijst aan https://example.com, worden veldgegevens voor example.com/page1 getoond als u naar localhost:8080/page1 navigeert.

      Als je de veldgegevens om de een of andere reden niet automatisch kunt ophalen, zet je Veldgegevens altijd tonen voor de URL hieronder aan en voer je een URL in. Het deelvenster Prestaties probeert eerst veldgegevens voor deze URL op te halen en toont deze veldgegevens daarna, ongeacht naar welke pagina je navigeert.

      Als u de instellingen voor het ophalen van veldgegevens na de installatie wilt wijzigen, klikt u op Veldgegevens > Instellen.

    Nu het ophalen van veldgegevens is ingesteld, toont het deelvenster Prestaties een vergelijking tussen je lokale statistiekscores en de scores die je gebruikers ervaren. Je vindt de verzamelperiode rechts in het gedeelte Veldgegevens.

    De verzamelingsperiode van veldgegevens nadat deze zijn opgehaald.

    Als u een uitsplitsing van een statistiekscore wilt krijgen, plaatst u de cursor op de statistiekwaarde om een tooltip te tonen.

Uw omgeving configureren zodat deze beter overeenkomt met die van uw gebruikers

Als u het ophalen van veldgegevens heeft ingesteld zoals beschreven in het vorige gedeelte, biedt het deelvenster Prestaties aanbevelingen voor hoe u uw omgeving kunt instellen zodat deze beter overeenkomt met de ervaring van uw gebruikers.

Zo stelt u uw omgeving in:

  1. Vouw op elke statistiekkaart het gedeelte Houd rekening met de lokale testomstandigheden uit (als dit er is) en lees de aanbevelingen.

    De gedeelten 'Houd rekening met de lokale testomstandigheden' zijn uitgebreid in elke statistiekkaart.

    In dit voorbeeld kun je het beste een veelgebruikte schermgrootte voor desktops gebruiken en de CPU en het netwerk beperken om de gebruikerservaring beter na te bootsen.

  2. Zo komt de omgevingsconfiguratie overeen met dit voorbeeld:

    1. Stel je kijkvenster in op een van de gangbare schermformaten (bijvoorbeeld 720p of 1080p). Als je specifieke apparaten en schermformaten wilt emuleren, gebruik je de Apparaatmodus in het deelvenster Elementen.
    2. 82% van de gebruikers van de website in dit voorbeeld gebruikt een desktop om te browsen. Als je je lokale statistiekscores wilt vergelijken met de juiste veldgegevens, selecteer je Desktop in het dropdownmenu Veldgegevens > Apparaat.
    3. Stel in het gedeelte Omgevingsinstellingen het dropdownmenu Netwerk in op bijvoorbeeld Snelle 4G en CPU op bijvoorbeeld 20x vertraging. Je kunt ook Netwerkcache uitzetten aanvinken in hetzelfde gedeelte.

  3. Nadat je je omgeving hebt ingesteld, laad je de pagina opnieuw, doe je iets op de pagina om je lokale INP vast te leggen en vergelijk je de statistiekscores opnieuw.

    De omgeving is ingesteld op de gebruikerservaring in de echte wereld.

    Het lijkt erop dat de statistiekscores nu meer overeenkomen met de scores die je gebruikers ervaren. Daarom zijn de gedeelten Houd rekening met de lokale testomstandigheden verdwenen van de statistiekkaarten.

Nu kun je de Core Web Vitals van je website verbeteren:

Een prestatierapport vastleggen en analyseren

Volg in de volgende gedeelten de richtlijnen voor hoe je een profiel opneemt, de opname-instellingen wijzigt en het rapport analyseert.

Een prestatieprofiel opnemen

Als u klaar bent om op te nemen, biedt het deelvenster Prestaties de volgende opties:

Instellingen voor vastleggen wijzigen

Met opname-instellingen kunt u wijzigen hoe DevTools prestatieopnamen vastlegt en kunt u aanvullende informatie in het rapport krijgen. Klik op Instellingen voor vastleggen om het menu Instellingen voor vastleggen te openen.

Selecteer de volgende opties in het menu Opname-instellingen:

Een prestatierapport analyseren

Ga naar Een prestatie-opname analyseren voor een complete handleiding over hoe je het deelvenster Prestaties gebruikt.

Hieronder staat een groepering van onderwerpen uit de gids en andere nuttige documentatie:

Zo navigeert u door het rapport:

Gebruik prestatie-inzichten om actiegerichte inzichten te krijgen in de prestaties van uw website:

Zo richt je je op wat belangrijk is voor je workflow:

Meer informatie over de tabbladen Bottom-up, Aanroepstructuur en Gebeurtenislogboek:

Zo analyseert u het rapport:

De prestaties verbeteren met deze deelvensters

Ontdek andere deelvensters waarmee je de prestaties van je website kunt verbeteren:

Aanvullende bronnen