Wat is er nieuw in Lighthouse 6.0

Nieuwe statistieken, update van de prestatiescore, nieuwe audits en meer.

Connor Clark

Vandaag brengen we Lighthouse 6.0 uit!

Lighthouse is een geautomatiseerde website-audittool die ontwikkelaars helpt met mogelijkheden en diagnostiek om de gebruikerservaring van hun sites te verbeteren. Het is beschikbaar in Chrome DevTools, npm (als een Node-module en een CLI), of als browserextensie (in Chrome en Firefox ). Het ondersteunt veel Google-services, waaronder PageSpeed ​​Insights .

Lighthouse 6.0 is per direct beschikbaar op npm en in Chrome Canary . Andere Google-services die Lighthouse gebruiken, zullen de update tegen het einde van de maand ontvangen. Het komt in Chrome Stable terecht in Chrome 84 (medio juli).

Om de Lighthouse Node CLI te proberen, gebruikt u de volgende opdrachten: bash npm install -g lighthouse lighthouse https://www.example.com --view

Deze versie van Lighthouse wordt geleverd met een groot aantal wijzigingen die worden vermeld in de changelog van 6.0 . In dit artikel bespreken we de hoogtepunten.

• Nieuwe statistieken
• Update van de prestatiescore
• Nieuwe audits
• Vuurtoren CI
• Hernoemd Chrome DevTools-paneel
• Mobiele emulatie
• Browser-extensie
• Budgetten
• Bronlocatielinks
• Aan de horizon
• Bedankt!

Nieuwe statistieken

Lighthouse 6.0 introduceert drie nieuwe statistieken in het rapport. Twee van deze nieuwe statistieken – Large Contentful Paint (LCP) en Cumulative Layout Shift (CLS) – zijn laboratoriumimplementaties van Core Web Vitals .

Grootste inhoudsvolle verf (LCP)

Largest Contentful Paint (LCP) is een meting van de waargenomen laadervaring. Het markeert het punt tijdens het laden van de pagina waarop de primaire (of 'grootste') inhoud is geladen en zichtbaar is voor de gebruiker. LCP is een belangrijke aanvulling op First Contentful Paint (FCP), dat alleen het allereerste begin van de laadervaring vastlegt. LCP geeft ontwikkelaars een signaal over hoe snel een gebruiker daadwerkelijk de inhoud van een pagina kan zien. Een LCP-score van minder dan 2,5 seconden wordt als 'Goed' beschouwd.

Bekijk voor meer informatie deze diepgaande duik op LCP door Paul Irish.

Cumulatieve lay-outverschuiving (CLS)

Cumulatieve Layout Shift (CLS) is een maatstaf voor de visuele stabiliteit. Het kwantificeert hoeveel de inhoud van een pagina visueel verschuift. Een lage CLS-score is een signaal voor ontwikkelaars dat hun gebruikers geen onnodige inhoudsverschuivingen ervaren; een CLS-score lager dan 0,10 wordt als 'Goed' beschouwd.

CLS in een laboratoriumomgeving wordt gemeten tot het einde van het laden van de pagina. Terwijl u in het veld CLS kunt meten tot aan de eerste gebruikersinteractie of inclusief alle gebruikersinvoer.

Bekijk voor meer informatie deze diepgaande duik over CLS door Annie Sullivan.

Totale blokkeertijd (TBT)

Total Blocking Time (TBT) kwantificeert de responsiviteit van de belasting, waarbij de totale hoeveelheid tijd wordt gemeten waarin de hoofdthread lang genoeg werd geblokkeerd om de responsiviteit van de invoer te voorkomen. TBT meet de totale hoeveelheid tijd tussen First Contentful Paint (FCP) en Time to Interactive (TTI). Het is een aanvullende statistiek voor TTI en brengt meer nuance in het kwantificeren van hoofdthreadactiviteit die de mogelijkheid van een gebruiker om met uw pagina te communiceren blokkeert.

Bovendien correleert TBT goed met de veldmetriek First Input Delay (FID), een Core Web Vital.

Update van de prestatiescore

De prestatiescore in Lighthouse wordt berekend op basis van een gewogen combinatie van meerdere statistieken om de snelheid van een pagina samen te vatten. De formule voor de prestatiescore van 6,0 volgt.

Hoewel er drie nieuwe statistieken zijn toegevoegd, zijn er drie oude verwijderd: First Meaningful Paint, First CPU Idle en Max Potential FID. De gewichten van de resterende statistieken zijn aangepast om de interactiviteit van de hoofdlijnen en de voorspelbaarheid van de lay-out te benadrukken.

Ter vergelijking: hier is de score van versie 5:

