Come utilizzare l'API PageSpeed ​​Insights per monitorare le prestazioni della pagina

Esistono strumenti per aiutarti a monitorare le prestazioni della pagina e valutare i tuoi miglioramenti. Uno dei migliori è PageSpeed ​​Insights. È disponibile come applicazione Web e come scheda Lighthouse in DevTools di Chrome (gli stessi DevTools sono disponibili anche in Edge, Opera, Brave e Vivaldi).

Le prestazioni delle pagine Web sono più importanti che mai. Gli utenti si aspettano un'esperienza fluida e reattiva che rivaleggia con le applicazioni desktop. Inoltre, i Core Web Vitals di Google misurano le prestazioni della pagina: influenzano il PageRank e gli sforzi di ottimizzazione dei motori di ricerca.

WordPress esegue più di un terzo di tutti i siti Web, ma le prestazioni sono influenzate da hosting inefficace, temi lenti e un'eccessiva dipendenza dai plug-in. Puoi risolvere la maggior parte dei problemi passando a un buon host web e utilizzando le migliori tecniche di performance.

Accesso al faro

Avvia Lighthouse aprendo la pagina che desideri esaminare e premendo Ctrl/Cmd + Maiusc + I o scegliendo Strumenti per sviluppatori da Altri strumenti nel menu. Passa alla scheda Lighthouse e fai clic sul pulsante Analizza caricamento pagina . I risultati vengono visualizzati dopo pochi secondi:

È possibile approfondire le percentuali di livello superiore per scoprire ulteriori informazioni e suggerimenti che risolvono problemi noti. Lo strumento ha un valore inestimabile ma ci sono aspetti negativi:

• Devi avviare manualmente un'esecuzione per ogni pagina che stai testando.
• Non è facile registrare come i fattori siano migliorati o peggiorati nel tempo.
• Ci sono molti dati da controllare ed è facile sbagliare qualcosa.
• I dettagli tecnici sono forniti agli sviluppatori. Forse è travolgente per clienti e manager che desiderano una rapida panoramica dei progressi.
• Le corse del faro possono essere influenzate dal dispositivo locale e dalla velocità della rete, il che potrebbe portare a false supposizioni.

L'API PageSpeed ​​Insights fornisce un modo per risolvere questi problemi in modo che i test possano essere automatizzati, registrati e confrontati.

Cos'è l'API di PageSpeed ​​Insights?

Google fornisce un'API REST PageSpeed ​​Insights gratuita che restituisce i dati in formato JSON contenenti tutte le metriche Lighthouse e altro ancora. Ti consente di automatizzare l'esecuzione delle pagine, archiviare i dati risultanti, rivedere le modifiche nel tempo e visualizzare le informazioni esatte di cui hai bisogno.

L'API PageSpeed ​​Insights emula il modo in cui Google vede il tuo sito. Puoi eseguire un rapporto ogni pochi giorni o ogni volta che rilasci un aggiornamento delle prestazioni.

I risultati sono utili ma non necessariamente indicativi dell'effettiva esperienza dell'utente. L'API delle prestazioni del browser è un'opzione migliore quando si desidera monitorare le prestazioni del mondo reale su tutti i dispositivi e le reti dell'utente.

Avvio rapido dell'API di PageSpeed ​​Insights

Copia il seguente indirizzo nel tuo browser web e modifica l' url per valutare le prestazioni della tua pagina:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox è l'ideale perché ha un visualizzatore JSON integrato sebbene Chrome abbia estensioni che forniscono la stessa funzionalità. Il punteggio complessivo delle prestazioni del faro è evidenziato di seguito:

Puoi modificare la stringa di query dell'URL dell'API per le tue pagine e preferenze. L'unico parametro richiesto è url , ad es

url=https://mysite.com/page1

Un test desktop viene eseguito per impostazione predefinita ma puoi richiederlo esplicitamente con:

strategy=desktop

o passa al cellulare con:

strategy=mobile

Vengono eseguiti solo i test delle prestazioni, a meno che non specifichi una o più categorie di interesse:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

È possibile definire una lingua specifica impostando un locale, ad esempio il francese:

locale=fr-FR

e i dettagli della campagna di Google Analytics possono essere impostati con:

utm_campaign=<campaign>
utm_source=<source>

Il servizio è gratuito per richieste poco frequenti ma dovrai registrarti per una chiave API di Google se intendi eseguire molti test dallo stesso indirizzo IP in un breve periodo. La chiave viene aggiunta all'URL con:

key=<api-key>

Puoi creare la stringa di query dell'URL specificando i parametri scelti separati da caratteri e commerciale (&). Il seguente URL dell'API testa la pagina all'indirizzo https://mysite.com/ utilizzando un dispositivo mobile per valutare le prestazioni e i criteri di accessibilità:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Puoi creare i tuoi URL o utilizzare lo strumento per la creazione di URL dell'API di Google PageSpeed ​​se hai bisogno di ulteriore assistenza.

