Controllo delle prestazioni

Perché e cosa?

Probabilmente hai sentito parlare di tutte le cose positive che le tecniche delle app web progressive possono fare per il tuo sito. Potresti avere la tentazione di iniziare subito ad aggiungere le funzionalità PWA. È possibile, ma è molto meglio se apprendi prima la tecnologia "PWA".

Nessun tipo di magia della PWA risolverà problemi come il blocco di JavaScript o delle immagini gonfie. Le PWA hanno bisogno di fondamenta solide.

Come si fa a controllare lo stato di un sito web? Il primo passaggio consiste nel verificare il sito: una revisione obiettiva di ciò che 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 ad alte prestazioni, evidenziando vantaggi rapidi che possono essere implementati con un'approvazione minima. Un controllo offre anche 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? Ottieni metriche per stabilire la priorità degli sforzi e prove concrete di cui vantarti dopo aver apportato miglioramenti.

Se hai solo 5 minuti...

Esegui Lighthouse sulla tua home page e salva i dati del report. Ottieni una base di riferimento quantificata e un elenco di cose da fare per migliorare prestazioni, accessibilità, sicurezza e SEO.

Se hai solo 30 minuti...

Lighthouse è probabilmente il punto di partenza ideale, ma con un po' più di tempo puoi anche registrare i risultati da altri strumenti:

  • Riquadro Sicurezza di Chrome DevTools: utilizzo di HTTPS.
  • Riquadro Network 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 costantemente una CPU significativa o più memoria rispetto ad altre app, potrebbe essere necessario risolvere problemi di perdita di memoria, esecuzione delle attività o 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 Esperienza utente di Chrome che evidenziano statistiche sulle prestazioni reali.
  • Scorecard della velocità e calcolatore impatto: confronta la velocità del sito con quella di app peer e stima le potenziali opportunità di entrate generate dal sito per migliorarne la velocità.

Assicurati di testare il tuo sito web come un nuovo utente lo vede. 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 l'archiviazione. In questo modo, ogni asset viene recuperato dalla rete e non da una cache locale, in modo da avere un quadro accurato delle prestazioni del primo caricamento.

Non c'è niente di meglio di un test nel mondo reale: prova il tuo sito con gli stessi dispositivi e la stessa connettività degli utenti e registra la tua esperienza soggettiva.

Se trovi la gamma di strumenti più sconcertante...

Dai un'occhiata alla nostra guida: Come pensare agli strumenti per la velocità.

Se non altro, utilizza Lighthouse per verificare:

Pubblico, stakeholder, contesto

Le priorità del refactoring dipendono dal pubblico, dai contenuti e dalle funzionalità. Chi visita il tuo sito? Perché e come lo utilizzano? Qual è il tuo budget del rendimento? Se non sai rispondere a queste domande, prova i requisiti per la raccolta di esercizi dalle nostre risorse di formazione PWA: Il tuo pubblico, i tuoi contenuti e Progetta per tutti gli utenti.

Chi sono i tuoi stakeholder e quali sono le loro priorità? Questo influirà su come strutturare, presentare e condividere i dati di audit.

Se non riesci a verificare l'intero sito, controlla le analisi delle pagine per capire su cosa concentrarti. Frequenza di rimbalzo elevate, tempo sulla pagina ridotto e pagine di uscita impreviste possono essere buoni indicatori di dove iniziare. Analogamente, metriche aziendali, come costi di hosting, clic sugli annunci e conversioni. Ottieni una panoramica degli stakeholder sui dati che contano per loro.

Testa, registra, correggi, ripeti

Registra lo stato del tuo sito prima di apportare qualsiasi modifica, per rilevare problemi e impostare un punto di partenza per miglioramenti o regressioni. In questo modo ottieni dati per giustificare e ricompensare lo sforzo di sviluppo.

Assicurati di testare diversi tipi di pagina all'interno del sito, non solo la home page. Per le app a pagina singola, testa diversi componenti, route e flussi UX, non solo l'esperienza del primo caricamento.

Feedback