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 3 secondi a caricarsi | JavaScript e CSS che possono 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 con limite • 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. Verifica la presenza di codice JavaScript complesso. 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 conoscere 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 una CPU limitata, in particolare quelli con specifiche ridotte | Verifica la presenza di codice JavaScript complesso. 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, dimensione, tipo e tempistiche
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 fare, consulta il riquadro di rete di Chrome DevTools consulta la Guida introduttiva. 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 che dovresti 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 degli utenti 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 verificarlo utilizzando lo strumento di copertura di Chrome.
- Numero totale e dimensione dei file immagine.
- I singoli file immagine particolarmente grandi.
- Formati delle immagini: ci sono file PNG che potrebbero essere JPEG o SVG? WebP viene utilizzato con i fallback?
- Indica se vengono utilizzate tecniche di immagine reattive (come 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.
Testa il rendimento del primo caricamento e dei caricamenti successivi
Lighthouse, WebPagetest e Pagespeed Insights sono utili per analizzare la velocità, il costo dei dati e l'utilizzo delle risorse. WebPagetest controllerà anche la memorizzazione nella cache dei contenuti statici, il Time To First Byte e se il tuo sito utilizza in modo efficace le reti 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 pannello di 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 prestazioni dei 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 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 l'analisi non è implementata, è il momento di farlo. Le metriche e le analisi aziendali concorrono in modo definitivo se il sito funziona o meno. Se opportuno, incorpora il monitoraggio degli eventi per le azioni dell'utente, come i clic sui pulsanti e le riproduzioni 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.
Potresti voler 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 ReportingObserver per verificare la ritiro del browser e gli avvisi di intervento. È una delle molte API per ottenere misurazioni in tempo reale di 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 frequenze frame elevate e se aggiungi la visualizzazione di un timer.
Potresti anche voler salvare gli screencast. Esistono molte app di registrazione dello schermo 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 in WebPagetest o Acquisisci screenshot in Chrome DevTools. Puoi avere dati reali sulla velocità di caricamento dei componenti delle pagine: cosa è veloce e cosa è lento. Salva le registrazioni video e gli screencast per confrontarli con i miglioramenti successivi.
Un confronto fianco a fianco 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 convincente per dimostrare il bloat del codice o per mostrare che hai apportato miglioramenti.
Quanto costa il mio sito?, mostrato di seguito, fornisce una guida approssimativa sui costi finanziari del caricamento del tuo sito in regioni diverse.
Sono disponibili molti altri strumenti autonomi e online: dai un'occhiata a perf.rocks/tools.