Come garantire che la funzionalità di base del tuo sito web sia sempre disponibile, accessibile, sicura, utilizzabile, rilevabile e veloce.
Questa pagina fornisce indicazioni per garantire che il tuo sito web sia sempre disponibile, accessibile, sicuro e utilizzabile da tutti.
Le indicazioni riportate in questa pagina provengono da una raccolta interfunzionale di team di Google che stanno spostando la loro attenzione a breve termine sul supporto dei siti web che aiutano le persone a rimanere al sicuro durante la situazione di COVID-19. Questi Googler hanno notato che i siti stanno affrontando un aumento senza precedenti della domanda da parte di persone che cercano informazioni critiche, molte delle quali hanno utilizzato raramente o mai il web prima d'ora. Può essere difficile garantire che i siti siano disponibili in questo periodo e accessibili a tutti.
Consulenza
Disponibilità, affidabilità, resilienza e stabilità
Se il tuo sito registra picchi di traffico e non funziona o se vuoi evitare che non funzioni, le indicazioni riportate di seguito possono aiutarti a risolvere rapidamente i problemi o a rilevarli prima che diventino problemi gravi.
- Leggi Correggi un server sovraccarico per scoprire come rilevare, mitigare e prevenire i problemi relativi ai picchi di traffico.
- Rimuovi immagini, video, script e caratteri non necessari. Assicurati che ogni pagina si concentri solo sulla fornitura della funzionalità di cui gli utenti del tuo sito hanno davvero bisogno.
- L'ottimizzazione delle immagini può ridurre in modo significativo l'utilizzo della larghezza di banda del server, perché le immagini sono la principale fonte di sovraccarico sul web.
- Trasferisci il maggior numero possibile di contenuti statici alle CDN. Scopri di più sui provider più comuni: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Verifica se la tua 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 notevolmente le richieste ai server con una modifica minima del codice. Consulta La cache HTTP: la tua prima linea di difesa per una panoramica e Memorizzazione nella cache HTTP e Best practice per la memorizzazione nella cache per consigli specifici. Il controllo Pubblica asset statici con un criterio di cache efficace 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 pertanto richiederanno strategie di memorizzazione nella cache diverse.
- I service worker sono un altro modo per ridurre in modo significativo le richieste ai server, ma potrebbero richiedere un investimento tecnico significativo. Inoltre, consentono al tuo sito web di funzionare offline, permettendoti di mostrare orari di apertura, numeri di telefono e altre informazioni agli utenti di ritorno senza una connessione. Workbox è l'approccio consigliato per aggiungere service worker ai siti web perché automatizza gran parte del boilerplate, semplifica l'adozione delle best practice e previene bug impercettibili che sono comuni quando si utilizza direttamente l'API
ServiceWorkerdi basso livello. - Se il tuo sito sta registrando un aumento significativo dell'utilizzo, verifica di avere una protezione adeguata contro gli attacchi DDoS, perché il tuo sito potrebbe ora essere un target più interessante. Ulteriori dettagli dai provider più comuni: AWS, Azure, Cloudflare, Google Cloud.
Per ulteriori indicazioni, consulta Affidabilità della rete.
Accessibilità
Concentrarsi sull'accessibilità è più importante che mai perché è probabile che più persone con esigenze diverse accedano al tuo sito. Segui le linee guida riportate di seguito per assicurarti che la funzionalità di base del tuo sito web sia accessibile a tutti.
- L'accessibilità è un lavoro di squadra e ognuno ha un ruolo da svolgere. Inizia consultando la guida all'accessibilità per i team di Google e la guida per i team di U.S. Digital Service. Queste guide spiegano il contributo che ogni membro del team (product manager, ingegneri, designer, QA e così via) può dare.
- Esegui una verifica dell'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 dello screen reader.
- Esegui un controllo Lighthouse per individuare i problemi di accessibilità più comuni. Il report fornisce anche un elenco di controlli manuali che puoi eseguire per migliorare l'operatività 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 che Lighthouse non può testare in modo automatico, quindi è comunque importante eseguire 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 sull'accessibilità web su Udacity.
- Guarda la playlist di A11ycast per altri suggerimenti rapidi su argomenti specifici relativi all'accessibilità.
Identità, sicurezza e privacy
Potresti avere la tentazione di prendere scorciatoie per implementare correzioni critiche, ma fai sempre attenzione a non aprire falle di sicurezza. Le persone devono accedere a contenuti su 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 al sicuro.
- Scopri perché tutti i siti web dovrebbero essere protetti con HTTPS, non solo quelli che gestiscono dati PII sensibili.
- Passa a un provider host che utilizza HTTPS per impostazione predefinita o utilizza Let's Encrypt o servizi simili per attivare HTTPS sui tuoi server.
- Consulta l'articolo 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 annullata.
Per ulteriori indicazioni, consulta la sezione Sicurezza e protezione.
Usabilità, UI e UX
Le persone fanno sempre più affidamento sul web per soddisfare le proprie esigenze di base. Molte di queste persone non utilizzano il web di frequente. Vale la pena controllare l'usabilità delle funzionalità di base del tuo sito e assicurarti che siano il più semplici e facili da usare possibile.
- Valuta la possibilità di aggiungere un banner ben visibile (che può essere rimosso con un pulsante X) nella parte superiore del tuo sito web che comunichi chiaramente gli aggiornamenti del servizio. Utilizza un invito all'azione nel banner per indirizzare gli utenti a risorse più specifiche. Valuta la possibilità di utilizzare colori e caratteri distinti che si distinguano dal resto dei contenuti della pagina. Scrivi in modo empatico, concentrati sulle esigenze delle persone e sii trasparente sul tipo di servizio che possono aspettarsi.
- Cerca opportunità per ridurre al minimo le interazioni fisiche nei tuoi Critical User Journey (CUJ) e suggerisci queste modifiche al tuo team di prodotto. Ad esempio, se il tuo servizio di consegna di solito richiede una firma, verifica se esiste un modo per aggirare questo requisito.
- Verifica che i CUJ siano il più semplici e intuitivi possibile e suggerisci modifiche al tuo team di prodotto se vedi opportunità di miglioramento.
- Esamina i principi di un buon design per dispositivi mobili e prova i tuoi CUJ su vari dispositivi mobili per assicurarti che non ci siano problemi evidenti. Le persone che non utilizzano spesso il web e che improvvisamente si trovano a dover fare maggiore affidamento su di esso probabilmente accedono al tuo sito da dispositivi mobili.
- Rifattorizza il tuo sito per utilizzare il più possibile i pattern di responsive design.
- Assicurati che i moduli siano efficienti e ben progettati.
SEO
Le persone cercano informazioni importanti su salute e lavoro. È importante assicurarsi che i tuoi siti siano rilevabili da tutti i motori di ricerca. I controlli SEO di Lighthouse possono aiutarti a rilevare i problemi di base. Segui i blog ufficiali dei motori di ricerca per le indicazioni e gli aggiornamenti più recenti: Google, Bing, Baidu, DuckDuckGo, Yandex. Post recenti relativi al COVID-19:
- Come modificare le attività online riducendo al minimo l'impatto sulla presenza nella Ricerca Google
- Nuove proprietà per eventi virtuali, rinviati e annullati
- Bing adopts schema.org markup for special announcements for COVID-19
- Aggiungi dati strutturati alle comunicazioni relative al COVID-19
- Aiutare le organizzazioni sanitarie a rendere più accessibili le informazioni relative al COVID-19
- Best practice generali per la Ricerca per i siti governativi e sanitari
Per ulteriori indicazioni, consulta la sezione Rilevabile.
Prestazioni
Alcuni ISP (ad esempio in India) stanno registrando un forte aumento dell'utilizzo di internet a casa e non dispongono dell'infrastruttura necessaria per soddisfare la maggiore domanda. In situazioni come questa, la velocità del tuo sito web potrebbe diminuire senza che tu ne abbia colpa. L'ottimizzazione delle prestazioni di caricamento potrebbe essere un modo per compensare gli svantaggi 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 sulle prestazioni della larghezza di banda ridotta.
- Le immagini sono la causa principale del bloat sul web. Potresti riuscire a ridurre in modo significativo l'utilizzo della larghezza di banda del tuo sito web ottimizzando le immagini. Squoosh è un semplice strumento di compressione delle immagini open source che può aiutarti a comprimere rapidamente le immagini.
- Esegui WebPageTest o Lighthouse per scoprire le principali opportunità di miglioramento del rendimento.
- Attiva la compressione del testo per ridurre le dimensioni di rete delle risorse di testo. Spesso si tratta di un modo semplice per migliorare le prestazioni che richiede un investimento tecnico minimo.
- Leggi Fixing website speed cross-functionally per scoprire come collaborare con altri reparti e ottenere il loro consenso.
- 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à con i browser non è al 100%, ma la funzionalità può essere considerata un potenziamento progressivo. In altre parole, se un determinato browser non supporta il caricamento lento standardizzato, l'immagine dovrebbe caricarsi normalmente.
- Controlla se il tuo sito contiene script di test A/B o di personalizzazione che possono essere caricati in modo più asincrono o se negli script sono presenti funzionalità non critiche che possono essere disattivate. In genere, gli script di test A/B e personalizzazione non possono essere caricati completamente in modo asincrono perché devono essere eseguiti prima del caricamento dei contenuti della pagina, ma potrebbe essere possibile caricare parti degli script in modo più asincrono. Consulta Critical Rendering Path 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 dare la 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. Valuta la possibilità di ottimizzare o rimuovere o disattivare temporaneamente il codice di terze parti non fondamentale per il funzionamento del tuo sito.
- Se i rilasci di funzionalità non sono una priorità, questo potrebbe essere il momento perfetto per fare un po' di pulizia. Rimuovi i tag dai Tag Manager, ripulisci i file CSS e JS troppo pesanti e rimuovi le funzionalità o il codice deprecati. La scheda Copertura in Chrome DevTools e la classe
Coveragein Puppeteer possono aiutarti a rilevare il codice inutilizzato.
Per ulteriori indicazioni, consulta Tempi di caricamento rapidi.