Fazes um teste de velocidade ao teu website e os resultados dão-te uma pontuação, uma lista de recomendações e quase nenhuma indicação de por onde começar. Saber acelerar um website significa perceber que melhorias atuam em que partes da sequência de carregamento e quais produzem os melhores resultados pelo esforço envolvido. Este artigo explica as mudanças mais eficazes a fazer, por que ordem tratá-las e o que um website típico de uma pequena empresa pode esperar de cada melhoria.
A velocidade de um website não melhora com uma única correção. É o resultado de vários fatores independentes que trabalham em conjunto: o peso da página, a rapidez de resposta do servidor, a eficiência com que os ficheiros são entregues e o trabalho que o navegador tem de fazer para apresentar o que o visitante vê. Tratar primeiro dos maiores contributos produz os ganhos mais rápidos. Para saberes que métricas de carregamento importam e porquê, lê o artigo sobre o que é o tempo de carregamento da página e como se mede.
Quais são as causas mais comuns de tempos de carregamento lentos?
Antes de fazeres alterações, ajuda perceber onde o tempo está realmente a perder-se. Os websites lentos têm quase sempre uma ou mais destas coisas em comum.
Imagens não otimizadas
- As imagens são os maiores ficheiros da maioria das páginas e a causa mais comum de tempos de carregamento lentos
- Uma página com cinco fotografias não comprimidas pode pesar dez a vinte vezes mais do que o necessário
- Corrigir as imagens produz normalmente a maior melhoria de velocidade de qualquer mudança isolada
Sem cache
- Sem cache, cada visita obriga o servidor a reconstruir a página e o navegador a descarregar todos os ficheiros do zero
- A cache permite que os visitantes que regressam carreguem as páginas a partir de cópias guardadas, em vez de descarregarem tudo outra vez
Ficheiros de código sem minificação
- Os ficheiros CSS e JavaScript contêm muitas vezes espaços, comentários e formatação que os tornam legíveis para programadores mas acrescentam peso desnecessário para os navegadores
- A minificação remove este conteúdo a mais e reduz os tamanhos dos ficheiros, por vezes em 30 a 50 por cento
Resposta lenta do servidor
- Tudo espera pelo servidor. Se o servidor demora mais de 800 milissegundos a responder, todas as outras métricas ficam atrasadas desde o início
- Os ambientes de alojamento partilhado e as bases de dados não otimizadas são as causas mais comuns de um Time to First Byte alto
Recursos que bloqueiam a apresentação
- Os scripts e as folhas de estilo carregados no cabeçalho do documento param o navegador antes de ele poder apresentar o que quer que seja
- Mover os scripts não críticos para carregarem depois do conteúdo principal remove este ponto de estrangulamento
Como otimizar as imagens para reduzir o peso da página?
A otimização de imagens é a correção de maior impacto para a maioria dos websites porque reduz diretamente os maiores ficheiros da página. Três mudanças em conjunto produzem a redução mais significativa no tamanho dos ficheiros de imagem.
Escolhe o formato certo
- O WebP produz ficheiros mais pequenos do que o JPEG com a mesma qualidade visual e suporta transparência como o PNG
- Passa para WebP em todas as fotografias e gráficos gerais. Usa PNG apenas quando a transparência for necessária
Redimensiona antes de carregar
- Carregar uma imagem com 4000 píxeis de largura para ser mostrada com 800 píxeis obriga cada visitante a descarregar quatro vezes mais dados do que o necessário
- Redimensiona as imagens para a largura máxima de apresentação antes de as carregar
Comprime para um nível de qualidade adequado
- Uma definição de qualidade de 75 a 85 em formatos com perdas produz ficheiros 60 a 80 por cento mais pequenos do que o original, sem diferença de qualidade visível na maioria das fotografias
- A combinação do formato certo, do tamanho certo e de uma compressão adequada pode reduzir em 80 a 90 por cento o peso das imagens de uma página
Para um guia completo sobre formatos de ficheiro, tipos de compressão, carregamento diferido e imagens responsivas, lê o artigo sobre como otimizar imagens para um carregamento mais rápido.
Como é que a cache reduz o tempo de carregamento?
A cache guarda cópias dos recursos da página para que não tenham de ser descarregados nem regenerados em cada pedido. Há dois tipos que atuam em pontos diferentes da cadeia de entrega.
Cache do navegador
- O navegador do visitante guarda CSS, JavaScript, imagens e letras depois da primeira visita
- As visitas seguintes carregam esses ficheiros a partir do dispositivo local em vez de os descarregarem outra vez, reduzindo bastante o tempo de carregamento para os visitantes recorrentes
- A cache do navegador é controlada por cabeçalhos de cache definidos no servidor. A maioria das plataformas de alojamento modernas define-os automaticamente
Cache do servidor
- O servidor guarda versões pré-geradas das páginas para que não tenham de ser reconstruídas do zero em cada pedido
- Isto acelera o Time to First Byte para todos os visitantes, incluindo os que visitam pela primeira vez
- A cache do servidor tem mais impacto em websites dinâmicos, em que as páginas são geradas a partir de consultas à base de dados
Para uma explicação detalhada de como funciona a cache do navegador e de como a configurar, lê o artigo sobre o que é a cache do navegador e como funciona.
O que faz a minificação pela velocidade de carregamento?
Os ficheiros CSS e JavaScript escritos por programadores contêm espaços, quebras de linha e comentários que tornam o código mais fácil de ler e manter. Os navegadores não precisam de nada disso. A minificação retira-o, produzindo ficheiros mais pequenos que descarregam mais depressa sem mudar o seu funcionamento.
- A minificação de CSS reduz normalmente o tamanho do ficheiro em 20 a 30 por cento
- A minificação de JavaScript pode reduzir o tamanho do ficheiro em 30 a 50 por cento, mais em ficheiros grandes com muitos comentários e espaços
- A minificação é uma das vitórias mais fáceis porque não exige mudanças na aparência nem no funcionamento do site e pode muitas vezes ser ativada através de um plugin ou de uma definição da plataforma
Para um resumo completo de como funciona a minificação em CSS, JavaScript e HTML, lê o artigo sobre o que é a minificação e como ajuda o teu website.
Como é que uma CDN reduz o tempo de carregamento para os visitantes?
Uma rede de distribuição de conteúdo reduz a distância física entre o visitante e o servidor que entrega os teus ficheiros. Sem uma CDN, todos os visitantes ligam-se a um servidor num só local. Com uma CDN, cada visitante é servido a partir do servidor mais próximo.
- Para visitantes perto do servidor de origem, a melhoria de velocidade de uma CDN é modesta
- Para visitantes noutros países ou regiões, uma CDN pode reduzir o Time to First Byte em centenas de milissegundos
- As CDN têm mais impacto em websites com público internacional ou com muito conteúdo multimédia
- Algumas plataformas de alojamento incluem a entrega por CDN automaticamente. Quando está incluída, não é preciso nenhuma configuração adicional
Para uma explicação completa de como funcionam as CDN e de quem precisa de uma, lê o artigo sobre o que é uma CDN e como ajuda o teu website.
O que é o carregamento diferido e como reduz o tempo de carregamento inicial?
O carregamento diferido (lazy loading) adia o descarregamento de imagens e outros recursos que estão abaixo da área visível até o visitante fazer scroll para perto deles. Isto reduz a quantidade de dados que o navegador precisa de descarregar antes de a página ficar utilizável.
- Numa página com vinte imagens, o carregamento diferido significa que o navegador descarrega apenas as três ou quatro imagens visíveis no ecrã quando a página abre pela primeira vez
- As imagens restantes carregam à medida que o visitante faz scroll, distribuindo o descarregamento ao longo do tempo em vez de o concentrar no início
- O carregamento diferido melhora diretamente o Time to Interactive e pode ter um efeito notório no Largest Contentful Paint quando o conteúdo da área visível não tem muitas imagens
- Não apliques carregamento diferido a imagens na área visível. Essas têm de carregar de imediato
Para um guia completo sobre como funciona o carregamento diferido e como o implementar, lê o artigo sobre o que é o carregamento diferido e como funciona.
Como é que os recursos que bloqueiam a apresentação atrasam uma página?
Quando um navegador encontra um script ou uma folha de estilo no cabeçalho do documento, pára a apresentação até esse ficheiro acabar de carregar. O visitante não vê nada enquanto isto acontece. Chama-se a isto um recurso que bloqueia a apresentação.
Como reduzir o bloqueio da apresentação
- Move o JavaScript não crítico para carregar no fim do documento ou usa o atributo
deferouasyncpara que os scripts não parem a apresentação - Identifica que CSS é necessário de imediato (estilos da área visível) e qual pode carregar mais tarde
- Elimina ou substitui os scripts de terceiros que não são essenciais. Os widgets de chat, os conteúdos incorporados de redes sociais e os scripts de acompanhamento acrescentam todos tempo de bloqueio
E o tempo de resposta do servidor?
Todas as outras melhorias são limitadas pela rapidez com que o servidor responde logo à partida. Um servidor lento acrescenta atraso antes de o navegador poder começar a carregar qualquer recurso.
O que afeta o tempo de resposta do servidor
- Qualidade do alojamento: os ambientes de alojamento partilhado dividem CPU e memória por muitos sites, causando tempos de resposta imprevisíveis
- Desempenho da base de dados: consultas lentas ou não otimizadas à base de dados atrasam a capacidade do servidor de gerar uma resposta
- Cache no servidor: sem cache, cada pedido desencadeia uma reconstrução completa da página a partir da base de dados
- Distância geográfica ao servidor: mesmo antes de entrar uma CDN, um servidor longe do visitante acrescenta latência
Um bom Time to First Byte é inferior a 800 milissegundos. Se o teu TTFB estiver sempre acima disso, melhorar o alojamento ou implementar cache no servidor produz ganhos que nenhuma otimização do lado do visitante consegue replicar.
Por onde começar para acelerar um website?
Se estás a trabalhar em melhorias de velocidade pela primeira vez, esta ordem produz os ganhos mais rápidos com o menor esforço num website típico de uma pequena empresa.
Ordem de prioridade para a maioria dos websites
- Primeiro: otimiza as imagens. Isto trata da maior fonte de peso da página e é muitas vezes responsável por 60 a 80 por cento do tempo de carregamento evitável
- Segundo: ativa a cache. A cache do navegador e do servidor reduz o trabalho feito em cada visita, sobretudo para os visitantes que regressam
- Terceiro: minifica o CSS e o JavaScript. Menos esforço, melhoria fiável nos tempos de transferência de ficheiros
- Quarto: acrescenta uma CDN se o teu público estiver distribuído geograficamente ou se a entrega de conteúdo multimédia for uma parte importante do teu site
- Quinto: trata dos recursos que bloqueiam a apresentação e do tempo de resposta do servidor se os passos acima já foram implementados e as pontuações continuam fracas
Depois de fazeres qualquer conjunto de alterações, faz um teste de velocidade para medires a melhoria antes de passares à área seguinte. Para um guia sobre como interpretar com rigor os resultados dos testes de velocidade, lê o artigo sobre como testar a velocidade do teu website. Para um resumo das métricas específicas que estas melhorias afetam, lê o artigo sobre o que são as Core Web Vitals.
Como o WEMASY reduz o tempo de carregamento do website
O criador de websites do WEMASY trata automaticamente de várias das melhorias de velocidade mais comuns. As imagens são comprimidas e convertidas para WebP no carregamento. Os cabeçalhos de cache do navegador estão configurados por defeito. Os ficheiros CSS e JavaScript servidos pela plataforma são minificados. A entrega por CDN está incluída em todos os planos, servindo os ficheiros estáticos a partir do local mais próximo de cada visitante.
As pontuações de velocidade da página e os dados das Core Web Vitals são visíveis no painel de análise do WEMASY, com recomendações por página que assinalam os problemas restantes. Isto significa que podes acompanhar as melhorias depois de qualquer alteração de conteúdo ou de design sem fazer testes externos à mão.
Vê o que está incluído no criador de websites WEMASY, ou consulta as opções de planos na página de preços.
Perguntas frequentes
Qual é a forma mais rápida de acelerar um website?
Otimizar as imagens produz a maior melhoria de velocidade com o menor esforço na maioria dos websites. As imagens não comprimidas são o maior contributo isolado para o peso da página, e passar para o formato WebP com compressão adequada e dimensões corretas pode reduzir os tamanhos dos ficheiros de imagem em 80 a 90 por cento. Depois das imagens, ativar a cache do navegador e minificar os ficheiros CSS e JavaScript são as melhorias seguintes com mais impacto. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
A velocidade do website afeta o ranking de pesquisa?
Sim. Os motores de pesquisa usam as Core Web Vitals, que medem métricas específicas de carregamento, interatividade e estabilidade visual, como sinais de ranking. As páginas com boas pontuações em Largest Contentful Paint, Interaction to Next Paint e Cumulative Layout Shift têm vantagem de ranking sobre páginas com pontuações fracas, sobretudo quando as páginas concorrentes têm qualidade de conteúdo semelhante. As melhorias de velocidade que aumentam as pontuações das Core Web Vitals podem contribuir para uma melhor visibilidade na pesquisa.
O que é um bom tempo de carregamento de um website?
Nas Core Web Vitals, o objetivo principal é um Largest Contentful Paint abaixo de 2,5 segundos. Na prática, uma página totalmente interativa em três segundos numa ligação móvel cumpre o limite que mais importa, tanto para a experiência dos visitantes como para o ranking de pesquisa. Um carregamento total da página abaixo de cinco segundos em telemóvel é uma referência razoável para a maioria dos websites de pequenas empresas.
Como sei o que está a atrasar o meu website?
Faz um teste de velocidade da página com uma ferramenta que mostre dados de campo a par dos dados de laboratório. Olha para as métricas específicas assinaladas como falhadas, em vez de te concentrares na pontuação geral. Um TTFB acima de 800 milissegundos aponta para problemas no servidor. Uma pontuação de LCP fraca aponta normalmente para problemas de imagens ou de recursos que bloqueiam a apresentação. Um Total Blocking Time alto aponta para problemas de execução de JavaScript. Cada métrica indica uma área diferente a investigar.
O alojamento afeta a velocidade do website?
Sim, de forma significativa. A qualidade do alojamento afeta o Time to First Byte, que determina a rapidez com que o navegador pode começar a carregar qualquer recurso. Os ambientes de alojamento partilhado dividem a capacidade de processamento por muitos sites, levando a tempos de resposta inconsistentes. Um alojamento que inclui cache no servidor e entrega por CDN reduz o TTFB e melhora a velocidade de entrega para todos os visitantes, independentemente das outras otimizações feitas na própria página.
Posso acelerar o meu website sem um programador?
Sim, na maioria das melhorias que fazem a maior diferença. A otimização de imagens, a escolha dos formatos de ficheiro certos e o acrescento de texto alternativo podem ser feitos sem mexer em código. A cache do navegador e a minificação são muitas vezes tratadas automaticamente pela plataforma do website ou podem ser ativadas através de definições. Normalmente só é preciso um programador para alterações avançadas, como a configuração personalizada do servidor, a eliminação de recursos que bloqueiam a apresentação em sites programados à mão ou a otimização de consultas à base de dados.