Enkele hoogtepunten van scorewijzigingen tussen Lighthouse-versies 5 en 6:

• Het gewicht van TTI is teruggebracht van 33% naar 15% . Dit was een directe reactie op gebruikersfeedback over de TTI-variabiliteit, evenals op inconsistenties in metrische optimalisaties die leidden tot verbeteringen in de gebruikerservaring. TTI is nog steeds een nuttig signaal als een pagina volledig interactief is, maar met TBT als aanvulling wordt de variabiliteit verminderd . Met deze scorewijziging hopen we dat ontwikkelaars effectiever worden aangemoedigd om te optimaliseren voor gebruikersinteractiviteit.
• Het gewicht van FCP is teruggebracht van 23% naar 15%. Alleen meten wanneer de eerste pixel is geverfd (FCP) gaf ons geen compleet beeld. Door dit te combineren met meten wanneer gebruikers kunnen zien waar ze waarschijnlijk om geven (LCP), wordt de laadervaring beter weergegeven.
• Max Potential FID is verouderd . Het wordt niet meer weergegeven in het rapport, maar is nog steeds beschikbaar in de JSON. Het wordt nu aanbevolen om naar TBT te kijken om uw interactiviteit te kwantificeren in plaats van naar mpFID.
• Eerste betekenisvolle verf is verouderd. Deze statistiek was te variabel en had geen haalbare weg naar standaardisatie, omdat de implementatie specifiek is voor de interne weergave van Chrome. Hoewel sommige teams de FMP-timing op hun site de moeite waard vinden, krijgt de statistiek geen aanvullende verbeteringen.
• Eerste CPU-inactiviteit is verouderd omdat deze niet voldoende verschilt van TTI. TBT en TTI zijn tegenwoordig de beste maatstaven voor interactiviteit.
• Het gewicht van de CLS is relatief laag, hoewel we verwachten dat dit in een toekomstige grote versie zal toenemen.

Verschuivingen in scores

Welke invloed hebben deze veranderingen op de scores van echte sites? We hebben een analyse van de scorewijzigingen gepubliceerd met behulp van twee datasets: een algemene set sites en een set statische sites gebouwd met Eleventy . Samenvattend: ~20% van de sites ziet merkbaar hogere scores, ~30% ziet nauwelijks verandering en ~50% ziet een daling van minstens vijf punten.

De scoreveranderingen kunnen worden opgesplitst in drie hoofdcomponenten:

• gewichtsveranderingen scoren
• bugfixes voor onderliggende metrische implementaties
• individuele scorecurveveranderingen

Veranderingen in het scoregewicht en de introductie van drie nieuwe statistieken zorgden voor het merendeel van de algehele scorewijzigingen. Nieuwe statistieken waarvoor ontwikkelaars nog moeten optimaliseren, wegen aanzienlijk mee in de prestatiescore van versie 6. Terwijl de gemiddelde prestatiescore van het testcorpus in versie 5 rond de 50 lag, lagen de gemiddelde scores op de nieuwe Total Blocking Time- en Largest Contentful Paint-statistieken rond de 30. Samen zijn deze twee statistieken verantwoordelijk voor 50% van het gewicht in Lighthouse-versie 6 prestatiescore, dus uiteraard zag een groot percentage van de sites een daling.

Bugfixes voor de onderliggende metrische berekening kunnen tot verschillende scores leiden. Dit treft relatief weinig locaties, maar kan in bepaalde situaties een aanzienlijke impact hebben. Over het geheel genomen ondervond ongeveer 8% van de sites een scoreverbetering als gevolg van wijzigingen in de implementatie van de statistieken, en ongeveer 4% van de sites zag een scoredaling als gevolg van wijzigingen in de implementatie van de statistieken. Ongeveer 88% van de sites ondervond geen hinder van deze oplossingen.

Individuele veranderingen in de scorecurve hadden ook een invloed op de algehele scoreverschuivingen, zij het in zeer geringe mate. We zorgen er periodiek voor dat de scorecurve in lijn ligt met de waargenomen statistieken in de HTTPArchive-gegevensset . Met uitzondering van sites die getroffen zijn door grote implementatiewijzigingen, verbeterden kleine aanpassingen aan de scorecurve voor individuele statistieken de scores van ongeveer 3% van de sites en daalden de scores van ongeveer 4% van de sites. Ongeveer 93% van de sites werd niet beïnvloed door deze wijziging.

Score rekenmachine

We hebben een scorecalculator gepubliceerd waarmee u prestatiescores kunt verkennen. De rekenmachine geeft u ook een vergelijking tussen de scores van Lighthouse versie 5 en 6. Wanneer u een audit uitvoert met Lighthouse 6.0, wordt het rapport geleverd met een link naar de rekenmachine waarin uw resultaten zijn ingevuld.

