Prima di raccogliere le metriche sul rendimento per un controllo del sito, puoi eseguire diversi controlli per identificare soluzioni semplici e aree su cui concentrarti.
Controllo di validità: architettura e codice
Ove possibile, correggi i bug semplici e rimuovi gli asset e il codice non necessari prima di misurare le prestazioni, ma assicurati di tenere un registro prima e dopo dei problemi e delle correzioni. Questi miglioramenti possono comunque far parte del tuo lavoro di audit.
Architettura e asset del sito
È possibile rimuovere facilmente qualcosa dal repository del codice e dal sito, ad esempio pagine legacy, contenuti o altri asset non utilizzati? Controlla la presenza di pagine orfane, modelli ridondanti, immagini inutilizzate e codice e librerie non utilizzati.
Errori di runtime
Verifica la presenza di errori segnalati nella console del browser. Non dovrebbero essercene. :)
Linting
Ci sono errori nel codice HTML, CSS o JavaScript? L'integrazione del linting nel tuo workflow può aiutarti a mantenere la qualità del codice ed evitare regressioni. Consigliamo HTMLHint, StyleLint ed ESLint, che possono essere utilizzati come plug-in dell'editor di codice o eseguiti dalla riga di comando all'interno dei processi del workflow e degli strumenti di integrazione continua come Travis.
Link e immagini inaccessibili
Esistono molti strumenti per verificare la presenza di link inaccessibili in fase di build e di runtime, tra cui le estensioni di Chrome (questa è buona) e gli strumenti Node come Broken Link Checker.
Plug-in
Plug-in come Flash e Silverlight possono rappresentare un rischio per la sicurezza, il loro 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
Niente è meglio di far testare il tuo sito a persone reali con dispositivi reali, più browser e diversi contesti di connettività.
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 danno l'impressione di non rispondere. Il testo illeggibile è lento da leggere.
Test su più dispositivi
Prova diverse dimensioni di finestre e aree visibili. Utilizza almeno un dispositivo mobile e un computer. Se possibile, prova il tuo sito su un dispositivo mobile di fascia bassa con uno schermo di piccole dimensioni. Il testo è leggibile? Ci sono immagini danneggiate? Puoi fare lo zoom? I touch target sono abbastanza grandi? È lento?
Ci sono funzionalità che non rispondono? Acquisisci uno screenshot o un video dei risultati.
Test multipiattaforma
Quali sono le piattaforme target? Devi eseguire i test sui browser e sui sistemi operativi che i tuoi utenti utilizzano ora e utilizzeranno in futuro.
Connettività
Esegui test su più tipi di reti di destinazione: connessa, Wi-Fi e mobile. Puoi utilizzare gli strumenti del browser per emulare una serie di condizioni di rete.
Dispositivi
Assicurati di provare il tuo sito sugli stessi dispositivi dei tuoi utenti. La foto seguente mostra la stessa pagina su due smartphone diversi.
Sullo schermo più grande, il testo è piccolo ma leggibile. Sullo schermo più piccolo, il browser esegue il rendering del layout correttamente, ma il testo è illeggibile, anche se viene aumentato lo zoom. Il display è sfocato e presenta una "dominante di colore", ovvero il bianco non sembra bianco, il che rende i contenuti meno leggibili.
Risultati semplici come questo possono essere molto più importanti di dati sul rendimento poco chiari.
Prova la UI e la 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 testano problemi di accessibilità specifici, ma niente è meglio dei test reali. Prova a leggere, navigare e inserire dati in vari 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 Udacity sull'accessibilità e nell'articolo di Web Fundamentals How To Do an Accessibility Review.
Conserva un record del controllo di accessibilità. È probabile che tu possa apportare semplici miglioramenti utili per tutti i tuoi utenti.
Problemi fondamentali di UI e UX
Interazioni che non funzionano come dovrebbero, elementi che si sovrappongono su finestre e aree visibili più piccole, target di tocco troppo piccoli, contenuti illeggibili, scorrimento instabile… Apri più pagine del sito, prova la navigazione e tutte le funzionalità di base. Tieni un registro.
Immagini, audio e video
Verifica la presenza di contenuti in eccesso, proporzioni errate,
ritaglio scadente e problemi di qualità.
Test soggettivi della UI
Questi test potrebbero non essere tutti pertinenti, ma semplici modifiche possono semplificare il refactoring:
- La risposta alla domanda "Cosa posso fare qui?" è immediatamente chiara quando apri il sito?
- Ti viene voglia di consumare i contenuti e seguire i link?
- Esistono gerarchie o percorsi visivi o tutto ha lo stesso peso visivo?
- Il layout è disordinato?
- Ci sono troppi caratteri?
- Ci sono immagini o altri contenuti che potrebbero essere rimossi?
- La progettazione dei contenuti è importante quanto quella dell'interfaccia. I contenuti di testo e immagini del tuo sito sono appropriati per i contesti mobile e desktop? C'è qualcosa che può essere eliminato? Scrivi per i dispositivi mobili.