Ontdek problemen met weergaveprestaties

Sofia Emelianova

Kayce Basques

Ontdek problemen met weergaveprestaties met deze referentie van prestatiegerelateerde opties op het tabblad Rendering .

Markeer opnieuw geverfde gebieden met verfflitsen

Als deze optie is ingeschakeld, laat Chrome het scherm groen knipperen wanneer er opnieuw wordt geschilderd.

Gebieden bekijken die opnieuw worden geverfd:

1. Open het tabblad Rendering in deze demo en vink Paint flashing aan.
2. Let op de herschildering die groen is gemarkeerd.

Als je op een andere pagina het hele scherm groen ziet knipperen of delen van het scherm ziet waarvan je dacht dat ze niet geverfd moesten worden, overweeg dan om verder onderzoek te doen.

Markeer lay-outverschuivingsgebieden

Lay-outverschuivingen veroorzaken onverwachte herschilderingen en kunnen niet alleen vervelend maar ook schadelijk zijn.

Een screencast die illustreert hoe instabiliteit van de lay-out een negatieve invloed kan hebben op gebruikers.

De locatie en timing van de lay-outverschuivingen op een pagina bekijken:

1. Open het tabblad Rendering en vink Layout Shift Regions aan.

2. Vernieuw de pagina. Gebieden met een lay-outverschuiving worden kort paars gemarkeerd.

Bekijk lagen en tegels met laagranden

Gebruik Laagranden om een ​​overlay van laagranden en tegels bovenaan de pagina weer te geven.

Laagranden inschakelen:

1. Open het tabblad Rendering en vink Laagranden aan.
2. Observeer de laagranden in oranje en olijfgroen en de tegels in cyaan.

Zie de opmerkingen in debug_colors.cc voor een uitleg van de kleurcoderingen.

Bekijk frames per seconde in realtime met framerenderingstatistieken

De frameweergavestatistieken zijn een overlay die in de rechterbovenhoek van uw kijkvenster verschijnt.

Om de Frame-renderingstatistieken te openen:

1. Open het tabblad Rendering en schakel het selectievakje Frame-renderingstatistieken in.
2. Bekijk de statistieken in de rechterbovenhoek van de pagina.

De overlay met frameweergavestatistieken toont het volgende:

• Realtime schatting van frames per seconde terwijl de pagina wordt weergegeven.
• Frametijdlijn als plot met drie frametypen:
  • Frames succesvol weergegeven (blauwe lijnen)
  • Gedeeltelijk gepresenteerde frames (gele lijnen)
  • Weggevallen frames (rode lijnen).
• De status van het GPU-raster: aan of uit. Zie GPU-rasterisatie verkrijgen voor meer informatie.
• GPU-geheugengebruik: het aantal gebruikte en maximale MB geheugen.

Identificeer prestatieproblemen bij het scrollen

Gebruik Prestatieproblemen bij scrollen om elementen van de pagina te identificeren die gebeurtenislisteners hebben die verband houden met scrollen en die de prestaties van de pagina kunnen schaden.

Om de potentieel problematische elementen te bekijken:

1. Open het tabblad Rendering en vink Prestatieproblemen bij scrollen aan.
2. Observeer de potentieel problematische elementen die zijn benadrukt.

Bekijk Core Web Vitals

Web Vitals is een initiatief van Google om uniforme begeleiding te bieden voor kwaliteitssignalen die essentieel zijn voor het leveren van een geweldige gebruikerservaring op internet.

Core Web Vitals vormen de subset van Web Vitals die van toepassing zijn op alle webpagina's. Elk van de Core Web Vitals vertegenwoordigt een afzonderlijk facet van de gebruikerservaring, is meetbaar in het veld en weerspiegelt de praktijkervaring van een cruciaal, op de gebruiker gericht resultaat. De kernwebvitalen zijn:

• Grootste Contentful Paint (LCP) : meet de laadprestaties . Om een ​​goede gebruikerservaring te bieden, moet LCP plaatsvinden binnen 2,5 seconden nadat de pagina voor het eerst wordt geladen.
• Interaction to Next Paint (INP) : meet interactiviteit . Om een ​​goede gebruikerservaring te bieden, moeten pagina's een INP van 200 milliseconden of minder hebben.
• Cumulatieve Layout Shift (CLS) : meet de visuele stabiliteit . Om een ​​goede gebruikerservaring te bieden, moeten pagina's een CLS van 0,1 behouden. of minder.

Gebruik de Chrome-extensie Web Vitals om de Core Web Vitals-waarden van uw pagina te bekijken.