Nieuwe audits

Ongebruikt JavaScript

We maken gebruik van DevTools-codedekking in een nieuwe audit: Unused JavaScript .

Deze audit is niet geheel nieuw: hij werd medio 2017 toegevoegd , maar vanwege de prestatieoverhead was hij standaard uitgeschakeld om de Lighthouse zo snel mogelijk te houden. Het verzamelen van deze dekkingsgegevens is nu veel efficiënter, dus we voelen ons er gerust in om dit standaard in te schakelen.

Toegankelijkheidsaudits

Lighthouse gebruikt de prachtige Axe-Core- bibliotheek om de toegankelijkheidscategorie te versterken. In Lighthouse 6.0 hebben we de volgende audits toegevoegd:

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• duplicate-id-active
• duplicate-id-aria

Maskeerbaar icoon

Maskeerbare pictogrammen zijn een nieuw pictogramformaat waarmee pictogrammen voor uw PWA er op alle soorten apparaten geweldig uitzien. Om ervoor te zorgen dat uw PWA er zo goed mogelijk uitziet, hebben we een nieuwe audit geïntroduceerd om te controleren of uw manifest.json dit nieuwe formaat ondersteunt.

Charset-declaratie

Het meta-tekensetelement geeft aan welke tekencodering moet worden gebruikt om een ​​HTML-document te interpreteren. Als dit element ontbreekt, of als het laat in het document wordt aangegeven, gebruiken browsers een aantal heuristieken om te raden welke codering moet worden gebruikt. Als een browser verkeerd raadt en er een laat metatekensetelement wordt gevonden, gooit de parser doorgaans al het tot nu toe verrichte werk weg en begint opnieuw, wat leidt tot slechte ervaringen voor de gebruiker. Deze nieuwe audit verifieert dat de pagina een geldige tekencodering heeft en dat deze vroeg en vooraf is gedefinieerd.

Vuurtoren CI

Afgelopen november hebben we op CDS Lighthouse CI aangekondigd, de open source Node CLI en server die Lighthouse-resultaten bijhoudt bij elke commit in uw continue integratiepijplijn, en we hebben een lange weg afgelegd sinds de alpha-release. Lighthouse CI biedt nu ondersteuning voor tal van CI-providers, waaronder Travis, Circle, GitLab en GitHub Actions. Kant-en-klare docker-images maken het instellen een fluitje van een cent, en een uitgebreid dashboardherontwerp onthult nu trends in elke categorie en statistiek in Lighthouse voor gedetailleerde analyse.

Begin vandaag nog met het gebruik van Lighthouse CI voor uw project door onze Aan de slag-gids te volgen.

Hernoemd Chrome DevTools-paneel

We hebben het paneel Audits hernoemd naar het Lighthouse -paneel. Genoeg gezegd!

Afhankelijk van de grootte van uw DevTools-venster bevindt het paneel zich waarschijnlijk achter de knop » . U kunt het tabblad verslepen om de volgorde te wijzigen.

Om het paneel snel weer te geven met het Command-menu :

1. Druk op `Control+Shift+J` (of `Command+Option+J` op Mac) om DevTools te openen.
2. Druk op Control+Shift+P (of Command+Shift+P op Mac) om het Command- menu te openen.
3. Begin met het typen van 'Vuurtoren'.
4. Druk op Enter .

Mobiele emulatie

Lighthouse volgt een mobile-first-mentaliteit. Prestatieproblemen zijn duidelijker onder typische mobiele omstandigheden, maar ontwikkelaars testen vaak niet onder deze omstandigheden. Dit is de reden waarom de standaardconfiguratie in Lighthouse mobiele emulatie toepast. De emulatie bestaat uit:

• Gesimuleerde trage netwerk- en CPU-omstandigheden (via een simulatie-engine genaamd Lantern ).
• Apparaatschermemulatie (dezelfde als in Chrome DevTools).

Vanaf het begin heeft Lighthouse de Nexus 5X als referentieapparaat gebruikt. De afgelopen jaren hebben de meeste prestatie-ingenieurs de Moto G4 gebruikt voor testdoeleinden. Nu volgt Lighthouse dit voorbeeld en heeft het referentieapparaat gewijzigd in Moto G4. In de praktijk is deze verandering niet erg merkbaar, maar hier zijn alle veranderingen die een webpagina kan detecteren:

• De schermgrootte is gewijzigd van 412x660 px naar 360x640 px.
• De user-agentstring is enigszins gewijzigd, het apparaatgedeelte dat voorheen Nexus 5 Build/MRA58N was, is nu Moto G (4) .

