Come garantire che la funzionalità di base del sito web sia sempre disponibile, accessibile, sicura, utilizzabile, rilevabile e veloce.
Questa pagina fornisce indicazioni per garantire che il tuo sito web sia disponibile, accessibile, sicuro e utilizzabile in ogni momento per tutti.
Le indicazioni presenti in questa pagina provengono da una raccolta interfunzionale di team di Google che si stanno concentrando a breve termine su siti web che aiutano le persone a rimanere al sicuro durante l'emergenza COVID-19. Questi Googler hanno notato che i siti devono affrontare un aumento senza precedenti della domanda da parte di persone alla ricerca di informazioni fondamentali, molti dei quali raramente o mai hanno utilizzato il web prima d'ora. Può essere difficile assicurarsi che i siti siano disponibili in questo periodo e accessibili a tutti.
Consulenza
Disponibilità, affidabilità, resilienza e stabilità
Se il tuo sito rileva picchi di traffico e non funziona oppure vuoi evitare che abbia un errore, le indicazioni riportate di seguito possono aiutarti a risolvere rapidamente i problemi o a rilevarli prima che diventino problemi critici.
- Leggi Correggere un server sovraccarico per scoprire come rilevare, mitigare e prevenire i problemi di picco di traffico.
- Rimuovi immagini, video, script e caratteri non necessari. Assicurati che ogni pagina si concentri solo sull'offerta delle funzionalità di cui le persone che utilizzano il tuo sito hanno davvero bisogno.
- L'ottimizzazione delle immagini potrebbe ridurre notevolmente l'utilizzo della larghezza di banda del server perché le immagini sono la principale fonte di gonfiore sul web.
- Scarica il maggior numero possibile di contenuti statici su CDN. Ulteriori dettagli da provider comuni: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Controlla se la tua rete CDN dispone di ottimizzazioni facili da attivare, come la compressione dinamica delle immagini, la compressione del testo o la minimizzazione automatica delle risorse JS e CSS.
- L'ottimizzazione della memorizzazione nella cache HTTP può ridurre significativamente le richieste dei server con una modifica minima del codice. Consulta La cache HTTP: la tua prima linea di difesa per una panoramica, nonché la memorizzazione nella cache HTTP e le Best practice per la memorizzazione nella cache per ottenere suggerimenti specifici. Il controllo Pubblica asset statici con un criterio della cache efficiente in Lighthouse può aiutarti a rilevare rapidamente le risorse che non vengono memorizzate nella cache. Tieni presente che diversi tipi di risorse avranno requisiti di aggiornamento diversi e, di conseguenza, richiederanno strategie di memorizzazione nella cache diverse.
- I service worker sono un altro modo per ridurre significativamente la domanda sui tuoi server, ma potrebbero richiedere un investimento tecnico significativo. Consentono inoltre di funzionare offline sul sito web, in modo da presentare orari di apertura, numeri di telefono e altre informazioni agli utenti di ritorno senza una connessione. Workbox è l'approccio consigliato per aggiungere i service worker ai siti web perché automatizza molti elementi boilerplate, semplifica il rispetto delle best practice ed evita i piccoli bug comuni quando si utilizza direttamente l'API
ServiceWorker
di basso livello. - Se il tuo sito registra un notevole aumento di utilizzo, controlla se disponi di una protezione adeguata contro gli attacchi DDoS perché ora il tuo sito potrebbe essere un bersaglio più interessante. Ulteriori dettagli da provider comuni: AWS, Azure, Cloudflare, Google Cloud.
Per ulteriori indicazioni, consulta Affidabilità della rete.
Accessibilità
Dare priorità all'accessibilità è più importante che mai perché è probabile che sempre più persone con molteplici esigenze accedano al tuo sito. Segui le linee guida riportate di seguito per assicurarti che le funzionalità di base del tuo sito web siano accessibili a tutti.
- L'accessibilità è un lavoro di squadra e tutti hanno un ruolo da svolgere. Inizia consultando la guida di Google relativa all'accessibilità per i team e la guida per i team del servizio digitale statunitense. Queste guide spiegano il contributo di ogni membro del team (product manager, ingegneri, designer, QA e così via).
- Esegui una revisione sull'accessibilità per determinare cosa funziona bene e cosa deve essere migliorato. Le estensioni del browser WAVE possono aiutarti a eseguire un controllo manuale dell'accessibilità del tuo sito.
- Leggi le guide all'accessibilità per comprendere meglio argomenti specifici come la navigazione da tastiera e il supporto per screen reader.
- Esegui un controllo Lighthouse per rilevare i problemi di accessibilità comuni. Fornisce anche un elenco di controlli manuali che puoi eseguire per migliorare l'operabilità del tuo sito. Tieni presente che un punteggio di accessibilità pari a 100 non garantisce che il tuo sito sia accessibile. Esistono molti problemi importanti per i quali Lighthouse non può eseguire test in modo automatizzato, pertanto è comunque importante effettuare revisioni manuali. Altri strumenti di controllo automatico includono l'API WAVE e l'estensione AXE.
- Completa il corso Start Building Accessible Web Applications Today su egghead.io o dai un'occhiata al corso Web Accessibility su Udacity.
- Guarda la playlist A11ycast per altri suggerimenti rapidi su argomenti specifici sull'accessibilità.
Identità, sicurezza e privacy
La tentazione di adottare scorciatoie per ricevere correzioni critiche potrebbe essere allettante, ma fai sempre attenzione a non rischiare di compromettere la sicurezza. Le persone devono accedere a contenuti relativi ad argomenti estremamente privati. I siti web devono proteggere a tutti i costi questi dati utente sensibili e convincere le persone che le loro informazioni che consentono l'identificazione personale (PII) sono sicure.
- Scopri perché tutti i siti web devono essere protetti con HTTPS, non solo quelli che gestiscono dati PII sensibili.
- Passa a un provider host che utilizza HTTPS per impostazione predefinita oppure utilizza Let's Encrypt o servizi simili per abilitare HTTPS sui tuoi server.
- Consulta la spiegazione dei cookie SameSite per scoprire come rendere più sicuro l'utilizzo dei cookie. Tieni presente che l'applicazione dell'etichettatura dei cookie SameSite è stata temporaneamente ripristinata.
Per ulteriori indicazioni, vedi Protezione e sicurezza.
Usabilità, UI e UX
Le persone fanno sempre più affidamento sul web per soddisfare le esigenze fondamentali. Molte di queste persone non usano il web di frequente. Vale la pena verificare l'usabilità della funzionalità di base del tuo sito e assicurarti che sia il più semplice e facile da usare possibile.
- Potresti aggiungere nella parte superiore del tuo sito web un banner in evidenza (che può essere rimosso con un pulsante X) che indichi chiaramente gli aggiornamenti del servizio. Utilizza un invito all'azione nel banner per indirizzare gli utenti a risorse più specifiche. Prendi in considerazione l'utilizzo di colori e caratteri diversi che si distinguono dal resto dei contenuti della pagina. Mantieni un tono empatico, concentrato sulle esigenze delle persone e trasparente sul tipo di servizio che puoi aspettarti.
- Cerca opportunità per ridurre al minimo le interazioni fisiche nei tuoi percorsi dell'utente critici (CUJ) e suggerisci queste modifiche al tuo team di prodotto. Ad esempio, se un servizio di consegna richiede in genere una firma, verifica se c'è un modo per risolvere il problema.
- Verifica che i tuoi CUJ siano il più semplici e intuitivi possibile e suggerisci modifiche al team di prodotto se noti opportunità di miglioramento.
- Rivedi i principi per una buona progettazione mobile e prova i tuoi CUJ su vari dispositivi mobili per assicurarti che non ci siano problemi evidente. Gli utenti che non utilizzano spesso il web e si ritrovano improvvisamente a dover fare più affidamento sul web probabilmente accedono al tuo sito da dispositivi mobili.
- Esegui il refactoring del sito per utilizzare il più possibile pattern di progettazione reattiva.
- Assicurati che i moduli siano efficienti e ben progettati.
SEO
Le persone sono alla ricerca di informazioni cruciali per la salute e il lavoro. È importante garantire che i siti siano rilevabili da tutti i motori di ricerca. I controlli della SEO Lighthouse possono aiutarti a rilevare problemi di base. Segui i blog ufficiali dei motori di ricerca per scoprire le indicazioni e gli aggiornamenti più recenti: Google, Bing, Baidu, DuckDuckGo, Yandex. Post recenti correlati al COVID-19:
- Come modificare le attività online riducendo al minimo l'impatto sulla presenza nella Ricerca Google
- Nuove proprietà per eventi virtuali, posticipati e annullati
- Bing adotta il markup schema.org per comunicazioni speciali relative al COVID-19
- Aggiungere dati strutturati alle comunicazioni relative al COVID-19
- Aiutare le organizzazioni sanitarie a rendere più accessibili le informazioni sul COVID-19
- Best practice generali per la Ricerca di siti sanitari e governativi
Per ulteriori indicazioni, consulta la sezione Rilevabile.
Esibizione
Alcuni provider di servizi internet (ad esempio in India) stanno assistendo a un notevole aumento dell'utilizzo di internet a casa e non dispongono dell'infrastruttura necessaria per soddisfare l'aumento della domanda. In situazioni come questa, la velocità del tuo sito web potrebbe diminuire per cause non imputabili a te. L'ottimizzazione delle prestazioni di carico potrebbe essere un modo per compensare il vento contrario della larghezza di banda ridotta. In altre parole, riducendo il numero di byte che devono essere inviati sulla rete per caricare le pagine, puoi compensare l'impatto della riduzione della larghezza di banda sulle prestazioni.
- Le immagini sono la causa principale del gonfiore sul web. Potresti riuscire a ridurre significativamente l'utilizzo della larghezza di banda del tuo sito web ottimizzando le immagini. Squoosh è un semplice strumento open source per comprimere le immagini.
- Esegui WebPageTest o Lighthouse per scoprire le principali opportunità di miglioramento delle prestazioni.
- Attiva la compressione del testo per ridurre le dimensioni di rete delle risorse di testo. Spesso è un buon risultato in termini di prestazioni che richiede un investimento tecnico minimo.
- Leggi l'articolo Correggere la velocità del sito web in modo interfunzionale per scoprire come collaborare con altri reparti e ottenere consenso da altri reparti.
- Utilizza il caricamento lento standardizzato per le immagini per ridurre al minimo le richieste di immagini che le persone potrebbero non vedere mai. La compatibilità del browser non è pari al 100%, ma la funzionalità può essere trattata come un miglioramento progressivo. In altre parole, se un determinato browser non supporta il caricamento lento standardizzato, l'immagine dovrebbe caricarsi normalmente.
- Controlla se il tuo sito ha script di test A/B o di personalizzazione che possono essere caricati in modo più asincrono o se negli script sono presenti funzionalità non fondamentali che possono essere disattivate. In genere, gli script di test A/B e di personalizzazione non possono essere caricati in modo completamente asincrono poiché devono essere eseguiti prima del caricamento dei contenuti della pagina, ma potrebbe esserci la possibilità di caricare parti degli script in modo più asincrono. Consulta l'articolo Percorso di rendering critico per comprendere il compromesso fondamentale tra gli script sincroni (noti anche come script di blocco del rendering) in generale e il tempo di caricamento della pagina, quindi decidi se devi dare priorità agli script di blocco del rendering rispetto al tempo di caricamento della pagina o viceversa.
- Il codice di terze parti costituisce circa la metà di tutte le richieste per la maggior parte dei siti web. Prendi in considerazione l'optimizing oppure la rimozione o la disattivazione temporanea del codice di terze parti che non è fondamentale per il funzionamento del tuo sito.
- Se la priorità delle release di funzionalità è ridotta, questo potrebbe essere il momento ideale per eseguire la pulizia. Rimuovi i tag da Tag Manager, pulisci le dimensioni dei file CSS e JS e
rimuovi le funzionalità o il codice obsoleti. La scheda Copertura in Chrome DevTools e la classe
Coverage
in Puppeteer possono aiutarti a rilevare il codice inutilizzato.
Per ulteriori indicazioni, consulta la sezione Tempi di caricamento rapidi.
Immagine hero di NASA su Unsplash