Perché e cosa?
Probabilmente avrai sentito parlare delle cose positive che le tecniche di app web progressiva possono fare per il tuo sito. Potresti avere la tentazione di iniziare subito ad aggiungere funzionalità PWA. È possibile, ma sarà meglio prepararsi con le PWA.
Nessuna quantità di magia PWA risolverà problemi come il blocco di JavaScript o la presenza di immagini gonfie. Le PWA hanno bisogno di una base solida.
Come puoi controllare lo stato del tuo sito web? Il primo passo consiste nell'eseguire un controllo del sito, ovvero una revisione oggettiva di cosa funziona bene e dove (e come) potrebbe essere migliorato.
Il controllo del tuo sito o della tua app ti aiuterà a creare un'esperienza resiliente e performante, oltre a evidenziare vantaggi rapidi che possono essere implementati con un consenso minimo. Un controllo fornisce inoltre una base di riferimento per lo sviluppo basato sui dati. Una modifica ha migliorato le cose? Quali sono le differenze tra il tuo sito e la concorrenza? Otterrai metriche per dare priorità alle iniziative e prove concrete di cui vantarti dopo i miglioramenti apportati.
Se hai solo 5 minuti...
Esegui Lighthouse sulla tua home page e salva i dati del report. Avrai a disposizione una base di riferimento quantificata e un elenco di cose da fare per migliorare le prestazioni, l'accessibilità, la sicurezza e la SEO.
Se hai solo 30 minuti di tempo...
Lighthouse è probabilmente ancora il punto di partenza migliore, ma con un po' più di tempo puoi anche registrare i risultati da altri strumenti:
- Riquadro Sicurezza di Chrome DevTools: utilizzo di HTTPS.
- Riquadro di rete di Chrome DevTools: tempi di caricamento; dimensioni delle risorse e numero di richieste per HTML, CSS, JavaScript, immagini, caratteri e altri file.
- Task Manager di Chrome: se il tuo sito utilizza costantemente molta CPU o più memoria rispetto ad altre app, potrebbe essere necessario risolvere le fughe di memoria, le attività in esecuzione o i problemi di caricamento delle risorse. Assicurati di testare il tuo sito su dispositivi rappresentativi dei tuoi utenti.
- WebPagetest: prestazioni per località e tipi di connessione diversi, memorizzazione nella cache, time to first byte, utilizzo di CDN.
- Pagespeed Insights: prestazioni di caricamento, costo dei dati e utilizzo delle risorse, inclusi i dati del report sull'esperienza utente di Chrome che evidenziano statistiche sulle prestazioni reali.
- Scorecard della velocità e Calcolatrice impatto: confronta la velocità del sito con quella di app peer e stima le potenziali opportunità di entrate derivanti dal miglioramento della velocità del sito.
Assicurati di testare il tuo sito web come viene visto da un nuovo utente. 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. Ciò garantisce che ogni asset venga recuperato dalla rete e non da una cache locale, in modo da ottenere un quadro accurato delle prestazioni al primo caricamento.
Non c'è niente di meglio dei test nel mondo reale: prova il tuo sito con gli stessi dispositivi e la stessa connettività dei tuoi utenti e prendi nota della tua esperienza soggettiva.
Se trovi sconcertante la gamma di strumenti...
Dai un'occhiata alla nostra guida: Come pensare agli strumenti di velocità.
Se non altro, utilizza Lighthouse per verificare:
- HTTPS: ogni sito deve pubblicare tutti gli asset tramite HTTPS.
- Impostazioni server: il server web o la CDN dovrebbero utilizzare correttamente la compressione, utilizzare HTTP/2 e includere intestazioni appropriate per consentire al browser di memorizzare le risorse nella cache.
- Elementi dello script che possono essere spostati in fondo alla pagina e/o a cui è assegnato un attributo async o defer.
- JavaScript e librerie che possono essere rimossi.
- CSS non utilizzato e JavaScript non utilizzato.
- Immagini che possono essere salvate con una compressione maggiore o dimensioni in pixel più piccole.
- I file immagine di dimensioni inferiori vengono salvati utilizzando un formato diverso, ad esempio le foto salvate come PNG.
Pubblico, stakeholder, contesto
Le priorità del refactoring dipendono dal pubblico, dai contenuti e dalle funzionalità. Chi visita il tuo sito? Perché e come lo usano? Qual è il tuo budget di rendimento? Se non sai con certezza la risposta a queste domande, prova a consultare i requisiti di raccolta degli esercizi dalle nostre risorse di formazione per le PWA: Il tuo pubblico, i tuoi contenuti e Progetta per tutti gli utenti.
Chi sono i tuoi stakeholder e quali sono le loro priorità? Ciò influirà sul modo in cui strutturi, presenti e condividi i dati di audit.
Se non puoi eseguire il controllo sull'intero sito, controlla i dati e le analisi della pagina per farti un'idea su cosa concentrarti. Frequenze di rimbalzo elevate, tempo sulla pagina ridotto e pagine di uscita impreviste possono essere un buon indicatore di dove iniziare. Analogamente, sono disponibili metriche aziendali come costi di hosting, clic sugli annunci e conversioni. Ottenere una panoramica dagli stakeholder di quali dati sono importanti per loro.
Testa, 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. Ciò ti fornisce dati per giustificare e ricompensare le attività di sviluppo.
Assicurati di testare più tipi di pagina all'interno del tuo sito, non solo la home page. Per le app a pagina singola, testa diversi componenti, route e flussi UX, e non solo l'esperienza di primo caricamento.