Preparazione

Prima di raccogliere le metriche delle prestazioni per un controllo del sito, puoi eseguire diversi controlli per identificare semplici correzioni e aree di interesse.

Controllo di validità: architettura e codice

Paga il debito tecnico!

Dove possibile correggi bug semplici e rimuovi gli asset e il codice non necessari prima di misurare le prestazioni, ma assicurati di tenere traccia dei problemi e delle correzioni prima e dopo. Questi miglioramenti possono comunque far parte del tuo lavoro di audit.

Architettura e asset del sito
È possibile rimuovere facilmente elementi dal repository del codice e dal sito, ad esempio pagine, contenuti o altri asset legacy inutilizzati? Verifica la presenza di pagine orfane, modelli ridondanti, immagini inutilizzate e librerie e codice non utilizzati.

Errori di runtime
Verifica la presenza di errori segnalati nella console del browser. Non devono essere presenti :).

Linting
Sono presenti errori nel codice HTML, CSS o JavaScript? L'integrazione del lint nel flusso di lavoro consente di mantenere la qualità del codice ed evitare regressioni. Consigliamo di utilizzare HTMLHint, StyleLint ed ESLint, che possono essere utilizzati come plug-in dell'editor di codice o essere eseguiti dalla riga di comando all'interno dei processi del flusso di lavoro e degli strumenti di integrazione continua come Travis.

Immagini e link inaccessibili
Esistono molti strumenti per testare i link inaccessibili in fase di creazione e runtime, tra cui le estensioni di Chrome (questo è valido) e strumenti per i nodi come Controllo link inaccessibili.

Plug-in
I plug-in come Flash e Silverlight possono rappresentare un rischio per la sicurezza e il relativo supporto è stato ritirato e non funzionano sui dispositivi mobili. Utilizza Lighthouse per verificare la presenza di plug-in.

Esegui test con una varietà di dispositivi e contesti

Non c'è niente di meglio di convincere persone reali a testare il tuo sito con dispositivi reali, browser multipli e contesti di connettività diversi.

Alcuni di questi controlli sono relativamente soggettivi, ma possono identificare problemi che influiscono sulle prestazioni percepite. I link inaccessibili, ad esempio, fanno perdere tempo e si sentono "non reattivi". Il testo illeggibile è lento da leggere.

Test cross-device
Prova aree visibili e finestre di dimensioni diverse. Usa almeno un dispositivo mobile e un computer. Se possibile, prova il tuo sito su un dispositivo mobile con specifiche basse e uno schermo piccolo. Il testo è leggibile? Ci sono immagini non funzionanti? Puoi eseguire lo zoom? I touch target sono abbastanza grandi? È lento? Alcune funzionalità non rispondono? Screenshot o video dei risultati.

Test multipiattaforma
Quali piattaforme scegli come target? Devi eseguire dei test sui browser e sui sistemi operativi utilizzati dagli utenti ora e in futuro.

Connettività
Esegui test su più tipi di rete di destinazione: connessa, Wi-Fi e cellulare. Puoi utilizzare gli strumenti del browser per emulare una serie di condizioni di rete.

Dispositivi
Assicurati di provare il tuo sito sugli stessi dispositivi degli utenti. La seguente foto mostra la stessa pagina su due telefoni diversi.

Pagina del post del blog con specifiche elevate
e un telefono con specifiche basse

Sullo schermo più grande, il testo è piccolo ma leggibile. Sullo schermo più piccolo il browser esegue correttamente il layout, ma il testo è illeggibile, anche quando viene ingrandito. Il display è sfocato e presenta una "presenza di colori", il bianco non sembra bianco, che rende i contenuti meno leggibili.

Semplici risultati come questo possono essere molto più importanti di dati di rendimento oscuri.

Prova UI e UX

Accessibilità, usabilità e leggibilità
Per assicurarti che i contenuti e le funzionalità del tuo sito siano accessibili a tutti, devi comprendere la diversità dei tuoi utenti. Lighthouse e altri strumenti eseguono test per problemi specifici di accessibilità, ma niente è meglio di test reali. Prova a leggere, navigare e inserire dati in diversi scenari, ad esempio all'aperto alla luce del sole o su un treno. Chiedi ad amici, familiari e colleghi di provare il tuo sito. Prova a utilizzare i contenuti tramite uno screen reader come VoiceOver su Mac o NVDA su Windows.

Puoi scoprire di più sull'implementazione e sulla revisione dell'accessibilità nel corso di Udacity sull'accessibilità e nell'articolo di WebFundamentals How To Do an Accessibility Review.

Tieni traccia del controllo dell'accessibilità. Con ogni probabilità sarai in grado di apportare semplici miglioramenti utili per tutti i tuoi utenti.

Problemi di base relativi all'interfaccia utente e all'esperienza utente
Interazioni che non funzionano come dovrebbero, elementi in eccesso in finestre e aree visibili più piccole, target dei tocchi troppo piccoli, contenuti illeggibili, scorrimento scorrevole... Apri più pagine del sito, prova la navigazione e tutte le funzionalità di base. Registra un discorso.

Immagini, audio e video
Esegui test per verificare la presenza di contenuti in eccesso, proporzioni non corrette, ritagli scarsi e problemi di qualità.

Test soggettivi dell'interfaccia utente
Potrebbero non essere tutti pertinenti, ma delle semplici modifiche possono facilitare il refactoring.

  • Viene visualizzato immediatamente il messaggio "Che cosa posso fare qui? All'apertura del sito?"
  • Sei incline a consumare contenuti e a seguire link?
  • Esistono gerarchie o percorsi visivi oppure tutti hanno lo stesso peso visivo?
  • Il layout è disordinato?
  • Ci sono troppi caratteri?
  • Sono presenti immagini o altri contenuti che potrebbero essere rimossi?
  • La progettazione dei contenuti è importante quanto la progettazione dell'interfaccia. I contenuti di testo e immagini del tuo sito sono adatti al contesto di dispositivi mobili e desktop? È possibile eliminare qualcosa? Scrivi per i dispositivi mobili.