Utilizza gli strumenti per misurare il rendimento

Sam Dutton

Esistono diversi obiettivi principali per creare un sito con prestazioni efficaci e resiliente con costi dei dati ridotti.

È necessario eseguire un controllo per ogni scopo.

Obiettivo	Why?	Per cosa eseguire il test?
Garantisci la privacy, la sicurezza e l'integrità dei dati e consenti un utilizzo avanzato delle API	Perché HTTPS è importante	HTTPS implementato per tutte le pagine/percorsi e tutte le risorse del sito.
Migliora le prestazioni di caricamento	Il 53% degli utenti abbandona i siti che impiegano più di tre secondi a caricarsi	JavaScript e CSS che possono essere caricati in modo asincrono o differito. Imposta gli obiettivi in termini di tempo per l'interazione e dimensioni del payload: ad esempio, TTI su 3G. Imposta un budget del rendimento.
Riduci il peso della pagina	• Ridurre i costi dei dati per gli utenti con piani dati limitati • Ridurre i requisiti di archiviazione delle app web, particolarmente importanti per gli utenti che usano dispositivi con prestazioni inferiori • Ridurre i costi di hosting e pubblicazione • Migliorare le prestazioni della gestione, l'affidabilità e la resilienza	Imposta un budget per il peso della pagina, ad esempio un primo caricamento inferiore a 400 kB. Controlla l'eventuale presenza di JavaScript intenso. Controlla le dimensioni dei file per trovare immagini gonfiate, contenuti multimediali, HTML, CSS e JavaScript. Trova le immagini che potrebbero essere caricate tramite caricamento lento e verifica la presenza di codice inutilizzato con gli strumenti di copertura.
Riduci le richieste di risorse	• Ridurre i problemi di latenza • Ridurre i costi di servizio • Migliorare le prestazioni, l'affidabilità e la resilienza della gestione	Cerca richieste eccessive o non necessarie per qualsiasi tipo di risorsa. Ad esempio: file che vengono caricati più volte, JavaScript caricato in più versioni, CSS mai utilizzato, immagini che non vengono mai visualizzate (o che potrebbero essere caricate tramite caricamento lento).
Ottimizzazione dell'utilizzo della memoria	La memoria può diventare il nuovo collo di bottiglia, soprattutto sui dispositivi mobili	Utilizza Task Manager di Chrome per confrontare il tuo sito con altri per l'utilizzo della memoria durante il caricamento della home page e l'uso di altre funzionalità del sito.
Riduci il carico della CPU	I dispositivi mobili hanno CPU limitata, in particolare dispositivi con specifiche basse	Controlla l'eventuale presenza di JavaScript intenso. Trova JavaScript e CSS inutilizzati con gli strumenti di copertura. Controlla l'eventuale presenza di dimensioni del DOM eccessive e di script eseguiti inutilmente al primo caricamento. Cerca JavaScript caricato in più versioni o librerie che potrebbero essere evitate con un refactoring secondario.

È disponibile una vasta gamma di strumenti e tecniche per il controllo dei siti web:

• Strumenti di sistema
• Strumenti del browser integrati
• Estensioni del browser
• Applicazioni di test online
• Strumenti di emulazione
• Analisi
• Metriche fornite dai server e dai sistemi aziendali
• Registrazione dello schermo e video
• Test manuali

Di seguito è riportato l'approccio pertinente per ciascun tipo di controllo.

Nota: le immagini rappresentano di gran lunga la peso più grande e la maggior parte delle richieste per la maggior parte delle pagine web. La latenza peggiora man mano che la connettività peggiora, per cui un numero eccessivo di richieste di file immagine è un problema crescente con il passaggio del web ai dispositivi mobili. Anche le immagini consumano energia: più richieste di immagini, più utilizzo della radio, più batterie scariche. Anche solo per il rendering delle immagini richiede energia, in base alle dimensioni e alla quantità delle immagini. Analogamente per la memoria: piccoli aumenti nelle dimensioni in pixel comportano un notevole aumento dell'utilizzo della memoria. Con le immagini sui dispositivi mobili, in particolare su dispositivi con prestazioni limitate, la memoria può diventare il nuovo collo di bottiglia. Le immagini gonfiate sono problematici anche per gli utenti che hanno piani dati limitati. Rimuovi le immagini ridondanti. Se non riesci a eliminarli, ottimizzali: aumenta il più possibile la compressione, riduci le dimensioni in pixel e utilizza il formato che genera i file di dimensioni minori. L'ottimizzazione delle "immagini hero" come banner e sfondi è una soluzione facile e una tantum.

Registra le richieste di risorse: numero, dimensioni, tipo e tempistiche

Un buon punto di partenza per controllare un sito è controllare le pagine con gli strumenti di rete del browser. Se non sai come fare, apri la Guida introduttiva nel riquadro di rete di Chrome DevTools. Strumenti simili sono disponibili per Firefox, Safari, Internet Explorer ed Edge.

