Prima di raccogliere le metriche sul rendimento per un audit del sito, puoi eseguire diversi controlli per identificare soluzioni semplici e aree su cui concentrarti.
Controllo di validità: architettura e codice
Se possibile, correggi i bug semplici e rimuovi gli asset e il codice non necessari prima di misurare le prestazioni, ma assicurati di conservare un record prima e dopo dei problemi e delle correzioni. Questi miglioramenti possono comunque essere parte del tuo lavoro di controllo.
Architettura e risorse del sito
È possibile rimuovere facilmente elementi dal repository del codice e dal sito, ad esempio pagine legacy, contenuti o altre risorse inutilizzati? Controlla se sono presenti pagine orfane, modelli ridondanti, immagini inutilizzate e librerie e codice inutilizzati.
Errori di runtime
Controlla se sono presenti errori segnalati nella console del browser. Non dovrebbero essercene :).
Linting
Sono presenti errori nel codice HTML, CSS o JavaScript? L'integrazione del linting nel tuo
workow può aiutarti a mantenere la qualità del codice ed evitare regressioni. Ti consigliamo di utilizzare
HTMLHint, StyleLint e
ESLint, che possono essere utilizzati come plug-in per gli editor di codice o eseguiti da
la riga di comando all'interno dei processi di flusso di lavoro e degli strumenti di integrazione continua come
Travis.
Link e immagini non funzionanti
Esistono molti strumenti per verificare la presenza di link non funzionanti in fase di compilazione e di esecuzione, tra cui le estensioni di Chrome (questa è buona) e gli strumenti Node come Broken Link Checker.
Plug-in
I 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 controllare la presenza di plug-in.
Eseguire test con una varietà di dispositivi e contesti
Non c'è niente di meglio che 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 i problemi che influiscono sul rendimento percepito. I link inaccessibili, ad esempio, fanno perdere tempo e non sono "reattivi". Il testo illeggibile è difficile da leggere.
Test su più dispositivi
Prova dimensioni diverse dell'area visibile e della finestra. Utilizza almeno un dispositivo mobile e
uno desktop. Se possibile, prova il tuo sito su un dispositivo mobile con specifiche ridotte e uno schermo piccolo. Il testo è leggibile? Ci sono immagini danneggiate? Puoi aumentare lo zoom? I touch target sono abbastanza grandi? È lento?
Alcune funzionalità non rispondono? Scatta uno screenshot o un video dei risultati.
Test multipiattaforma
Quali piattaforme scegli come target? Devi eseguire il test sui browser e
sui sistemi operativi utilizzati dagli utenti ora e in futuro.
Connettività
Esegui test su più tipi di reti di destinazione: connessa, Wi-Fi e rete 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 utilizzati dai 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 non è leggibile, anche con lo zoom aumentato. Il display è sfocato e presenta una "tinta di colore", ovvero il bianco non è bianco, il che rende i contenuti meno leggibili.
Risultati semplici come questo possono essere molto più importanti di dati sul rendimento oscuri.
Provare l'UI e l'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 rilevano problemi di accessibilità specifici, ma niente è meglio dei test reali. Prova a leggere, navigare e inserire
dati in una serie di scenari: ad esempio, all'aperto alla luce del sole o su un treno. Chiedi ad amici, parenti e colleghi di provare il tuo sito. Prova a consumare contenuti tramite uno screen reader come VoiceOver su Mac o NVDA su Windows.
Per scoprire di più sull'implementazione e sulla revisione dell'accessibilità, consulta il corso di Udacity sull'accessibilità e l'articolo di Web Fundamentals Come eseguire una revisione dell'accessibilità.
Tieni traccia del controllo di accessibilità. È probabile che tu possa apportare miglioramenti semplici che siano utili per tutti gli utenti.
Problemi fondamentali di UI e UX
Interazioni che non funzionano come dovrebbero, elementi in overflow su finestre e viewport più piccole, target di tocco troppo piccoli, contenuti illeggibili, scorrimento discontinuo… Apri più pagine sul sito, prova la navigazione e tutte le funzionalità di base. Tieni un
registro.
Immagini, audio e video
Verifica la presenza di contenuti che fuoriescono, rapporto d'aspetto errato,
taglio scadente e problemi di qualità.
Test soggettivi dell'interfaccia utente
Questi test potrebbero non essere tutti pertinenti, ma semplici modifiche possono semplificare il refactoring:
- L'opzione "Che cosa posso fare qui?" è immediatamente chiara quando apri il sito?
- Ti piace consumare contenuti e seguire link?
- Esistono gerarchie o percorsi visivi oppure tutto ha lo stesso peso visivo?
- Il layout è disordinato?
- Sono presenti troppi caratteri?
- Ci sono immagini o altri contenuti che potrebbero essere rimossi?
- Il design dei contenuti è importante quanto il design dell'interfaccia. I contenuti di testo e immagine sul tuo sito sono appropriati per i contesti mobile e desktop? C'è qualcosa che può essere eliminato? Scrivi per il mobile.