Risultati JSON dell'API PageSpeed ​​Insights

I test in genere restituiscono circa 600 Kb di dati JSON a seconda delle categorie scelte, del numero di risorse nella pagina e della complessità degli screenshot (incorporati nel formato base64).

La quantità di dati è scoraggiante, ci sono alcune duplicazioni e la documentazione dei risultati non è sempre chiara. Il JSON è suddiviso in quattro sezioni come descritto di seguito.

esperienza di caricamento

Si tratta di metriche calcolate per l'esperienza di caricamento della pagina dell'utente finale. Include informazioni come Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS e FIRST_INPUT_DELAY_MS. I dettagli e un valore di "categoria" restituiscono FAST, AVERAGE, SLOW o NONE se non è stata effettuata alcuna misurazione. Esempio:

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

Si tratta di metriche aggregate calcolate per le esperienze di caricamento delle pagine di tutti gli utenti. Le sezioni sono identiche a loadingExperience sopra ed è improbabile che i siti con meno traffico mostrino differenze nelle cifre.

lighthouseRisultato

Questa è la sezione più grande e contiene tutte le metriche Lighthouse. Fornisce informazioni sul test:

• requiredUrl – l'URL che hai richiesto
• finalUrl: la pagina effettiva testata dopo aver seguito tutti i reindirizzamenti
• lighthouseVersion – la versione del software
• fetchTime: l'ora in cui è stato eseguito il test
• userAgent – ​​la stringa dell'agente utente del browser utilizzato per il test
• ambiente: informazioni estese sull'agente utente
• configSettings: le impostazioni passate all'API

Questa è seguita da una sezione "audit" con molte sezioni tra cui javascript non utilizzato, regole CSS non utilizzate, peso totale in byte, reindirizzamenti, dimensione del dominio, elemento di pittura con il contenuto più grande, tempo di risposta del server, rete -requests, cumulative-layout-shift, first-signful-paint, screenshot-thumbnails e full-page-screenshot.

La maggior parte delle metriche di audit fornisce una sezione "dettagli" che contiene fattori come "overallSavingsBytes" e "overallSavingsMs" che stima i vantaggi dell'implementazione di un miglioramento delle prestazioni.

Le sezioni "screenshot" a pagina intera e in miniatura contengono dati immagine Base64 incorporati.

Una sezione "metriche" fornisce un riepilogo di tutte le metriche in un array di "elementi", ad es

 "metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

La sezione "audit" è seguita da "categorie" che fornisce i punteggi Lighthouse complessivi per le categorie scelte trasmesse all'URL dell'API:

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

Il "punteggio" è un numero compreso tra 0 e 1 che viene normalmente mostrato come percentuale nei rapporti Lighthouse. In generale, un punteggio di:

• Da 0,9 a 1,0 va bene
• Da 0,5 a meno di 0,9 indica che è necessario un miglioramento
• sotto 0,5 è scarso e richiede un'attenzione più urgente

La sezione "auditRefs" fornisce un elenco di tutte le metriche e le ponderazioni utilizzate per calcolare ciascun punteggio.

analisiUTCTimestamp

Infine, viene riportato il tempo di analisi. Questo dovrebbe essere identico all'ora mostrata in lighthouseResult.fetchTime.

Metriche dei risultati JSON utili

Ti consiglio di salvare ed esaminare il risultato JSON in un editor di testo. Alcuni hanno formattatori JSON integrati o disponibili come plug-in. In alternativa, puoi utilizzare strumenti online gratuiti come:

• Formattatore e validatore JSON
• Formattatore JSON
• jsonformatter.io

È probabile che le seguenti metriche siano utili. Ricorda di impostare le opzioni di categoria associate sull'URL come necessario.

Metriche di riepilogo

Punteggio complessivo da 0 a 1:

Metriche delle prestazioni

Questi includono i punteggi Core Web Vitals da 0 a 1:

Altri utili punteggi delle prestazioni includono:

Di solito è possibile ottenere cifre e unità reali come:

• lighthouseResult.audits.total-byte-weight.numericValue –
  la dimensione totale della pagina, ad esempio 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  le unità utilizzate per la dimensione totale della pagina, ad esempio "byte"

In alternativa, "displayValue" di solito contiene un messaggio leggibile con sia la cifra che l'unità:

• lighthouseResult.audits.server-response-time.displayValue –
  un messaggio sul tempo di risposta, ad es. "Il documento root ha impiegato 170 ms"
• lighthouseResult.audits.dom-size.displayValue –
  un messaggio sul numero di elementi nel DOM, ad esempio "543 elementi"

Crea un dashboard delle prestazioni senza codice

