Esistono diversi obiettivi principali per creare un sito resiliente e performante con un costo dei dati ridotto.
Per ogni obiettivo è necessario un controllo.
| Obiettivo | Why? | Cosa testare? |
|---|---|---|
| Garantire privacy, sicurezza e integrità dei dati e consentire un utilizzo efficace delle API | Perché HTTPS è importante | HTTPS implementato per tutte le pagine/le route e gli asset del sito. |
| Migliorare le prestazioni di caricamento | Il 53% degli utenti abbandona i siti che impiegano più di tre secondi per caricarsi | JavaScript e CSS che potrebbero essere caricati in modo asincrono o differito. Imposta obiettivi per il tempo all'interattività e le dimensioni del payload, ad esempio TTI su 3G. Imposta un budget delle prestazioni. |
| Riduci il peso della pagina | • Riduci i costi dei dati per gli utenti con piani dati limitati • Riduci i requisiti di archiviazione delle app web, particolarmente importanti per gli utenti con dispositivi a basso consumo • Riduci i costi di hosting e pubblicazione • Migliora le prestazioni, l'affidabilità e la resilienza della pubblicazione | Imposta un budget per il peso della pagina: ad esempio, il primo caricamento deve essere inferiore a 400 kB. Controlla se sono presenti script JavaScript pesanti. Controlla le dimensioni dei file per trovare immagini, contenuti multimediali, HTML, CSS e JavaScript eccessivamente grandi. Trova le immagini che potrebbero essere caricate in modo lazy e controlla la presenza di codice inutilizzato con gli strumenti di copertura. |
| Riduci le richieste di risorse | • Riduci i problemi di latenza • Riduci i costi di pubblicazione • Migliora le prestazioni, l'affidabilità e la resilienza della pubblicazione | Cerca richieste eccessive o non necessarie per qualsiasi tipo di risorsa. Ad esempio: file caricati ripetutamente, JavaScript caricato in più versioni, CSS mai utilizzato, immagini che non vengono mai visualizzate (o che potrebbero essere caricate in modo lazy). |
| Ottimizzare l'utilizzo della memoria | La memoria può diventare il nuovo collo di bottiglia, soprattutto sui dispositivi mobili | Utilizza Gestione attività di Chrome per confrontare il tuo sito con altri per l'utilizzo della memoria durante il caricamento della home page e l'utilizzo di altre funzionalità del sito. |
| Ridurre il carico della CPU | I dispositivi mobili hanno una CPU limitata, in particolare quelli con specifiche ridotte | Controlla se sono presenti script JavaScript pesanti. Trova JavaScript e CSS inutilizzati con strumenti di copertura. Controlla se le dimensioni del DOM sono eccessive e se gli script vengono eseguiti inutilmente al primo caricamento. Cerca JavaScript caricato in più versioni o librerie che potrebbero essere evitate con un refactoring minore. |
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.