A otimização da hospedagem para aplicativos da Web voltados para conteúdo envolve várias estratégias para melhorar o desempenho e a experiência do usuário. As principais abordagens incluem o uso de CDNs para envio eficiente de conteúdo, armazenamento em cache do conteúdo, incluindo recursos estáticos, otimização da segurança, monitoramento, consideração das opções de escalonabilidade e minimização da latência. Opções de pesquisa eficientes e integrações de segurança otimizam ainda mais a hospedagem. O refinamento contínuo dos esforços baseados no desempenho é essencial para atender às demandas em evolução dos usuários.
Como hospedar recursos estáticos
Os recursos estáticos são arquivos que não são gerados dinamicamente pelo servidor para cada solicitação. Os recursos estáticos permanecem inalterados ou são atualizados com pouca frequência e geralmente são entregues ao navegador do usuário sem renderização do lado do servidor.
| Tipos de arquivos estáticos | |
|---|---|
| Imagens | Imagens como fotos, ícones, ilustrações, gráficos e logotipos são arquivos estáticos. Alguns formatos de exemplo incluem JPEG, PNG, WebP, GIF ou SVG. |
| Folhas de estilo | As folhas de estilo (CSS) controlam o layout, a fonte, as cores e os aspectos visuais da interface do usuário. Em geral, eles são estáticos e aplicados ao conteúdo HTML no navegador. |
| Áudio e vídeo | Arquivos de áudio e vídeo são recursos estáticos que podem ser incorporados ao aplicativo ou veiculados por meio de players de mídia. |
| JavaScript | Os arquivos JavaScript estáticos (JS) incluem código do lado do cliente que contribui para interatividade para o aplicativo. Esses scripts são executados no navegador do usuário e processam a validação de formulários e o carregamento de conteúdo dinâmico. Bibliotecas JavaScript de terceiros, como jQuery e plug-ins, são incluídos como arquivos estáticos quando melhoram a funcionalidade do aplicativo da Web. |
| WASM | O WebAssembly (WASM) é arquivos que executam uma VM baseada em pilha no navegador com desempenho próximo ao hardware e podem ser compilados em várias linguagens. |
Os recursos estáticos geralmente são armazenados no servidor da Web ou veiculados por CDNs. Os desenvolvedores podem usar técnicas como otimização, minificação e compactação de recursos para diminuir o tamanho do arquivo de recursos estáticos. Isso melhora o desempenho da página. Você também precisa incorporar estratégias adequadas de armazenamento em cache para reduzir a necessidade de downloads repetidos quando os usuários acessarem novamente os sites.
Saiba mais sobre CSS e HTML em web.dev.
Armazenar dados e recursos em cache
O armazenamento em cache em um aplicativo da Web orientado por conteúdo inclui o armazenamento e a reutilização de dados e recursos buscados ou gerados anteriormente. Essa é uma técnica de otimização importante que ajuda a fornecer conteúdo aos usuários de forma rápida, especialmente para dados acessados com frequência e recursos estáticos. O armazenamento em cache melhora o desempenho, reduz a carga do servidor e minimiza a latência para aplicativos da Web orientados por conteúdo.
Confira nesta tabela as descrições dos vários tipos de armazenamento em cache.
| Tipos | |
|---|---|
| Armazenamento em cache do navegador | O navegador do usuário pode armazenar em cache ativos estáticos como imagens, folhas de estilo e arquivos JavaScript. Quando o usuário retorna ao mesmo site, esses recursos podem ser carregados do cache local. |
| Armazenamento em cache no servidor | É comum que aplicativos orientados a conteúdo usem mecanismos de armazenamento em cache do lado do servidor para armazenar conteúdo estático, resultados de consulta de banco de dados ou até mesmo páginas da Web inteiras. Métodos comuns de armazenamento em cache do lado do servidor incluem proxies reversos (Nginx, Varnish), caches na memória (Redis, Memcached) e armazenamento em cache de resultados de consulta de banco de dados. |
| Armazenamento em cache da CDN | As CDNs podem armazenar em cache e distribuir recursos estáticos para servidores de borda próximos aos usuários, melhorando a velocidade de entrega. |
| Armazenamento em cache de consultas de banco de dados | O armazenamento em cache de consultas de banco de dados armazena os resultados de consultas frequentes ao banco de dados na memória ou em um armazenamento em cache. Esse tipo melhora o desempenho do banco de dados, porque reduz a necessidade de executar novamente as mesmas consultas para solicitações semelhantes. |
| Armazenamento em cache do service worker | O armazenamento em cache do service worker permite que os aplicativos da Web armazenem em cache e gerenciem recursos como arquivos HTML, CSS ou JavaScript, independentemente da linha de execução principal da página da Web. Eles são executados em segundo plano e atuam como intermediários entre o aplicativo e a rede. Os benefícios incluem recursos off-line e redução no uso de largura de banda. |
Como armazenar recursos em cache
É importante equilibrar o armazenamento em cache e as atualizações em tempo hábil para que os usuários recebam o conteúdo mais recente e continuem a ter uma experiência positiva ao acessar seu aplicativo da Web. Nem todos os recursos precisam ser armazenados em cache. Não é necessário armazenar em cache conteúdos dinâmicos, como páginas HTML geradas por um script do lado do servidor. Os recursos estáticos podem ser armazenados em cache por um período específico ou até que sejam atualizados no servidor. O plano de implementação da sua estratégia de armazenamento em cache depende do tipo de armazenamento em cache que você optar por fazer. Por exemplo, é possível implementar o armazenamento em cache do navegador usando o cabeçalho Cache-Control nas respostas HTTP ou implementar o armazenamento em cache funcionando do serviço usando a API Cache.
É recomendável usar um sistema de controle de versões para os recursos armazenados em cache. Isso permite atualizar os recursos armazenados em cache sem invalidá-los. Não deixe de monitorar o uso do cache e fazer ajustes quando necessário. Saiba mais sobre armazenamento em cache no web.dev (link em inglês).
Escalonamento
O escalonamento de um aplicativo da Web orientado por conteúdo envolve a implementação de um plano estratégico para lidar com o aumento de tráfego e dados, preservando a eficiência e a confiabilidade do aplicativo. O processo de escalonamento requer planejamento, monitoramento e flexibilidade para gerenciar padrões de tráfego e volumes de dados flutuantes. Ao escalonar um aplicativo da Web, é preciso equilibrar a otimização do desempenho e o gerenciamento dos custos de infraestrutura.
Um balanceador de carga distribui o tráfego entre diferentes servidores. Isso ajuda a garantir que o aplicativo consiga lidar com o aumento de tráfego de maneira eficaz. Você pode diminuir a carga nos seus servidores implementando mecanismos de armazenamento em cache. As CDNs também podem ser valiosas para armazenar recursos estáticos em cache e distribuir conteúdo, reduzindo a latência. Você também pode utilizar autoescaladores para aumentar ou diminuir automaticamente seu aplicativo, conforme necessário. Os escalonadores automáticos podem garantir que o aplicativo tenha os recursos necessários para lidar com o nível atual de tráfego. Sua abordagem e estratégia de escalonamento exigem monitoramento e ajuste de desempenho eficazes. Analise os dados de desempenho regularmente e faça os ajustes necessários na infraestrutura e no código.
Latência
Latência é o tempo de atraso ou atraso quando um usuário interage com seus aplicativos da Web. É o tempo que a solicitação da Web leva para ir do navegador ou dispositivo do usuário para o servidor da Web e para a resposta ir de volta ao dispositivo do usuário. Normalmente, é medido em milissegundos (ms). A latência afeta altamente a experiência do usuário, porque pode levar à frustração e decepção dele.
Os fatores que afetam a latência incluem:
| Fatores | |
|---|---|
| Latência de rede | A distância entre o usuário do aplicativo da Web e o servidor, o roteamento de dados e a qualidade da conexão de rede podem influenciar a latência da rede. |
| Tempo de processamento do servidor | O tempo de processamento do servidor depende da complexidade da solicitação e do desempenho do servidor. |
| Tempo de envio do conteúdo | O tempo de envio do conteúdo é influenciado pelo local do servidor, pelas CDNs e pela otimização de recursos. Refere-se ao tempo necessário para carregar imagens, folhas de estilo, scripts e outros recursos necessários para renderizar uma página da Web. |
| Estratégia de carregamento de conteúdo | Estratégias como pré-busca, carregamento assíncrono de conteúdo e carregamento lento afetam a latência percebida, porque geralmente priorizam o carregamento de conteúdo essencial. |
É possível melhorar a latência incorporando técnicas como armazenamento em cache de conteúdo, otimização de entrega de conteúdo, ajuste de desempenho do servidor e usando CDNs para minimizar o RTT.