Vanaf Chrome 81 is Moto G4 ook beschikbaar in de apparaatemulatielijst van Chrome DevTools.

Browser-extensie

De Chrome-extensie voor Lighthouse is een handige manier geweest om Lighthouse lokaal te gebruiken. Helaas was het ingewikkeld om te ondersteunen. Omdat het Chrome DevTools Lighthouse -paneel een betere ervaring biedt (het rapport integreert met andere panelen), waren we van mening dat we onze technische overhead konden verminderen door de Chrome-extensie te vereenvoudigen.

In plaats van Lighthouse lokaal uit te voeren, gebruikt de extensie nu de PageSpeed ​​Insights API . We erkennen dat dit voor sommige van onze gebruikers geen voldoende vervanging zal zijn. Dit zijn de belangrijkste verschillen:

• PageSpeed ​​Insights kan niet-openbare websites niet controleren, omdat deze worden uitgevoerd via een externe server en niet via uw lokale Chrome-instantie. Als u een niet-openbare website wilt controleren, gebruikt u het DevTools Lighthouse- paneel of de Node CLI.
• Het is niet gegarandeerd dat PageSpeed ​​Insights de nieuwste versie van Lighthouse gebruikt. Als u de nieuwste release wilt gebruiken, gebruikt u de Node CLI. De browserextensie krijgt de update ongeveer één tot twee weken na de release.
• PageSpeed ​​Insights is een Google API. Als u deze gebruikt, accepteert u de Servicevoorwaarden van de Google API. Als u de servicevoorwaarden niet wilt of kunt accepteren, gebruikt u het DevTools Lighthouse -paneel of de Node CLI.

Het goede nieuws is dat door het vereenvoudigen van het productverhaal we ons konden concentreren op andere technische problemen. Als gevolg hiervan hebben we de Lighthouse Firefox-extensie uitgebracht!

Budgetten

Lighthouse 5.0 introduceerde prestatiebudgetten die het toevoegen van drempels ondersteunden voor hoeveel van elk brontype (zoals scripts, afbeeldingen of CSS) een pagina kan bedienen.

Lighthouse 6.0 voegt ondersteuning toe voor budgetteringsstatistieken , zodat u nu drempels kunt instellen voor specifieke statistieken zoals FCP. Voorlopig zijn budgetten alleen beschikbaar voor de Node CLI en Lighthouse CI.

Bronlocatielinks

Sommige problemen die Lighthouse over een pagina ontdekt, zijn terug te voeren op een specifieke broncoderegel. Het rapport vermeldt precies het bestand en de regel die relevant zijn. Om dit gemakkelijk te verkennen in DevTools, kunt u door op de locaties in het rapport te klikken de relevante bestanden openen in het paneel Bronnen .

Aan de horizon

Lighthouse is begonnen te experimenteren met het verzamelen van bronkaarten om nieuwe functies mogelijk te maken, zoals:

• Het detecteren van dubbele modules in JavaScript-bundels.
• Het detecteren van overmatige polyfills of transformaties in code die naar moderne browsers wordt verzonden.
• Verbetering van de ongebruikte JavaScript-audit om granulariteit op moduleniveau te bieden.
• Treemap-visualisaties die de modules benadrukken die actie vereisen.
• Het weergeven van de originele broncode voor rapportitems met een "bronlocatie".

Deze functies worden standaard ingeschakeld in een toekomstige versie van Lighthouse. Voorlopig kunt u de experimentele audits van Lighthouse bekijken met de volgende CLI-vlag:

lighthouse https://web.dev --view --preset experimental

Bedankt!

Wij danken u voor het gebruik van Lighthouse en het geven van feedback. Uw feedback helpt ons Lighthouse te verbeteren en we hopen dat Lighthouse 6.0 het gemakkelijker voor u zal maken om de prestaties van uw websites te verbeteren.

Wat kunt u nu doen?

• Open Chrome Canary en probeer het Lighthouse- paneel.
• Gebruik de knooppunt-CLI: npm install -g lighthouse && lighthouse https://yoursite.com --view .
• Laat Lighthouse CI draaien met uw project.
• Bekijk de Lighthouse-auditdocumentatie .
• Veel plezier met het verbeteren van het internet!

We hebben een passie voor internet en werken graag samen met de ontwikkelaarsgemeenschap om tools te ontwikkelen waarmee we het internet kunnen verbeteren. Lighthouse is een open source-project en we willen alle bijdragers enorm bedanken die hebben geholpen met alles, van typefoutcorrecties tot documentatierefactors tot gloednieuwe audits. Interesse om een ​​bijdrage te leveren? Bezoek de Lighthouse GitHub-repository .