Het automatiseren van webprestatiemetingen

Addy Osmani

Webprestaties kunnen een enorme impact hebben op uw gehele gebruikerservaring. Als u de laatste tijd heeft gekeken naar het verbeteren van de prestaties van uw eigen site, heeft u waarschijnlijk wel eens gehoord van PageSpeed ​​Insights : een tool die pagina's analyseert en advies geeft over hoe u ze sneller kunt maken op basis van best practices voor webprestaties op mobiel en desktop.

De scores van PageSpeed ​​zijn gebaseerd op een aantal factoren, waaronder hoe goed uw scripts zijn geminimaliseerd, afbeeldingen zijn geoptimaliseerd, inhoud is gecomprimeerd, tikdoelen van de juiste grootte zijn en omleidingen op bestemmingspagina's zijn vermeden.

Nu 40% van de mensen mogelijk pagina's verlaat die meer dan drie seconden nodig hebben om te laden, wordt de zorg over hoe snel uw pagina's worden geladen op de apparaten van uw gebruikers steeds meer een essentieel onderdeel van onze ontwikkelingsworkflow.

Prestatiestatistieken in uw bouwproces

Hoewel je handmatig naar PageSpeed ​​Insights gaat om erachter te komen hoe goed je scores zijn, hebben een aantal ontwikkelaars gevraagd of het mogelijk is om vergelijkbare prestatiescores in hun bouwproces te krijgen.

Het antwoord is: absoluut.

Introductie van PSI voor Node

Vandaag introduceren we graag PSI voor Node - een nieuwe module die uitstekend werkt met Gulp , Grunt en andere build-systemen en verbinding kan maken met de PageSpeed ​​Insights-service en een gedetailleerd rapport van uw webprestaties kan retourneren. Laten we eens kijken naar een voorbeeld van het type rapportage dat hiermee mogelijk is:

De bovenstaande resultaten zijn goed om een ​​idee te krijgen van het soort verbeteringen dat kan worden aangebracht. Een 5.92 voor het aanpassen van de grootte van de inhoud aan de viewport betekent bijvoorbeeld dat er nog steeds "wat" werk kan worden gedaan, terwijl een 24 voor het minimaliseren van de weergaveblokkeringsbronnen erop kan wijzen dat u het laden van JS moet uitstellen met behulp van het async attribuut.

De toegangsdrempel tot PageSpeed ​​Insights verlagen

Als u in het verleden de PageSpeed ​​Insights API heeft geprobeerd of heeft geprobeerd een van de tools te gebruiken die we erbovenop hebben gebouwd, heeft u zich waarschijnlijk moeten registreren voor een speciale API-sleutel. We weten dat, hoewel dit maar een paar minuten duurt, het een afknapper kan zijn als u Insights wilt verkrijgen als onderdeel van uw normale workflow.

We informeren u graag dat de PageSpeed ​​Insights-service het indienen van verzoeken zonder API-sleutel ondersteunt voor maximaal 1 verzoek per 5 seconden (genoeg voor iedereen). Voor regelmatiger gebruik of serieuze productiebuilds wilt u zich waarschijnlijk registreren voor een sleutel.

De PSI-module ondersteunt zowel een nokey optie om het in minder dan een paar minuten in te stellen, als de key voor iets langer. Details over hoe u zich kunt registreren voor een API-sleutel zijn gedocumenteerd.

Aan de slag

U heeft twee opties voor de manier waarop u PSI in uw workflow integreert. U kunt het integreren in uw bouwproces of het uitvoeren als een wereldwijd geïnstalleerde tool op uw systeem.

Bouw proces

Het gebruik van PSI in uw Grunt- of Gulp-bouwproces is redelijk eenvoudig. Als u aan een Gulp-project werkt, kunt u PSI rechtstreeks installeren en gebruiken.

Installeren

Installeer PSI met behulp van npm en geef --save-dev door om het op te slaan in uw package.json-bestand.

npm install psi --save-dev

Definieer er vervolgens als volgt een Gulp-taak voor in uw gulpbestand (ook behandeld in ons Gulp- voorbeeldproject ):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

Voor het bovenstaande kunt u de taak vervolgens uitvoeren met:

gulp psi

En als je Grunt gebruikt, kun je grunt-pagespeed van James Cryer gebruiken, die nu PSI gebruikt om zijn rapportage aan te sturen.

Installeren

npm install grunt-pagespeed --save-dev

Laad vervolgens de taak in uw Gruntfile:

grunt.loadNpmTasks('grunt-pagespeed');

en configureer het voor gebruik:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

U kunt de taak vervolgens uitvoeren met behulp van:

grunt pagespeed

Installeren als een globaal hulpmiddel

U kunt PSI ook als een wereldwijd beschikbare tool op uw systeem installeren. Nogmaals, we kunnen npm gebruiken om de tool te installeren:

$ npm install -g psi

En via elk terminalvenster kunt u PageSpeed ​​Insights-rapporten voor een site opvragen (met de nokey optie of een API-specifieke key als volgt):

psi http://www.html5rocks.com --nokey --strategy=mobile

of voor degenen met een geregistreerde API-sleutel:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

Dat is het!

Ga ervoor en maak prestaties onderdeel van uw cultuur

We moeten meer gaan nadenken over de impact van onze ontwerpen en implementaties op de gebruikerservaring.

Oplossingen zoals PSI kunnen uw webprestaties op desktop en mobiel in de gaten houden en zijn handig wanneer u ze gebruikt als onderdeel van uw reguliere workflow na de implementatie.

We zijn benieuwd naar uw feedback en hopen dat PSI de prestatiecultuur in uw team helpt verbeteren.