Le prestazioni web possono avere un enorme impatto sull'intera esperienza utente. Se di recente hai cercato di migliorare le prestazioni del tuo sito, probabilmente hai sentito parlare di PageSpeed Insights, uno strumento che analizza le pagine e offre consigli su come renderle più veloci in base alle best practice per le prestazioni web su dispositivi mobili e computer.
I punteggi di PageSpeed si basano su una serie di fattori, tra cui il livello di ottimizzazione degli script, l'ottimizzazione delle immagini, la compressione GZIP dei contenuti, le dimensioni appropriate dei target di tocco e l'evitare i reindirizzamenti alla pagina di destinazione.
Dato che il 40% delle persone potrebbe abbandonare le pagine che richiedono più di 3 secondi per caricarsi, preoccuparsi della velocità di caricamento delle pagine sui dispositivi degli utenti sta diventando sempre più una parte essenziale del nostro flusso di lavoro di sviluppo.
Metriche sul rendimento nel processo di compilazione
Anche se è possibile accedere manualmente a PageSpeed Insights per conoscere i punteggi, alcuni sviluppatori ci hanno chiesto se è possibile ottenere un punteggio del rendimento simile nel processo di compilazione.
La risposta è: assolutamente.
Introduzione a PSI per Node
Oggi siamo lieti di presentare PSI per Node, un nuovo modulo che funziona perfettamente con Gulp, Grunt e altri sistemi di compilazione e può collegarsi al servizio PageSpeed Insights e restituire un report dettagliato sul rendimento del tuo sito web. Ecco un'anteprima del tipo di report abilitati:
I risultati riportati sopra sono utili per avere un'idea del tipo di miglioramenti che possono essere apportati. Ad esempio, un valore di 5,92 per la regolazione delle dimensioni dei contenuti in base al viewport significa che è ancora possibile fare "qualche" lavoro, mentre un valore di 24 per la riduzione al minimo delle risorse che bloccano il rendering potrebbe indicare che è necessario posticipare il caricamento di JS utilizzando l'attributo async.
Riduzione delle barriere di accesso a PageSpeed Insights
Se in passato hai provato a utilizzare l'API PageSpeed Insights o uno degli strumenti che abbiamo creato in base a questa API, probabilmente hai dovuto registrare una chiave API dedicata. Sappiamo che, anche se richiede solo pochi minuti, può essere spiacevole dover eseguire questa operazione per ricevere gli Approfondimenti nel normale flusso di lavoro.
Siamo lieti di informarti che il servizio PageSpeed Insights supporta l'invio di richieste senza una chiave API per un massimo di 1 richiesta ogni 5 secondi (più che sufficiente per chiunque). Per un utilizzo più regolare o per build di produzione serie, ti consigliamo di registrarti per ottenere una chiave.
Il modulo PSI supporta sia un'opzione nokey per la configurazione in meno di qualche minuto sia l'opzione key per un po' più di tempo. Sono disponibili dettagli su come registrarsi per ottenere una chiave API.
Per iniziare
Esistono due opzioni per integrare PSI nel flusso di lavoro. Puoi integrarlo nel processo di compilazione o eseguirlo come strumento installato a livello globale sul tuo sistema.
Processo di compilazione
L'utilizzo di PSI nel processo di compilazione di Grunt o Gulp è abbastanza semplice. Se stai lavorando a un progetto Gulp, puoi installare e utilizzare PSI direttamente.
Installa
Installa PSI utilizzando npm e passa --save-dev per salvarlo nel file package.json.
npm install psi --save-dev
Quindi, definisci un'attività Gulp per questo nel file gulpfile come segue (argomento trattato anche nel nostro progetto di esempio Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Per quanto sopra, puoi eseguire l'attività utilizzando:
gulp psi
Se utilizzi Grunt, puoi utilizzare grunt-pagespeed di James Cryer, che ora utilizza PSI per i report.
Installa
npm install grunt-pagespeed --save-dev
Quindi carica l'attività nel file Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
e configurarlo per l'utilizzo:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Puoi quindi eseguire l'attività utilizzando:
grunt pagespeed
Installazione come strumento globale
Puoi anche installare PSI come strumento disponibile a livello globale sul tuo sistema. Ancora una volta, possiamo utilizzare npm per installare lo strumento:
$ npm install -g psi
In qualsiasi finestra del terminale, puoi richiedere i report di PageSpeed Insights per un sito (con l'opzione nokey o un key specifico per l'API come segue):
psi http://www.html5rocks.com --nokey --strategy=mobile
oppure per chi dispone di una chiave API registrata:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
È tutto!
Fai in modo che il rendimento diventi parte della tua cultura
Dobbiamo iniziare a pensare di più all'impatto dei nostri progetti e delle nostre implementazioni sull'esperienza utente.
Soluzioni come PSI possono tenere d'occhio il rendimento web su computer e dispositivi mobili e sono utili se utilizzate nell'ambito del normale flusso di lavoro post-implementazione.
Saremo lieti di ricevere il tuo feedback e ci auguriamo che PSI ti aiuti a migliorare la cultura del rendimento del tuo team.