Perché e cosa?
Probabilmente hai già sentito parlare di tutti i vantaggi che le tecniche delle app web progressive possono offrire al tuo sito. Potresti essere tentato di iniziare subito ad aggiungere funzionalità PWA. È possibile, ma ti conviene prima ottenere la certificazione "Pronta per le PWA".
Nessuna magia delle PWA può risolvere problemi come il blocco di JavaScript o le immagini gonfie. Le PWA richiedono una base solida.
Come si controlla lo stato del sito web? Il primo passaggio consiste nell'eseguire un controllo del sito: un esame obiettivo di ciò che funziona bene e di dove (e come) è possibile apportare miglioramenti.
L'audit del tuo sito o della tua app ti aiuterà a creare un'esperienza resiliente e performante e a evidenziare gli obiettivi rapidi che possono essere implementati con un'approvazione minima. Un audit ti fornisce anche una linea di base per lo sviluppo basato sui dati. Una modifica ha migliorato la situazione? Quanto è efficace il tuo sito rispetto ai concorrenti? Puoi ottenere metriche per dare la priorità agli sforzi e prove concrete di cui vantarti una volta apportati i miglioramenti.
Se hai solo 5 minuti…
Esegui Lighthouse nella tua home page e salva i dati del report. Riceverai un valore di riferimento quantificabile e un elenco di attività da svolgere per migliorare prestazioni, accessibilità, sicurezza e SEO.
Se hai solo 30 minuti…
Lighthouse è probabilmente ancora il punto di partenza migliore, ma con un po' di tempo in più puoi anche registrare i risultati di altri strumenti:
- Pannello Sicurezza di Chrome DevTools: utilizzo di HTTPS.
- Pannello della rete di Chrome DevTools: tempistiche 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 una quantità significativa di CPU o più memoria rispetto ad altre app, potrebbe essere necessario correggere perdite di memoria, problemi di esecuzione delle attività o di caricamento delle risorse. Assicurati di testare il tuo sito su dispositivi rappresentativi dei tuoi utenti.
- WebPagetest: prestazioni per località diverse e tipi di connessione, memorizzazione nella cache, tempo fino al primo byte, utilizzo della CDN.
- PageSpeed Insights: prestazioni di caricamento, costo dei dati e utilizzo delle risorse, inclusi i dati del Report sull'esperienza utente di Chrome che mettono in evidenza le statistiche sulle prestazioni reali.
- Prospetto della velocità e calcolatore dell'impatto: confronta la velocità del sito con quella dei tuoi concorrenti e stima le potenziali opportunità di entrate derivanti dal miglioramento della velocità del sito.
Assicurati di testare il tuo sito web come lo vedrebbe 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 liberare spazio di archiviazione. In questo modo, ogni risorsa viene recuperata dalla rete e non da una cache locale, in modo da ottenere un quadro preciso del rendimento al primo caricamento.
Non c'è niente di meglio dei test reali: prova il tuo sito con gli stessi dispositivi e la stessa connettività dei tuoi utenti e tieni traccia della tua esperienza soggettiva.
Se la gamma di strumenti ti sembra scoraggiante…
Consulta la nostra guida Come approcciarsi agli strumenti per la velocità.
In alternativa, utilizza semplicemente Lighthouse per verificare:
- HTTPS: ogni sito deve pubblicare tutti gli asset tramite HTTPS.
- Impostazioni del server: il server web o la CDN devono utilizzare correttamente la compressione, utilizzare HTTP/2 e includere intestazioni appropriate per consentire al browser di memorizzare nella cache le risorse.
- Elementi di script che possono essere spostati nella parte inferiore della pagina e/o a cui è stato assegnato un attributo async o defer.
- JavaScript e librerie che possono essere rimosse.
- CSS inutilizzato e JavaScript inutilizzato.
- Immagini che possono essere salvate con una compressione più elevata o dimensioni dei pixel più piccole.
- File immagine che sarebbero più piccoli se salvati in un formato diverso, ad esempio foto salvate come file PNG.
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 di rendimento? Se hai dubbi sulla risposta a queste domande, prova gli esercizi di raccolta dei requisiti delle nostre risorse di formazione sulle PWA: Il tuo pubblico, i tuoi contenuti e Progettare 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 controllo.
Se non puoi eseguire un controllo dell'intero sito, controlla le analisi delle pagine per avere un'idea di dove concentrarti. Le elevate frequenza di rimbalzo, il tempo di permanenza sulla pagina ridotto e le pagine di uscita inaspettate possono essere un buon indicatore di dove iniziare. Analogamente, le metriche aziendali come i costi di hosting, i clic sugli annunci e le conversioni. Ottieni una panoramica da parte degli stakeholder dei dati che sono importanti per loro.
Prova, registra, correggi, ripeti
Registra lo stato del tuo sito prima di apportare modifiche per rilevare i problemi e impostare un punto di partenza per i miglioramenti o le regressioni. In questo modo, avrai dati per giustificare e premiare l'impegno di sviluppo.
Assicurati di testare più tipi di pagine all'interno del tuo sito, non solo la home page. Per le app con una sola pagina, testa componenti, percorsi e flussi UX diversi, non solo l'esperienza di caricamento iniziale.