I feed API live possono essere letti ed elaborati in molti sistemi, incluso Microsoft Excel. (Un po' stranamente, Fogli Google non supporta i feed JSON senza ulteriori plug-in o codice macro. Supporta XML.)

Per importare il punteggio delle prestazioni complessive dal vivo in Excel, avvia un nuovo foglio di calcolo, passa alla scheda Dati e fai clic su Dal Web . Inserisci l'URL dell'API di PageSpeed ​​Insights e fai clic su OK:

Fare clic su Connetti nella finestra di dialogo successiva e mantenere l'impostazione predefinita (anonimo). Passerai allo strumento Impostazioni query :

Fare clic su Registra a destra della metrica dei risultati faro . Quindi fai clic sullo stesso su categorie e prestazioni per visualizzare in dettaglio la gerarchia degli oggetti JSON:

Fai clic sull'icona Into Table in alto dalle opzioni del menu di scelta rapida.

È quindi possibile fare clic sulla freccia del filtro nell'intestazione della tabella per rimuovere tutto tranne il punteggio prima di fare clic su OK :

Infine, fai clic su Chiudi e carica per mostrare il punteggio della performance dal vivo nel tuo foglio di lavoro:

Puoi seguire lo stesso processo per altre metriche di interesse.

Crea una dashboard delle prestazioni Web

Questa dimostrazione Codepen fornisce un modulo in cui è possibile inserire un URL e scegliere l'analisi desktop o mobile per ottenere risultati.

Il codice crea un URL PageSpeed ​​Insights, richiama l'API, quindi esegue il rendering di vari risultati in una tabella di riepilogo più rapida da visualizzare rispetto a un report Lighthouse standard:

La funzione asincrona startCheck() viene chiamata quando il modulo viene inviato. Annulla l'evento di invio e nasconde i risultati precedenti:

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

Quindi costruisce apiURL dai dati del modulo e disabilita i campi:

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

L'API Fetch viene utilizzata per chiamare l'URL PageSpeed, ottenere la risposta e analizzare la stringa JSON in un oggetto JavaScript utilizzabile. Un blocco try/catch garantisce la cattura degli errori:

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

L'oggetto risultato viene passato a una funzione showResult() . Questo estrae le proprietà e le inserisce nella tabella dei risultati o in qualsiasi altro elemento HTML che ha l'attributo del punto dati impostato su una proprietà dell'API PageSpeed, ad es.

<td data-point="lighthouseResult.categories.performance.score"></td>

La fine del blocco try:

 // output result showResult(result); show(status, false); show(resultTable); }

Infine, un blocco catch gestisce gli errori e i campi del modulo vengono riabilitati in modo da poter eseguire ulteriori test:

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

Ulteriori opzioni di sviluppo

Il codice di esempio sopra recupera un risultato dall'API PageSpeed ​​Insights quando lo richiedi. Il report è più configurabile rispetto a Lighthouse, ma l'esecuzione rimane un processo manuale.

Se intendi sviluppare la tua dashboard, potrebbe essere pratico creare una piccola applicazione che richiami l'API PageSpeed ​​Insights e memorizzi il JSON risultante in un nuovo record di database rispetto all'URL testato e alla data/ora corrente. La maggior parte dei database ha il supporto JSON sebbene MongoDB sia l'ideale per l'attività. Un cron job può chiamare la tua applicazione a tempo, forse una volta al giorno durante le prime ore del mattino.

Un'applicazione lato server può quindi implementare la propria API REST in base ai requisiti di reportistica, ad esempio restituire le modifiche a specifiche metriche delle prestazioni tra due date. Può essere richiamato da JavaScript lato client per visualizzare tabelle o grafici che illustrano i miglioramenti delle prestazioni nel tempo.

Se desideri creare report complessi con quantità significative di dati, è preferibile pre-calcolare le cifre una volta al giorno nel momento in cui sono disponibili nuovi dati PageSpeed. Dopotutto, non vuoi mostrare come il rendimento sta migliorando su un rapporto che richiede minuti per essere generato!

Riepilogo

Lo strumento Lighthouse di Chrome è favoloso ma è un lavoro ingrato valutare frequentemente molte pagine. L'API PageSpeed ​​Insights ti consente di valutare le prestazioni del sito utilizzando tecniche programmatiche. I benefici:

• I test delle prestazioni possono essere automatizzati. Non puoi dimenticare di eseguire un test.
• I risultati vengono raccolti sui server di Google in modo che i fattori di velocità del dispositivo locale e della rete abbiano meno influenza.
• Le metriche includono informazioni che di solito non sono disponibili in Lighthouse.
• Metriche importanti possono essere registrate e monitorate nel tempo per garantire che le prestazioni della pagina siano migliorate con ogni aggiornamento.
• Le informazioni su prestazioni, accessibilità e SEO possono essere visualizzate su report semplificati in modo che siano disponibili a colpo d'occhio per sviluppatori, manager e clienti.