Como garantir que a funcionalidade principal do seu site esteja sempre disponível, acessível, segura, usável, detectável e rápida.
Esta página fornece orientações para ajudar a garantir que seu site esteja disponível, acessível, seguro e utilizável para todos o tempo todo.
As orientações nesta página vêm de um conjunto multifuncional de equipes do Google que estão mudando o foco de curto prazo para oferecer suporte a sites que estão ajudando as pessoas a se proteger durante a situação da COVID-19. Esses Googlers observaram que os sites estão enfrentando um aumento sem precedentes na demanda de pessoas que procuram informações críticas, e muitas delas raramente ou nunca usaram a Web antes. Pode ser um desafio garantir que os sites estejam disponíveis durante esse período e acessíveis a todos.
Orientação
Disponibilidade, confiabilidade, resiliência e estabilidade
Se o site estiver recebendo picos de tráfego e estiver falhando, ou se você quiser evitar que ele falhe, as orientações abaixo podem ajudar a corrigir rapidamente problemas ou detectá-los antes que se tornem problemas graves.
- Leia Corrigir um servidor sobrecarregado para saber como detectar, reduzir e evitar problemas de pico de tráfego.
- Remova imagens, vídeos, scripts e fontes desnecessários. Garanta que cada página se concentre apenas em fornecer a funcionalidade de que as pessoas que usam o site realmente precisam.
- A otimização das imagens pode reduzir significativamente o uso da largura de banda do servidor, porque as imagens são a principal fonte de sobrecarga na Web.
- Descarregue o máximo possível do seu conteúdo estático para CDNs. Mais detalhes de provedores comuns: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Verifique se a CDN tem otimizações fáceis de ativar, como compactação de imagem dinâmica, compactação de texto ou minificação automática de recursos JS e CSS.
- Otimizar o armazenamento em cache HTTP pode reduzir significativamente as demandas nos seus servidores com o mínimo de mudanças no código. Para uma visão geral, consulte O cache HTTP: sua primeira linha de defesa. Para conferir recomendações específicas, confira o armazenamento em cache HTTP e as práticas recomendadas de armazenamento em cache. A auditoria Disponibilizar recursos estáticos com uma política de cache eficiente no Lighthouse pode ajudar a detectar rapidamente os recursos que não estão sendo armazenados em cache. Lembre-se de que diferentes tipos de recursos terão diferentes requisitos de atualização e, portanto, exigirão diferentes estratégias de armazenamento em cache.
- Os service workers são outra maneira de reduzir significativamente as demandas nos seus servidores, mas podem exigir um investimento técnico significativo. Elas também permitem que seu site funcione
off-line,
permitindo que você apresente horário de funcionamento, números de telefone e outras informações para
usuários recorrentes sem conexão. Workbox é
a abordagem recomendada para adicionar service workers a sites, porque
automatiza muitos códigos boilerplate, facilita o cumprimento das práticas recomendadas e
impede bugs sutis que são comuns ao usar diretamente a API
ServiceWorker
de baixo nível. - Caso seu site esteja recebendo um grande aumento de uso, verifique se você tem a proteção adequada contra ataques DDoS, porque ele pode ser um alvo mais atraente. Mais detalhes de provedores comuns: AWS, Azure, Cloudflare, Google Cloud.
Consulte Confiabilidade da rede para mais orientações.
Acessibilidade
Focar na acessibilidade é mais importante do que nunca, porque mais pessoas com necessidades variadas provavelmente estão acessando seu site. Siga as diretrizes abaixo para garantir que a funcionalidade principal do seu site seja acessível a todos.
- A acessibilidade é um trabalho em equipe, e todos têm um papel a desempenhar. Para começar, consulte o guia de acessibilidade para equipes do Google e o guia de equipe do Serviço Digital dos EUA. Esses guias explicam a contribuição de cada membro da equipe (gerentes de produtos, engenheiros, designers, controle de qualidade etc.).
- Faça uma Análise de acessibilidade para determinar o que está funcionando bem e o que precisa ser melhorado. As extensões do navegador WAVE podem ajudar a fazer uma auditoria de acessibilidade manual do seu site.
- Leia os Guias de acessibilidade para entender melhor tópicos específicos, como navegação pelo teclado e suporte a leitores de tela.
- Execute uma auditoria do Lighthouse para detectar problemas comuns de acessibilidade. O relatório também fornece uma lista de verificações manuais que podem ser realizadas para melhorar a operabilidade do site. Uma pontuação de acessibilidade igual a 100 não garante que o site seja acessível. Há muitas questões importantes que o Lighthouse não pode testar de forma automática. Por isso, ainda é importante fazer revisões manuais. Outras ferramentas de auditoria automatizadas incluem a API WAVE e a extensão AXE.
- Conclua o curso Start Building Accessible Web Applications Today em egghead.io ou confira o curso de acessibilidade na Web na Udacity (links em inglês).
- Assista a playlist A11ycast para mais dicas rápidas sobre temas específicos de acessibilidade.
Identidade, segurança e privacidade
Pode ser tentador usar atalhos para realizar correções críticas, mas sempre tome cuidado para não abrir brechas de segurança ao fazer isso. As pessoas precisam acessar conteúdo de temas extremamente particulares. Os sites precisam proteger esses dados sensíveis do usuário a qualquer custo e convencer as pessoas de que as informações de identificação pessoal (PII) delas são seguras.
- Entenda por que todos os sites precisam ser protegidos com HTTPS, não apenas aqueles que lidam com dados PII confidenciais.
- Mude para um provedor de hospedagem que use HTTPS por padrão ou use a Let's Encrypt (em inglês) ou serviços semelhantes para ativar o HTTPS nos servidores.
- Consulte a explicação sobre cookies SameSite para saber como tornar o uso de cookies mais seguro. Observe que a aplicação da rotulagem de cookies SameSite foi revertida temporariamente.
Consulte Segurança e proteção para mais orientações.
Usabilidade, IU e UX
As pessoas confiam mais na Web para atender às necessidades básicas. Muitas dessas pessoas não usam a Web com frequência. Vale a pena auditar a usabilidade da funcionalidade principal do seu site e verificar se ela é o mais simples e fácil de usar possível.
- Considere adicionar um banner em destaque (que pode ser removido com um botão X) na parte de cima do site que informe claramente as atualizações do serviço. Use uma call-to-action no banner para direcionar as pessoas a recursos mais específicos. Use cores e fontes diferentes que se destaquem do restante do conteúdo da página. Escreva empático, focado nas necessidades das pessoas e transparente sobre o tipo de serviço esperado.
- Procure oportunidades para minimizar as interações físicas nas jornadas críticas do usuário (CUJs, na sigla em inglês) e sugira essas mudanças para sua equipe de produto. Por exemplo, se o serviço de entrega geralmente exige uma assinatura, veja se há alguma maneira de contornar isso.
- Verifique se as CUJs são as mais simples e intuitivas possível e sugira mudanças à equipe de produto se você encontrar oportunidades de melhoria.
- Revise os princípios do bom design para dispositivos móveis e teste as CUJs em vários dispositivos móveis para garantir que não haja problemas graves. As pessoas que não usam a Web com frequência e, de repente, estão tendo que depender mais da Web, provavelmente estão acessando seu site em dispositivos móveis.
- Refatore seu site para usar o máximo possível de padrões de design responsivo.
- Garanta que os formulários sejam eficientes e bem projetados.
SEO
As pessoas estão procurando informações importantes relacionadas à saúde e ao trabalho. É importante garantir que seus sites sejam detectáveis por todos os mecanismos de pesquisa. As auditorias de SEO do Lighthouse podem ajudar você a detectar problemas básicos. Siga os blogs oficiais dos mecanismos de pesquisa para receber as orientações e atualizações mais recentes: Google, Bing, Baidu, DuckDuckGo, Yandex. Postagens recentes sobre a COVID-19:
- Como mudar suas atividades on-line e minimizar o impacto na presença na Pesquisa Google
- Novas propriedades para eventos virtuais, adiados e cancelados (link em inglês)
- Bing adota a marcação schema.org para avisos especiais sobre a COVID-19
- Adicionar dados estruturados aos avisos sobre a COVID-19
- Ajudar as organizações de saúde a tornar as informações sobre a COVID-19 mais acessíveis
- Práticas recomendadas gerais para pesquisar sites governamentais e de saúde
Consulte Visíveis para mais orientações.
Desempenho
Alguns ISPs (na Índia, por exemplo) estão observando um aumento acentuado no uso da Internet doméstica e não têm infraestrutura para atender ao aumento da demanda. Em situações como essa, a velocidade do seu site pode ficar mais lenta sem sua culpa. Otimizar o desempenho de carregamento pode ser uma maneira de compensar o vento de largura de banda reduzida. Em outras palavras, ao reduzir o número de bytes que precisam ser enviados pela rede para carregar suas páginas, você pode compensar o impacto no desempenho da largura de banda reduzida.
- As imagens são a principal causa de sobrecarga na Web. Otimize suas imagens para reduzir significativamente o uso da largura de banda do seu site. O Squoosh é uma ferramenta simples de compactação de imagens de código aberto que ajuda a compactar imagens rapidamente.
- Execute o WebPageTest ou o Lighthouse para descobrir as principais oportunidades de melhoria de desempenho.
- Ative a compactação de texto para reduzir o tamanho da rede dos recursos de texto. Geralmente, essa é uma melhoria de desempenho fácil que exige investimento técnico mínimo.
- Leia Como corrigir a velocidade de sites multifuncionais para saber como colaborar e conseguir a adesão de outros departamentos.
- Use o carregamento lento padronizado de imagens para minimizar as solicitações de imagens que as pessoas talvez nunca vejam. A compatibilidade do navegador não é 100%, mas o recurso pode ser tratado como um aprimoramento progressivo. Em outras palavras, se um determinado navegador não for compatível com o carregamento lento padronizado, a imagem será carregada normalmente.
- Verifique se o site tem scripts de teste A/B ou personalização que possam ser carregados de forma mais assíncrona ou se há alguma funcionalidade não crítica nos scripts que possa ser desativada. Os scripts de teste A/B e personalização geralmente não podem ser carregados completamente de forma assíncrona porque precisam ser executados antes do carregamento do conteúdo da página. No entanto, pode haver uma oportunidade de carregar partes dos scripts de maneira mais assíncrona. Consulte Caminho crítico de renderização para entender a troca fundamental entre scripts síncronos (também conhecidos como scripts de bloqueio de renderização) em geral e o tempo de carregamento da página. Depois, decida se você precisa priorizar os scripts de bloqueio de renderização em relação ao tempo de carregamento da página ou vice-versa.
- O código de terceiros representa cerca de metade de todas as solicitações para a maioria dos sites. Considere optimizing ou remover ou desativar temporariamente o código de terceiros que não é fundamental para executar seu site.
- Se os lançamentos de recursos não forem priorizados, este pode ser o momento perfeito para uma
limpeza. Remova tags dos seus gerenciadores de tags, limpe CSS e JS grandes e remova recursos ou códigos descontinuados. A
guia Cobertura
no Chrome DevTools e a classe
Coverage
no Puppeteer podem ajudar a detectar códigos não utilizados.
Consulte Tempos de carregamento rápidos para mais orientações.
Imagem principal da NASA no Unsplash (em inglês)