Potresti aver sentito parlare dei vantaggi che le tecniche di app web progressiva (PWA) possono apportare al tuo sito. Potresti essere tentato di aggiungere funzionalità PWA senza migliorare le basi delle prestazioni del tuo sito. Tuttavia, nessuna funzionalità PWA può risolvere i problemi relativi al blocco di JavaScript e alle immagini di grandi dimensioni.
Il primo passo è eseguire un controllo del sito, una revisione oggettiva di ciò che funziona bene e di ciò che può essere migliorato.
L'audit del tuo sito o della tua app ti aiuta a creare un'esperienza resiliente e performante. Inoltre, evidenzia i risultati rapidi che possono essere implementati con un'approvazione minima. Un audit crea una base di riferimento per lo sviluppo basato sui dati. Un cambiamento ha migliorato le cose? Come si confronta il tuo sito con la concorrenza? Ottieni metriche per dare priorità agli sforzi e prove concrete di cui vantarti una volta apportati i miglioramenti.
Con soli 5 minuti
Esegui Lighthouse sulla home page e salva i dati del report. Ricevi una base di riferimento quantificata e un elenco di cose da fare per migliorare le prestazioni, l'accessibilità, la sicurezza e la SEO.
Con soli 30 minuti
Lighthouse è probabilmente ancora il punto di partenza migliore, ma con più tempo puoi anche registrare i risultati di altri strumenti:
- Pannello Sicurezza di Chrome DevTools: utilizzo di HTTPS.
- Pannello Richieste di rete di Chrome DevTools: tempi di caricamento; dimensioni delle risorse e numero di richieste per HTML, CSS, JavaScript, immagini, caratteri e altri file.
- Gestione attività di Chrome: se il tuo sito utilizza regolarmente una quantità significativa di CPU o più memoria rispetto ad altre app, potresti dover correggere problemi di perdita di memoria, esecuzione delle attività o caricamento delle risorse.
- WebPagetest: memorizzazione nella cache, TTFB (Time to First Byte), utilizzo della CDN.
- PageSpeed Insights: prestazioni di caricamento, costi dei dati e utilizzo delle risorse, inclusi i dati del Report sull'esperienza utente di Chrome che evidenziano le statistiche sulle prestazioni reali.
Assicurati di testare il tuo sito web come se fossi un utente che lo visita per la prima volta. Apri il sito in una finestra di navigazione in incognito (privata) o utilizza gli strumenti del browser per disattivare la memorizzazione nella cache e cancellare lo spazio di archiviazione. In questo modo, ogni asset viene recuperato dalla rete e non da una cache locale, in modo da ottenere un quadro preciso delle prestazioni del primo caricamento.
Niente batte i test nel mondo reale. Assicurati di testare il tuo sito su dispositivi e con una connettività rappresentativi dei tuoi utenti e tieni traccia della tua esperienza soggettiva.
Se gli strumenti ti confondono
Dai un'occhiata alla nostra guida: Come utilizzare gli strumenti per la velocità.
Se non altro, utilizza Lighthouse per verificare:
- HTTPS: ogni sito deve pubblicare tutte le risorse tramite HTTPS.
- Impostazioni del server: il tuo web server o CDN deve utilizzare correttamente la compressione, utilizzare HTTP/2 e includere intestazioni appropriate per consentire al browser di memorizzare nella cache le risorse.
- Elementi script che possono essere spostati nella parte inferiore della pagina o a cui può essere assegnato un attributo async o defer.
- JavaScript e librerie che possono essere rimossi.
- Codice inutilizzato, ad esempio librerie CSS e JavaScript.
- Opportunità di riduzione delle dimensioni dei pixel delle immagini.
- Modifiche al formato del file che migliorerebbero le dimensioni di un'immagine, ad esempio la conversione di un file PNG in JPG.
Pubblico, stakeholder, contesto
Le priorità per il refactoring dipendono dal pubblico, dai contenuti e dalle funzionalità. Chi visita il tuo sito? Perché e come lo utilizzano? Qual è il tuo budget per il rendimento?
Chi sono i tuoi stakeholder e quali sono le loro priorità? Ciò influisce sul modo in cui strutturi, presenti e condividi i dati di controllo.
Se non riesci a controllare l'intero sito, esamina le analisi delle pagine per farti un'idea di dove concentrarti. Frequenze di rimbalzo elevate, tempo sulla pagina ridotto e pagine di uscita inaspettate possono essere un buon indicatore di dove iniziare. Allo stesso modo, le metriche aziendali come i costi di hosting, i clic e le conversioni degli annunci. Ottieni una panoramica dagli stakeholder dei dati che sono importanti per loro.
Test, registra, correggi, ripeti
Registra lo stato del tuo sito prima di apportare modifiche, per scoprire problemi e impostare un punto di partenza per miglioramenti o regressioni. In questo modo, avrai i dati per giustificare e premiare l'impegno di sviluppo.
Testa più tipi di pagine all'interno del tuo sito. Per le app a pagina singola, testa i componenti, le route e i flussi UX, anziché solo l'esperienza di caricamento iniziale.