Utilizza gli strumenti per misurare il rendimento

Sam Dutton

Esistono diversi obiettivi principali per creare un sito resiliente e performante con un costo dei dati ridotto.

Per ogni obiettivo è necessario un controllo.

Esistono 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
• Analytics
• Metriche fornite da server e sistemi aziendali
• Registrazione dello schermo e video
• Test manuali

Di seguito scoprirai quale approccio è pertinente per ogni tipo di controllo.

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

Un buon punto di partenza per eseguire il controllo di un sito è controllare le pagine con gli strumenti di rete del browser. Se non sai come procedere, consulta la guida introduttiva del riquadro della rete di Chrome DevTools. Sono disponibili strumenti simili per Firefox, Safari, Internet Explorer e Edge.

Ricorda di tenere traccia dei risultati prima di apportare modifiche. Per le richieste di rete, può essere sufficiente 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 disattivare la cache del browser per ottenere statistiche accurate sul rendimento al primo caricamento. Se esegui già la memorizzazione nella cache tramite un servizio worker, svuota lo spazio di archiviazione dell'API Cache. Ti consigliamo di utilizzare una finestra di navigazione in incognito (privata) per non dover disattivare la cache del browser o rimuovere le voci memorizzate nella cache in precedenza.

Ecco alcune funzionalità e metriche di base da controllare con gli strumenti del browser:

• Rendimento del caricamento: Lighthouse fornisce un riepilogo delle metriche relative al carico. Addy Osmani ha scritto un ottimo riepilogo dei momenti chiave dell'utente per il caricamento della pagina.
• Eventi della cronologia per il caricamento e l'analisi delle risorse e l'utilizzo della memoria. Per approfondire, esegui il profiling della memoria e di JavaScript.
• Peso totale della pagina e numero di file.
• Numero e dimensione dei file JavaScript.
• Eventuali singoli file JavaScript particolarmente grandi (ad esempio superiori a 100 KB).
• Codice JavaScript inutilizzato. Puoi controllare utilizzando lo strumento di copertura di Chrome.
• Numero totale e dimensione dei file immagine.
• Eventuali singoli file immagine particolarmente grandi.
• Formati delle immagini: ci sono file PNG che potrebbero essere JPEG o SVG? WebP viene utilizzato con i fallback?
• Se vengono utilizzate tecniche per le immagini adattabili (ad esempio srcset).
• Dimensioni del file HTML.
• Numero totale e peso dei file CSS.
• CSS inutilizzato. In Chrome, utilizza il riquadro Copertura.
• Controlla se l'utilizzo di altri asset, come i caratteri web (inclusi i caratteri icona), presenta problemi.
• Controlla la sequenza temporale di DevTools per verificare la presenza di elementi che bloccano il caricamento della pagina.

Se lavori su una rete Wi-Fi veloce o una connessione cellulare veloce, esegui il test con simulazione di larghezza di banda ridotta e latenza elevata. Ricorda di eseguire il test sia su dispositivi mobili che su computer: alcuni siti utilizzano lo sniffing UA per pubblicare asset e layout diversi per dispositivi diversi. Potresti dover eseguire il test su hardware reale utilizzando il debug remoto, non solo con la simulazione del dispositivo.

Controllare la memoria e il carico della CPU

Prima di apportare modifiche, tieni traccia dell'utilizzo di memoria e CPU.

In Chrome puoi accedere al Task Manager dal menu Finestra. Si tratta di un modo semplice per verificare i requisiti di una pagina web.

Testare il rendimento del primo caricamento e dei caricamenti successivi

Lighthouse, WebPagetest e Pagespeed Insights sono utili per analizzare velocità, costo dei dati e utilizzo delle risorse. WebPagetest controlla anche la memorizzazione nella cache dei contenuti statici, il tempo di risposta del primo byte e se il tuo sito utilizza in modo efficace le CDN.

Salvare i risultati

• WebPagetest: ogni risultato del test ha il proprio URL.
• PageSpeed Insights: lo strumento online PageSpeed Insights ora include i dati del Report sull'esperienza utente di Chrome che mettono in evidenza le statistiche sul rendimento in condizioni reali.
• Lighthouse: salva i report dal riquadro Controllo di Chrome DevTools facendo clic sul pulsante di download:

  

Verificare i requisiti di base delle app web progressive

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

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

Puoi scaricare un report Lighthouse come file JSON o, se utilizzi l'estensione Lighthouse per Chrome, condividerlo come Gist di GitHub: fai clic sul pulsante di condivisione, seleziona Apri in Visualizzatore, poi fai di nuovo clic sul pulsante di condivisione nella nuova finestra e su Salva come Gist.

Utilizza analisi, monitoraggio degli eventi e metriche aziendali per monitorare il rendimento reale

Se puoi, tieni traccia dei dati di analisi prima di implementare le modifiche: tassi di rimbalzo, tempo di permanenza sulla pagina, pagine di uscita e tutto ciò che è pertinente ai requisiti della tua attività.

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 per i test di stress e resistenza. I costi di archiviazione del backend, i requisiti della CPU, i costi di pubblicazione e la resilienza dovrebbero migliorare se riduci il peso della pagina e le richieste di risorse.

Se non hai ancora implementato gli analytics, è il momento di farlo. Le metriche e le analisi aziendali sono l'ultimo baluardo per stabilire se il tuo sito funziona o meno. Se opportuno, incorpora il monitoraggio degli eventi per le azioni utente, come i clic sui pulsanti e la riproduzione dei video. Ti consigliamo inoltre di implementare l'analisi del flusso degli obiettivi: i percorsi attraverso i quali gli utenti navigano verso le "conversioni".

Puoi tenere d'occhio la velocità del sito di Google Analytics per verificare in che modo le metriche sul rendimento sono correlate a 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 di rendimento JavaScript 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 ReportingObserver per verificare la ritiro del browser e gli avvisi di intervento. Questa è una delle molte API per ottenere misurazioni in tempo reale e sul campo da utenti reali.

Esperienza reale: registrazione dello schermo e video

Realizza una registrazione video del caricamento della pagina su dispositivi mobili e computer. Questo approccio funziona ancora meglio a frame rate elevati e se aggiungi la visualizzazione di un timer.

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

Il caricamento della pagina di registrazione video funziona in modo molto simile alla visualizzazione sequenza di immagini in WebPagetest o alla funzionalità Acquisisci screenshot in Chrome DevTools. Puoi ottenere un record reale della velocità di caricamento dei componenti della pagina: cosa è veloce e cosa è lento. Salva le registrazioni video e gli screencast per confrontarli con i miglioramenti successivi.

Un confronto affiancato prima e dopo può essere un ottimo modo per dimostrare i miglioramenti.

Che altro?

Se pertinente, ottieni un punteggio di adeguamento al web. Si tratta di un test divertente, ma può anche essere un modo efficace per dimostrare il bloat del codice o per mostrare che hai apportato miglioramenti.

Qual è il costo del mio sito?, mostrato di seguito, fornisce una guida approssimativa al costo finanziario del caricamento del tuo sito in regioni diverse.

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