Desempenho de Sites

Desempenho de um site nao e sobre pontuacao em ferramenta de teste. E sobre o tempo real que um visitante espera ate ver a informacao que procura. Para sites institucionais e de servico, onde o publico busca horarios, contatos, documentos ou orientacoes, cada segundo a mais de carregamento e uma pessoa a menos que encontra o que precisa. Esta pagina cobre os fatores que realmente afetam a velocidade de sites de servico, como otimizar imagens, cache e estrutura sem complicar a manutencao, e por que desempenho afeta tanto a experiencia do usuario quanto a visibilidade do site em buscadores. O conteudo aqui se baseia no que a equipe de web.dev documenta sobre Core Web Vitals e nas metricas que realmente importam para sites em producao.

Pesquisas da Google sobre comportamento de usuarios indicam que 53% dos visitantes abandonam uma pagina que leva mais de 3 segundos para carregar em conexao movel. Para sites de servico publico no Brasil, onde a conexao media em muitas regioes nao e fibra otica, esse numero e ainda mais relevante.

Peso de imagens: o maior problema silencioso

Na maioria dos sites institucionais que auditamos, o principal fator de lentidao e o peso das imagens. Uma foto de 3MB na pagina inicial transforma um site que poderia carregar em 1 segundo em algo que leva 8 segundos em 4G.

Regras praticas para imagens em sites de servico:

• Nenhuma imagem acima de 200KB para uso em pagina. Preferencialmente abaixo de 120KB.
• Sempre definir width e height no HTML para evitar layout shift
• Usar carregamento lazy para imagens fora da area visivel
• Dimensionar a imagem para o tamanho de exibicao real, nao para o tamanho original da camera
• Uma imagem por pagina e suficiente para a maioria dos sites institucionais

O formato JPEG com compressao de 75 a 85% e suficiente para fotos em sites de servico. Nao precisa de pipeline complexo de processamento de imagem. Um editor simples que redimensiona e comprime ja resolve.

Cache: servir o que ja esta pronto

Cache e guardar uma copia pronta da pagina ou dos arquivos para nao precisar reconstruir a cada visita. Para sites institucionais, onde o conteudo muda raramente, cache agressivo e a otimizacao mais eficiente que existe.

Existem dois niveis de cache relevantes:

• Cache do navegador: O navegador do visitante guarda copias de CSS, JavaScript e imagens. Na segunda visita, nao precisa baixar tudo de novo.
• Cache de CDN ou servidor: Uma copia da pagina pronta e servida a partir de um ponto proximo ao visitante, sem consultar o servidor de origem.

Para sites estaticos, como os gerados por Nuxt em modo de geracao estatica, o cache funciona naturalmente. Cada pagina e um arquivo HTML pronto que o servidor entrega diretamente. Nao precisa de banco de dados, processamento PHP ou geracao dinamica.

Headers de cache devem ser configurados para que arquivos que nao mudam (imagens, CSS, fontes) tenham cache de longa duracao. Paginas HTML podem ter cache mais curto para que atualizacoes de conteudo aparecam em tempo razoavel.

Estrutura de pagina e HTML limpo

Antes de otimizar imagens e cache, a estrutura da pagina precisa ser limpa. HTML com dezenas de divs aninhados desnecessarios, scripts que bloqueiam renderizacao e CSS nao utilizado tornam qualquer otimizacao posterior menos eficaz.

Para sites de servico, a estrutura ideal e:

• HTML semantico com secoes claras: header, main, footer, nav, section
• CSS carregado no head, preferencialmente inline para conteudo critico
• JavaScript carregado com defer ou async, nunca bloqueando a renderizacao
• Sem frameworks pesados para paginas que sao essencialmente texto e formularios

Um site institucional bem construido pode ter menos de 50KB de HTML e 30KB de CSS. Isso carrega em fracao de segundo em qualquer conexao.

Moderacao com scripts e plugins

Cada script adicionado ao site custa tempo de carregamento. Plugins de analytics, chat, mapas, redes sociais e rastreamento podem facilmente dobrar o tempo de carregamento de uma pagina.

A pergunta que vale antes de adicionar qualquer script: essa funcionalidade justifica o custo de performance? Um mapa incorporado do Google Maps na pagina de contato pode pesar 500KB. Um endereco de texto com link para abrir no aplicativo de mapas pesa zero.

Para sites de servico, a lista de scripts justificaveis geralmente e curta:

• Analytics basico, se necessario para decisoes reais
• Formulario de contato, se nao puder ser feito com HTML e email
• Busca interna, se o site tem conteudo suficiente para justificar

Botoes de compartilhamento de redes sociais, widgets de chat e badges de terceiros raramente justificam o impacto em performance para sites institucionais.

Velocidade real em conexoes brasileiras

Testar desempenho em computador desktop com fibra otica nao representa a experiencia do usuario medio de um site de servico publico no Brasil. Segundo dados da Anatel, a velocidade media de banda larga movel ainda varia significativamente entre regioes.

Teste seu site nestas condicoes:

Se o site carrega em menos de 3 segundos nessas condicoes, esta adequado. Se leva mais de 5 segundos, tem trabalho a fazer.

Por que desempenho afeta visibilidade em buscadores

Desde 2021, o Google usa metricas de experiencia da pagina como fator de classificacao. As tres Core Web Vitals medem o tempo ate o maior conteudo visivel carregar (LCP), a resposta do site ao primeiro clique ou toque (INP) e a estabilidade visual da pagina durante o carregamento (CLS).

Para sites institucionais que competem por termos locais como "cartorio zona norte servicos" ou "como reconhecer firma", a diferenca entre um site rapido e um lento pode significar aparecer ou nao na primeira pagina de resultados.

Mas desempenho importa alem do Google: um site rapido transmite competencia. Um site lento transmite descuido. Para organizacoes de servico, essa percepcao importa.

Proximos passos

Para entender como acessibilidade e desempenho se complementam, veja a secao de acessibilidade. Para questoes de infraestrutura como cache no servidor, headers e CDN, a pagina de infraestrutura cobre o lado operacional. E para orientacao sobre hospedagem que suporte bom desempenho, veja hospedagem gerenciada.