Le prestazioni web possono avere un enorme impatto sull'intera esperienza utente. Se di recente avete cercato di migliorare le prestazioni del vostro sito, avete probabilmente 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 il rendimento sul Web mobile e desktop.
I punteggi di PageSpeed si basano su una serie di fattori, tra cui la riduzione delle dimensioni degli script, l'ottimizzazione delle immagini, la compressione dei contenuti con gzip, i target dei tocchi ridimensionati in modo appropriato e i reindirizzamenti delle pagine di destinazione evitati.
Dato che il 40% degli utenti abbandona potenzialmente le pagine il cui caricamento richiede più di tre secondi, la attenzione alla velocità di caricamento delle pagine sui dispositivi degli utenti sta diventando sempre più una parte essenziale del nostro flusso di lavoro di sviluppo.
Metriche sulle prestazioni nel processo di compilazione
Anche se si passa manualmente a PageSpeed Insights per scoprire se va bene il punteggio, diversi sviluppatori hanno chiesto se sia possibile ottenere un punteggio di prestazioni simile nel processo di creazione.
La risposta è: assolutamente.
Introduzione a PSI per Node
Oggi siamo lieti di presentare PSI per Node, un nuovo modulo che funziona molto bene con Gulp, Grunt e altri sistemi di compilazione. Può connettersi al servizio PageSpeed Insights e restituire un report dettagliato sulle vostre prestazioni web. Diamo un'occhiata a un'anteprima del tipo di report che consente:
I risultati riportati sopra sono utili per avere un'idea del tipo di miglioramenti che è possibile apportare. Ad esempio, un valore 5.92 per ridimensionare i contenuti in base all'area visibile indica che "una parte" può essere ancora eseguita, mentre un valore 24 per ridurre al minimo le risorse di blocco del rendering potrebbe suggerire di dover rimandare il caricamento di JS utilizzando l'attributo async.
Abbattimento delle barriere all'accesso a PageSpeed Insights
Se in passato hai provato a utilizzare l'API PageSpeed Insights o hai tentato di utilizzare uno degli strumenti che sviluppiamo sulla base dell'API, probabilmente hai dovuto registrarti per ottenere una chiave API dedicata. Sappiamo che, anche se questa operazione richiede solo pochi minuti, potrebbe non essere possibile ricevere approfondimenti nell'ambito del normale flusso di lavoro.
Siamo lieti di informarti che il servizio PageSpeed Insights supporta l'esecuzione di richieste senza chiave API per un massimo di 1 richiesta ogni 5 secondi (molto per tutti). Per un utilizzo più regolare o per build di produzione serie, probabilmente dovrai registrarti per una chiave.
Il modulo PSI supporta sia l'opzione nokey, che consente di configurarlo in meno di pochi minuti, sia l'opzione key per un periodo più lungo. I dettagli su come registrarsi per una chiave API sono documentati.
Come iniziare
Sono disponibili due opzioni per l'integrazione di PSI nel flusso di lavoro. Puoi integrarlo nel processo di compilazione o eseguirlo come strumento installato a livello globale nel tuo sistema.
Processo di compilazione
Utilizzare PSI nel processo di compilazione Grunt o Gulp è abbastanza semplice. Se stai lavorando a un progetto Gulp, puoi installare e utilizzare direttamente PSI.
Installa
Installa PSI utilizzando npm e passa --save-dev per salvarlo nel file pacchetto.json.
npm install psi --save-dev
Quindi definisci un'attività Gulp nel tuo gulpfile come segue (illustrato 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 i passaggi precedenti, puoi quindi eseguire l'attività utilizzando:
gulp psi
E se utilizzi Grunt, puoi usare grunt-pagespeed di James Cryer, che ora utilizza PSI per i suoi report.
Installa
npm install grunt-pagespeed --save-dev
Quindi carica l'attività nel tuo Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
e configuralo 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. Possiamo utilizzare ancora una volta npm per installare lo strumento:
$ npm install -g psi
Tramite qualsiasi finestra del terminale, richiedi i report PageSpeed Insights per un sito (con l'opzione nokey o un elemento key specifico per l'API come segue):
psi http://www.html5rocks.com --nokey --strategy=mobile
o per coloro che dispongono di una chiave API registrata:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
È tutto!
Promuovi e fai in modo che le prestazioni siano 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 le prestazioni web su computer e dispositivi mobili e sono utili se utilizzate come parte del regolare flusso di lavoro post-deployment.
Non vediamo l'ora di ricevere il tuo feedback e speriamo che PSI ti aiuti a migliorare la cultura delle prestazioni nel tuo team.