Ricorda di tenere traccia dei risultati prima di apportare modifiche. Per le richieste di rete, l'operazione può essere semplice come uno screenshot: puoi anche salvare i dati del profilo come file JSON. Di seguito sono riportate ulteriori informazioni su come salvare e condividere i risultati dei test.

Prima di iniziare a controllare l'utilizzo della rete, assicurati di disabilitare la cache del browser per ottenere statistiche accurate per le prestazioni al primo caricamento. Se esegui già la memorizzazione nella cache tramite un service worker, svuota l'archiviazione API Cache. Puoi utilizzare una finestra di navigazione in incognito (privata), in modo da non doverti preoccupare di disabilitare la cache del browser o di rimuovere le voci memorizzate nella cache in precedenza.

Di seguito sono riportate alcune funzionalità e metriche principali che devi verificare con gli strumenti del browser:

• Prestazioni di carico: Lighthouse fornisce un riepilogo delle metriche di carico. Addy Osmani ha scritto un ottimo riepilogo dei momenti chiave degli utenti per il caricamento pagina.
• Eventi della sequenza temporale per il caricamento e l'analisi delle risorse e l'utilizzo della memoria. Se vuoi approfondire, esegui la profilazione di memoria e JavaScript.
• Peso totale della pagina e numero di file.
• Numero e peso dei file JavaScript.
• Eventuali file JavaScript individuali particolarmente grandi (ad esempio, 100 kB).
• JavaScript inutilizzato. Puoi controllare usando lo strumento di copertura di Chrome.
• Numero totale e peso dei file immagine.
• I singoli file immagine particolarmente grandi.
• Formati dell'immagine: esistono PNG che possono essere JPEG o SVG? WebP viene utilizzato con i fallback?
• Indica se vengono utilizzate tecniche per le immagini adattabili (come srcset).
• Dimensioni del file HTML.
• Numero totale e peso dei file CSS.
• CSS inutilizzato. In Chrome, utilizza il riquadro di copertura.
• Verifica l'utilizzo problematico di altri asset, ad esempio i caratteri web (inclusi i caratteri delle icone).
• Controlla la sequenza temporale di DevTools per verificare se è presente qualsiasi elemento che blocchi il caricamento della pagina.

Se utilizzi una rete Wi-Fi veloce o una rete cellulare veloce, esegui il test con la larghezza di banda bassa e l'emulazione ad alta latenza. Ricordati di eseguire il test su dispositivi mobili e desktop: alcuni siti utilizzano lo sniffing UA per fornire asset e layout diversi per dispositivi diversi. Potrebbe essere necessario eseguire il test sull'hardware reale utilizzando il debug remoto, non solo con la simulazione del dispositivo.

Nota: spesso puoi utilizzare gli strumenti del browser per individuare i problemi semplicemente controllando le risposte della rete e ordinando i contenuti in base alle dimensioni. Ad esempio, il formato PNG da 349 kB qui potrebbe essere un problema:

Certo, è emerso chiaramente che l'immagine era larga 1600 px, mentre la larghezza di visualizzazione massima dell'elemento era di soli 400 px. Decompressa, l'immagine aveva bisogno di oltre 4 MB di memoria, molto su un cellulare. Il salvataggio dell'immagine come JPEG largo 800 px (per far fronte a una larghezza di visualizzazione di 400 px su schermi 2x) e l'ottimizzazione con ImageOptim hanno prodotto un file di 17 kB: confronta il PNG originale con il jpeg ottimizzato.

Si tratta di un miglioramento del 95%.

Controlla il carico di memoria e CPU

Prima di apportare modifiche, prendi nota dell'utilizzo della memoria e della CPU.

In Chrome puoi accedere a Task Manager dal menu Finestra. Questo è un modo semplice per controllare i requisiti di una pagina web.

Il Task Manager di Chrome: fai attenzione ai problemi di memoria e CPU.

Testare le prestazioni del primo caricamento e successivo

Lighthouse, WebPagetest e Pagespeed Insights sono utili per analizzare la velocità, il costo dei dati e l'utilizzo delle risorse. WebPagetest verifica anche la memorizzazione nella cache dei contenuti statici, il tempo per il primo byte e l'uso efficace delle reti CDN nel tuo sito.

Nota: abilita la memorizzazione nella cache di contenuti statici in modo che i browser possano memorizzare nella cache gli asset la prima volta che vengono richiesti, configurando il server in modo da includere le intestazioni appropriate. Se un browser è in grado di memorizzare le risorse nella cache, non dovrà recuperarle dalla rete durante le visite successive. Questo migliora la velocità di caricamento, riduce i costi dei dati e riduce il carico di rete e del server, anche per i browser che non supportano la memorizzazione nella cache tramite un service worker. Anche se utilizzi l'API Cache è importante abilitare la memorizzazione nella cache del browser. Per ulteriori informazioni, dai un'occhiata agli strumenti PageSpeed e alle risorse su Web Fundamentals (in particolare, la sezione relativa all'invalidazione e l'aggiornamento delle risposte memorizzate nella cache).

