Vuurtoren update van januari 2017

Lighthouse is een open-source , geautomatiseerde tool waarmee u de kwaliteit van uw webapps kunt verbeteren. U kunt het installeren als een Chrome-extensie of uitvoeren als een Node-opdrachtregelprogramma. Wanneer u Lighthouse een URL geeft, voert het een spervuur ​​aan tests uit op de pagina en genereert het vervolgens een rapport waarin wordt uitgelegd hoe goed de pagina het heeft gedaan en welke gebieden voor verbetering vatbaar zijn.

Vuurtoren-logo
Vuurtoren-logo

Vandaag kondigen we met veel plezier de 1.5-release van Lighthouse aan, een enorme release, met meer dan 128 PR's . Lighthouse 1.5 bevat een aantal grote nieuwe functies, audits en de gebruikelijke bugfixes. U kunt het installeren vanaf npm ( npm i -g lighthouse ) of de extensie downloaden via de Chrome Web Store.

Nieuwe audits

De CSS-gebruiksaudit rapporteert het aantal ongebruikte stijlregels op uw pagina en de kosten-/tijdbesparingen door deze te verwijderen:

CSS-gebruikscontrole

De Geoptimaliseerde Afbeeldingen Audit rapporteert afbeeldingen die niet zijn geoptimaliseerd en de kosten-/tijdbesparingen door het optimaliseren ervan:

Geoptimaliseerde afbeeldingen AudiT

De Responsive Images Audit rapporteert afbeeldingen die te groot zijn en de potentiële kosten-/tijdbesparingen als ze de juiste afmetingen hebben voor het betreffende apparaat:

Geoptimaliseerde afbeeldingen AudiT

De Controle van beëindigingen en interventies bevat consolewaarschuwingen van Chrome als uw pagina verouderde API's of functies gebruikt die interventies hebben:

Controle van beëindigingen en interventies

Wijzigingen doorgeven

Zoals u heeft gezien, hebben we ons erop gericht het rapport visueel minder rommelig te maken door gegevens in tabelvorm toe te voegen, overbodige Help-tekst te verbergen en nieuwe functies toe te voegen om het navigeren door de gegevens gemakkelijker te maken.

Emulatie-instellingen

Je vergeet gemakkelijk welke throttling- en emulatie-instellingen zijn gebruikt voor een bepaalde Lighthouse-run. Lighthouse-rapporten bevatten nu de runtime-emulatie-instellingen die zijn gebruikt om het rapport te maken; een langdurig functieverzoek :

Emulatie-instellingen

Meer bruikbare traceergegevens

Lighthouse-statistieken zoals "Eerste zinvolle verf", "Tijd tot interactief", enz. worden bespot als User Timing-metingen en teruggeïnjecteerd in de traceergegevens die zijn opgeslagen met de vlag --save-assets .

Als u de vlag --save-assets gebruikt, kunt u de tracering nu in DevTools plaatsen of openen in de DevTools Timeline Viewer . U kunt uw belangrijkste statistieken in context zien met het volledige spoor van het laden van de pagina.

Gegevens traceren

Vuurtoren kijker

In HTML-rapporten ziet u een nieuwe knop met opties om het rapport in verschillende formaten te exporteren. Eén van die opties is ‘Openen in Viewer’. Als u op deze knop klikt, wordt het rapport naar de online Viewer verzonden, waar u het rapport verder kunt delen met GitHub-gebruikers.

Knop Openen in Viewer
Openen in Viewer-resultaat

Achter de schermen krijgt Viewer via OAuth uw toestemming om een ​​GitHub- geheime inhoud te maken en slaat het rapport daar op. Omdat het wordt gedaan als uw basis, behoudt u de volledige controle over het delen van het rapport en kunt u het op elk gewenst moment verwijderen. Je kunt de toestemming van de kijker om gists te maken intrekken onder je GitHub-instellingen .

Prestatie-experiment

De eerste versie van het Performance Experiment- project is geland in 1.5.0. Hierdoor kunt u experimenteren met de laadprestaties van uw pagina, waarbij u interactief de effecten test van het blokkeren of vertragen van assets op uw kritieke pad tijdens de ontwikkeling .

Wanneer Lighthouse wordt uitgevoerd met de vlag --interactive , wordt een speciaal rapport gegenereerd dat interactieve selectie van kostbare paginabronnen mogelijk maakt. De experimentserver voert Lighthouse vervolgens opnieuw uit op die pagina terwijl de bronnen zijn geblokkeerd.

Runtime-instellingen wisselen

Meer informatie over het prestatie-experiment in Lighthouse.

Nieuwe documentatie

Last but not least hebben we de documentatie op developers.google.com/web/tools/lighthouse/ gemoderniseerd en nieuwe auditreferenties toegevoegd.

Nieuwe documentatie

Dat is het voor nu!

Voor alle details over het nieuwste in Lighthouse, zie de volledige release-opmerkingen op GitHub. Zoals altijd kunt u ons bellen om bugs te melden , functieverzoeken in te dienen of te brainstormen over wat u hierna graag zou willen zien.