Gepubliceerd: 17 september 2024
In het vorige bericht hebben we gekeken naar drie nieuwe functies waarmee u uw prestatieworkflows in DevTools kunt aanpassen . Deze ergonomische verbeteringen waren nog maar het begin van onze meerjarige inspanning om DevTools nog eenvoudiger en beter in staat te maken voor het optimaliseren van Core Web Vitals. Vandaag lanceren we de volgende reeks functies: een volledig opnieuw ontworpen startpagina van het Prestatiepaneel met een liveweergave van uw lokale Core Web Vitals-prestaties .
In dit bericht zullen we elk van de nieuwe functies nader bekijken:
- Realtime lokale Core Web Vitals-prestaties
- Gegevens over echte gebruikerservaringen
- Aanbevelingen om uw lokale omgeving te configureren
- Informatie waarmee u problemen kunt reproduceren
Realtime lokale Core Web Vitals-prestaties
De mogelijkheid om te meten hoe uw lokale ervaring presteert is een cruciaal onderdeel van elke Core Web Vitals-foutopsporingsworkflow. Het kan het verschil maken tussen het reproduceren van problemen van echte gebruikers of niet. Het meten van uw lokale prestaties was echter niet altijd zo eenvoudig.
Historisch gezien toont het Prestatiepaneel in DevTools een gedetailleerde tijdlijn van netwerkverzoeken en CPU-activiteit, wat een zeer nuttig hulpmiddel is voor het debuggen van prestaties. Het kan echter lastig zijn prestatieproblemen te reproduceren, omdat u pas na afloop van de opname weet of de uitvoering slecht is. Zoals we hebben geleerd van de Web Vitals-extensie , is toegang tot uw lokale Core Web Vitals-prestaties in DevTools een game-changer. We hebben dus alles genomen wat we van de extensie hebben geleerd en besloten deze functies rechtstreeks in het prestatiepaneel in te bouwen.
Voor het eerst zijn al uw Core Web Vitals-statistieken beschikbaar in het prestatiepaneel. Open het prestatiepaneel en je ziet meteen hoe jouw lokale ervaring presteert; opnemen is niet nodig. Sterker nog, je hoeft DevTools niet eens open te hebben staan; de statistieken worden op de achtergrond verzameld en zijn beschikbaar wanneer u ze nodig heeft. Dit komt van pas als u misschien niet actief bezig bent een specifiek probleem op te lossen, maar iets langzaam aanvoelt en u wilt begrijpen waarom.
Het gedeelte Lokale statistieken van het paneel biedt een liveweergave van uw lokale Core Web Vitals-statistieken: Grootste inhoudsvolle verf, Cumulatieve lay-outverschuiving en Interactie naar volgende verf. Terwijl u de pagina laadt en ermee communiceert, worden deze statistieken in realtime bijgewerkt. Ze zijn ook voorzien van een kleurcode op basis van hun respectieve drempelwaarden voor goede en slechte prestaties, waardoor het gemakkelijker wordt om prestatieproblemen op te sporen zodra ze zich voordoen.
Gegevens over echte gebruikerservaringen
Het optimaliseren van prestatieproblemen die de meeste gebruikers nooit ervaren, is wellicht niet het beste gebruik van uw tijd. Op dezelfde manier, als uw lokale ervaring onrealistisch snel is, ziet u waarschijnlijk enkele problemen uit de echte wereld over het hoofd. Om een weloverwogen beslissing te kunnen nemen over hoe u uw tijd gaat investeren, moet u dus uw lokale prestaties vergelijken met gegevens over echte gebruikerservaringen uit de praktijk.
Het Prestatiepaneel biedt u nu een manier om uw echte gebruikersgegevens direct naast uw lokale ervaringen te bekijken. De gegevens worden mogelijk gemaakt door de openbare Crux API , een 28-daagse verzameling van echte gebruikerservaringen op een bepaalde webpagina en oorsprong. Om dit in te schakelen, klikt u op Instellen in de sectie Veldgegevens en volgt u de aanwijzingen in het configuratiedialoogvenster.
Houd er rekening mee dat individuele URL's en oorsprong (hele websites) aan bepaalde geschiktheidscriteria moeten voldoen om te worden opgenomen in de CrUX-dataset. Gebruikerservaringen worden ook verzameld per desktop- en mobiel apparaattype als er voldoende gegevens zijn. DevTools zal zijn best doen om automatisch de meest relevante gegevens voor uw lokale ervaring weer te geven, waarbij standaard dezelfde URL en hetzelfde apparaattype worden gebruikt, indien beschikbaar. Als er onvoldoende gegevens op desktop- of mobiel niveau zijn, wordt geprobeerd de verzamelde gegevens voor alle apparaattypen weer te geven.
Naast de 75e percentielwaarde kunt u over een willekeurige statistiek bewegen om de verhoudingen van echte gebruikerservaringen binnen elke beoordeling te zien. In dit voorbeeld is de lokale Largest Contentful Paint-ervaring atypisch traag, vergelijkbaar met slechts 12% van de echte gebruikerservaringen.
Met deze gegevens krijgt u een veel duidelijker beeld van hoe representatief uw lokale ervaring is en kunt u deze verfijnen om een typische gebruikerservaring beter te evenaren.
Aanbevelingen om uw lokale omgeving te configureren
Er zijn veel verschillen tussen laboratorium- en veldgegevens , die nog worden verergerd door alle manieren waarop men toegang kan krijgen tot een pagina en er interactie mee kan hebben. U kunt rekening houden met enkele van deze verschillen en uw lokale ervaring representatiever maken door uw omgeving te configureren.
Wanneer veldgegevens zijn ingeschakeld en beschikbaar zijn, wordt in het gedeelte Opname-instellingen voorgesteld het meest voorkomende apparaattype te emuleren dat door echte gebruikers wordt gebruikt. Door de apparaatmodus in te schakelen, kunt u de viewportgrootte van een mobiel apparaat emuleren. Responsieve interfaces kunnen veranderen welk element wordt toegeschreven aan de grootste contentvolle verf en kunnen zeer verschillende prestatiekenmerken hebben. De mobiele lay-out kan ook bepaalde elementen onthullen, zoals een navigatiemenu waarmee alleen mobiele gebruikers kunnen communiceren, of unieke soorten lay-outverschuivingen veroorzaken die anders niet worden ervaren bij grotere viewports.
In deze sectie wordt mogelijk ook een specifieke netwerkbeperkingsconfiguratie aanbevolen, zoals Slow 4G . Netwerkaanbevelingen zijn gebaseerd op de statistiek van de retourtijd in het 75e percentiel, verzameld op basis van echte gebruikerservaringen op die pagina of website. Lagere netwerksnelheden kunnen de laadprestaties van de pagina realistischer maken (zowel voor echte desktop- als mobiele gebruikers), waardoor het gemakkelijker wordt om mogelijkheden voor verbetering te ontdekken. Houd er ook rekening mee dat lay-outverschuivingen alleen meetellen voor de cumulatieve lay-outverschuiving als ze niet binnen 500 ms na een interactie plaatsvinden. Als een door de gebruiker geïnitieerde lay-outverschuiving het resultaat is van een netwerkverzoek, kan het beperken van het netwerk de enige manier zijn om het lokaal bloot te leggen.
Het beperken van uw CPU is een andere manier om uw lokale apparaat meer als echte gebruikers te laten presteren. CPU-throttling emuleert beter de relatief tragere manier waarop mobiele apparaten presteren, waarbij snellere machines nog meer throttling vereisen. DevTools heeft onlangs de mogelijkheid toegevoegd om uw CPU met 20x te vertragen , wat vooral handig is voor de performante desktopmachines die ontwikkelaars vaak gebruiken. Een gesmoorde CPU zorgt ervoor dat scripts langzamer worden uitgevoerd, waardoor de kans groter wordt dat ze lange taken worden die leiden tot problemen met Interaction to Next Paint. Om dezelfde reden kunnen de andere Core Web Vitals-statistieken ook worden beïnvloed door langzamere uitvoering van scripts, vooral als deze de weergave van het grootste stuk inhoud of elementen die de lay-out verschuiven, blokkeert.
Het configureren van uw lokale omgeving met meer realistische viewport-, netwerk- en CPU-instellingen zou meer prestatieproblemen aan de oppervlakte moeten brengen waar u anders misschien niet van op de hoogte was. En dankzij de aanbevelingen op basis van echte gebruikersgegevens hoeft u zich geen zorgen meer te maken, zodat u zich meer kunt concentreren op het vinden en oplossen van deze problemen.
Informatie waarmee u problemen kunt reproduceren
Uw lokale prestaties zijn sterk afhankelijk van hoe uw omgeving is geconfigureerd en hoe u met de pagina omgaat. Op een typische webpagina is het bijvoorbeeld minder waarschijnlijk dat het Largest Contentful Paint-element een afbeelding is bij mobiele viewport-formaten. Het typen van één enkel teken in een tekstveld kan snel gaan, maar het snel achter elkaar typen van een groot aantal tekens kan een slechte interactie met Next Paint tot gevolg hebben. Om dit duidelijker te maken en meer reproduceerbare ervaringen te krijgen, is aanvullende informatie over de statistieken beschikbaar.
Het LCP-element dat is gekoppeld aan de statistiek Grootste contentvolle verf toont een link naar het element zelf. Als u over de link beweegt, wordt het element op de pagina gemarkeerd. Als u op de koppeling klikt, gaat u naar het paneel Elementen, zodat u het element in de volledige context van het document kunt zien.
De sectie Interacties is een realtime logboek van alle in aanmerking komende interacties die plaatsvinden terwijl DevTools geopend is. Terwijl u typt, tikt of klikt, wordt elke interactie aan het logboek toegevoegd met aanvullende informatie, zodat u beter begrijpt wat er is gebeurd en hoe u dit kunt reproduceren.
Naast het interactietype, dat een aanwijzer- of toetsenbordgebeurtenis is, ziet u een verwijzing naar het interactiedoel. Net als bij het LCP-element is het interactiedoel zelf interactief. U kunt er met de muis overheen bewegen om het op de pagina te markeren of erop klikken om het in het paneel Elementen te zien. De interactielatentie wordt ook weergegeven, met dezelfde kleurcodering als de metrische drempels voor Interaction to Next Paint, waardoor het gemakkelijker wordt om de langzaamste te herkennen.
Wanneer u het prestatieprobleem dat u probeert op te lossen, kunt reproduceren, bent u klaar om te beginnen met profileren . Gebruik in het gedeelte Volgende stappen de knop Opnemen en opnieuw laden om problemen met de laadprestaties op te lossen, zoals de grootste inhoudsvolle verf en de cumulatieve lay-outverschuiving tijdens het laden . Om problemen op te lossen die optreden als gevolg van gebruikersinteracties, gebruikt u de knop Opnemen om de pagina te profileren terwijl u handmatig langzame interacties of lay-outverschuivingen na het laden reproduceert.
Wat is het volgende
Door uw prestatieworkflows te baseren op realtime lokale gegevens en echte gebruikersgegevens uit het veld, kunt u beslissen of u meer of minder moeite moet investeren in het opsporen van fouten en het optimaliseren van een metriek. U moet deze gegevens gebruiken om uw lokale omgeving aan te passen om de apparaattypen, CPU-snelheden of netwerkconfiguraties van uw gebruikers realistischer te emuleren om hun prestatieproblemen beter te reproduceren.
Voor alle gebruikers van de Web Vitals-extensie zul je waarschijnlijk veel van deze functies herkennen en dus vraag je je misschien af wat dit betekent voor de extensie. De komende weken zullen we meer informatie delen over de impact van deze wijzigingen op de extensie.
We zijn nog maar net begonnen met al onze verbeteringen in het prestatiepaneel, en er komt nog zoveel meer. We zullen hier binnenkort weer een update plaatsen met een nieuwe update, maar tot die tijd raden we u aan al deze nieuwe functies in het Prestatiepaneel uit te proberen en ons te laten weten wat u ervan vindt. Als u feedback heeft, lezen we uw opmerkingen graag in het openbare nummer .