Salva i risultati

• WebPagetest: i risultati del test hanno ciascuno il proprio URL.
• Pagespeed Insights: lo strumento online Pagespeed Insights ora include i dati del report sull'esperienza utente di Chrome evidenziando statistiche sulle prestazioni reali.
• Lighthouse: salva i report dal riquadro di controllo di Chrome DevTools facendo clic sul pulsante di download:

  

Test per i requisiti fondamentali delle app web progressive

Lighthouse ti aiuta a testare sicurezza, funzionalità, accessibilità, prestazioni e prestazioni dei motori di ricerca. In particolare, Lighthouse verifica se il tuo sito implementa correttamente le funzionalità PWA, come i service worker e il file manifest dell'app web.

Lighthouse verifica anche se il sito può fornire un'esperienza offline accettabile.

Puoi scaricare un report Lighthouse in formato JSON oppure, se utilizzi l'estensione di Chrome Lighthouse, condividerlo come Gist GitHub: fai clic sul pulsante di condivisione, seleziona Apri nel visualizzatore, quindi fai di nuovo clic sul pulsante Condividi nella nuova finestra e su Salva come Gist.

Esporta un report in un report sull'estensione di Chrome Lighthouse: fai clic sul pulsante Condividi

Utilizza analisi, monitoraggio eventi e metriche aziendali per monitorare le prestazioni reali

Se possibile, tieni un registro dei dati di analisi prima di implementare le modifiche: frequenza di rimbalzo, tempo sulla pagina, pagine di uscita: ciò che è pertinente ai tuoi requisiti aziendali.

Se possibile, registra le metriche aziendali e tecniche che potrebbero essere interessate, in modo da poter confrontare i risultati dopo aver apportato le modifiche. Ad esempio, un sito di e-commerce potrebbe monitorare gli ordini al minuto o registrare statistiche relative a stress e test di resistenza. I costi di archiviazione backend, i requisiti di CPU, i costi di pubblicazione e la resilienza potrebbero migliorare se riduci il peso della pagina e le richieste di risorse.

Se l'analisi non è implementata, è il momento. Le metriche e le analisi aziendali sono l'ultimo arbitro del funzionamento o meno del tuo sito. Se opportuno, incorpora il monitoraggio eventi per le azioni degli utenti, come clic sui pulsanti e riproduzioni video. Puoi anche implementare l'analisi del flusso degli obiettivi, ovvero i percorsi tramite i quali gli utenti raggiungono le "conversioni".

Puoi tenere d'occhio la metrica Velocità del sito di Google Analytics per verificare la correlazione tra le metriche sul rendimento e quelle aziendali. Ad esempio: "Quanto è stato veloce il caricamento della home page?" rispetto a "L'accesso tramite la home page ha generato una vendita?"

Google Analytics utilizza i dati dell'API Navigation Timing.

Ti consigliamo di registrare i dati utilizzando una delle API JavaScript Performance o le tue metriche, ad esempio:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Puoi anche utilizzare Reportingosservazione per verificare la presenza di avvisi sul ritiro e sull'intervento del browser. Questa è una delle molte API per ottenere misurazioni in tempo reale degli utenti reali.

Esperienza reale: registrazione dello schermo e video

Crea una registrazione video del caricamento delle pagine su dispositivi mobili e computer. Questo funziona ancora meglio con frequenze fotogrammi elevate e se aggiungi un timer.

Potresti anche voler salvare gli screencast. Esistono molte app per la registrazione dello screencast per piattaforme Android, iOS e desktop (e script per fare lo stesso).

Il caricamento della pagina di registrazione dei video funziona in modo molto simile alla visualizzazione sequenza in WebPagetest o all'acquisizione di screenshot in Chrome DevTools. Ottieni un record realistico della velocità di caricamento dei componenti di una pagina, ovvero velocità e lentezza. Salva le registrazioni video e gli screencast per confrontarli con i miglioramenti successivi.

Un confronto diretto tra le due versioni può essere un ottimo modo per dimostrare i miglioramenti.

Che altro?

Se pertinente, ottieni un punteggio Web Bloat. Questo è un test divertente, ma può anche essere un modo convincente per dimostrare l'eccesso di codice o per dimostrare che hai apportato miglioramenti.

La sezione Quanto costa il mio sito? riportata di seguito, fornisce una guida approssimativa ai costi finanziari del caricamento del sito in diverse regioni.

Sono disponibili molti altri strumenti autonomi e online: dai un'occhiata alla pagina perf.rocks/tools.