10 maneiras para deixar seu site mais rápido segundo o Google

site-mais-rápido

A Amazon descobriu que precisava deixar seu site mais rápido, reportando uma receita aumentada de 1% por cada 100 milissegundos que reduzem da velocidade do seu site. O Walmart também encontrou um aumento de 2% nas conversões por cada 1 segundo de melhoria.

Um atraso de 1 segundo no tempo de carregamento da página faz com que haja:

  • 11% menos visualizações de página
  • Redução de 16% na satisfação do cliente
  • 7% de perda nas conversões (fonte: Aberdeen Group)

Isso não é tudo. Um estudo de Akamai, a maior plataforma de entrega de computação em nuvem do mundo, fornecendo 95 exabytes de dados por ano em vários bilhões de dispositivos, descobriu que:

  • 47% das pessoas esperam que uma página da Web seja carregada em dois segundos ou menos.
  • 40% abandonará uma página da Web se demorar mais de três segundos para carregar.
  • 52% dos compradores on-line dizem que as cargas rápidas da página são importantes para sua lealdade em um site.

Mas a velocidade média de carregamento do site aumentou 22% este ano. Agora leva 7,72 segundos para carregar – muito longe do limite de dois segundos que o usuário médio quer esperar.

Claramente, deixar seu site mais rápido é crítico – não apenas para classificar bem com o Google, mas para manter seu faturamento elevado, quer você venda online ou não, um site lento terá impacto nas métricas de seu negócio.

Então, vamos compartilhar 10 coisas que o Google recomenda que você faça para deixar seu site mais rápido, economizando alguns segundos da velocidade de carregamento.

1) Reduzir as solicitações HTTP.

De acordo com o Yahoo, 80% do tempo de carregamento de uma página da Web é gasto baixando as diferentes partes da página: imagens, folhas de estilo, scripts, etc. Uma solicitação HTTP é feita para cada um desses elementos, então, quanto mais componentes de página, mais demora a renderização da página.

Sendo assim, a maneira mais rápida de melhorar a velocidade do site é simplificar seu design.

  • Reduza o número de elementos na sua página.
  • Use CSS em vez de imagens sempre que possível.
  • Combine várias folhas de estilo em uma.
  • Reduza os scripts e coloque-os na parte inferior da página.

Lembre-se sempre, quando se trata de seu site, mais enxuto é melhor. Inicie uma jornada pessoal para reduzir o número de componentes em cada página. Ao fazer isso, você reduz o número de solicitações HTTP necessárias para tornar a renderização da página mais rápida – e você melhorará significativamente o desempenho do site.

2) Reduza o tempo de resposta do servidor.

Seu alvo é um tempo de resposta do servidor é de menos de 200ms (milissegundos). E se você seguir as dicas deste artigo, você estará no seu caminho para alcançar isso.

O Google recomenda o uso de uma solução de monitoramento de aplicativos web e a verificação de estrangulamentos no desempenho. Você pode usar estes recursos:

  • Yslow – para avaliar a velocidade do seu site e obter dicas sobre como melhorar o desempenho.
  • Ferramentas PageSpeed do Google – para saber mais sobre as melhores práticas de desempenho e automatizar o processo.

Leia este relatório em inglês pela Singlehop, Critical Ecommerce Infrastructure Needs, para aprender nove coisas sobre as quais você precisa se concentrar para manter seu site funcionando bem.

3) Habilite compressão do seu site.

As páginas grandes (que é o que você poderia ter se você estiver criando conteúdo de alta qualidade) geralmente são 100kb e mais. Como resultado, elas são volumosas e lentas para baixar. A melhor maneira de acelerar seu tempo de carregamento é reduzir seu tamanho – uma técnica chamada compressão.

A compressão reduz a largura de banda das suas páginas, reduzindo assim a resposta HTTP. Você faz isso com uma ferramenta chamada Gzip.

A maioria dos servidores web pode comprimir arquivos no formato Gzip antes de enviá-los para download, seja chamando um módulo de terceiros ou usando rotinas internas. Segundo o Yahoo, isso pode reduzir o tempo de download em cerca de 70%.

E como 90% do tráfego de internet de hoje viaja através de navegadores que suportam o Gzip, é uma ótima opção para acelerar o seu site.

Leia este artigo para obter mais detalhes sobre a compressão Gzip. Em seguida, configure o servidor para ativar a compactação. O foco do nosso texto aqui é dar insights para quem é leigo no assunto, então talvez valha a pena você entrar em contato com um especialista no assunto ou o responsável pelo seu site.

4) Ative o cache do navegador.

Quando você visita um site, os elementos da página que você visita são armazenados em seu disco rígido em um cache ou armazenamento temporário, então a próxima vez que você visitar o site, seu navegador pode carregar a página sem ter que enviar outra solicitação HTTP para o servidor.

A primeira vez que alguém chega ao seu site, eles precisam baixar o documento HTML, folhas de estilo, arquivos javascript e imagens antes de poder usar sua página. Isso pode ser até 30 componentes e 2,4 segundos.

Uma vez que a página foi carregada e os diferentes componentes armazenados no cache do usuário, apenas alguns componentes precisam ser baixados para visitas subsequentes, isso pode ser apenas três componentes e 0,9 segundo.

De 40 a 60% dos visitantes diários do seu site entram com um cache vazio, por isso é fundamental que você torne sua página rápida para esses visitantes pela primeira vez. Mas você também precisa habilitar o armazenamento em cache para economizar tempo após as visitas subsequentes.

Procure na internet por “habilitar cache” mais o nome do seu servidor ou serviço de hospedagem. Ferramentas como WordPress também manipulam esses elementos.

Os recursos estáticos devem ter uma vida útil do cache de pelo menos uma semana. Para recursos de terceiros, como anúncios ou widgets, eles devem ter uma vida útil de cache de pelo menos um dia.

Para todos os recursos armazenados em cache (arquivos JS e CSS, arquivos de imagem, arquivos de mídia, PDFs, etc.), configure a validade até um mínimo de uma semana e, de preferência, até um ano no futuro.

5) Minimize recursos.

Os recursos do WYSIWYG, ou construtores visuais de sites, tornam fácil a criação de uma página da Web, mas às vezes eles criam códigos confusos – e isso pode diminuir consideravelmente seu site.

Uma vez que cada pedaço de código desnecessário aumenta o tamanho da sua página, é importante que você elimine espaços extras, quebras de linha e recuo no seu código para que suas páginas sejam tão enxuta quanto possível.

Também ajuda a minimizar seu código. Aqui está a recomendação do Google:

  • Para minimizar o HTML, você pode usar o PageSpeed Insights para gerar uma versão otimizada do seu código HTML. Execute a análise em sua página HTML e navegue até a seção “Minify HTML”. Clique em ‘Ver conteúdo otimizado’ para obter o código HTML otimizado.
  • Para reduzir seu CSS, você pode tentar YUI Compressor e cssmin.js (para usuários avançados).
  • Para minimizar o JavaScript, experimente o Closure Compiler, JSMin ou o Compressor YUI. Você pode criar um processo de compilação que use essas ferramentas para minimizar e renomear os arquivos de desenvolvimento e salvá-los em um diretório de produção.

6) Otimize as imagens.

Com imagens, você precisa se concentrar em três coisas: tamanho, formato e atributo src.

Tamanho da imagem

Imagens de tamanho extra levam mais tempo para carregar, por isso é importante que você mantenha suas imagens tão pequenas quanto possível. Use ferramentas de edição de imagem para:

Coloque suas imagens no tamanho correto. Por exemplo, se sua página for 570px de largura, redimensione a imagem para essa largura. Não basta carregar uma imagem de largura de 2000px e definir o parâmetro de largura (width = “570”). Isso impacta no tempo de carregamento da sua página e cria uma experiência de usuário ruim.

Reduza a qualidade de cor para o nível mais baixo aceitável.

Remova os comentários da imagem.

Formato da imagem

JPEG é a sua melhor opção. O PNG também é bom, embora os navegadores mais antigos possam não suportá-lo totalmente.

Os GIFs só devem ser usados para gráficos pequenos ou simples (menos de 10 × 10 pixels ou uma paleta de cores de 3 cores ou menos) e para imagens animadas.

Não use BMPs ou TIFFs.

Atributo Src

Depois de trabalhar em cima do tamanho e do formato, certifique-se de que o código está certo também. Em particular, evite os códigos vazios da imagem.

Quando não há fonte nas aspas, o navegador faz uma solicitação para o diretório da página ou para a própria página real. Isso pode adicionar tráfego desnecessário aos seus servidores e até mesmo dados corrompidos ao usuário.

Tire um tempo para redimensionar o tamanho de suas imagens antes de fazer o upload. E sempre inclua o atributo src com um URL válido.

Para garantir que suas imagens sejam carregadas rapidamente, considere adicionar o plugin WP Smush.it ao seu site.

7) Otimize a entrega do CSS.

O CSS contém os requisitos de estilo da sua página. Geralmente, seu site acessa essa informação de duas maneiras: em um arquivo externo, que é carregado antes de sua página renderizar, e em linha, que é inserido no próprio documento HTML.

O CSS externo é carregado na cabeça do seu código HTML. Já os códigos CSS em linha são quando você usa style=“” dentro de tags, como a, img ou div, por exemplo.

Em geral, uma folha de estilos externa é preferível, porque reduz o tamanho do seu código e cria menos duplicidades de código.

Ao configurar seus estilos, use apenas uma folha de estilos CSS externa, uma vez que folhas de estilo adicionais aumentam as solicitações HTTP. Aqui estão dois recursos que podem ajudar:

  • Ferramenta de entrega de CSS: informa quantas folhas de estilo externas o seu siteestá usando.
  • Instruções para combinar arquivos CSS externos (avançado, em inglês).

Evite incluir CSS no código HTML, como divs ou seus títulos (como o CSS em linha acima). Você terá um código mais limpo se colocar todos os CSS em sua folha de estilos externa.

8) Priorize o conteúdo do topo.

Tendo apenas recomendado que você use apenas uma folha de estilo CSS e nenhum CSS inline, há uma ressalva que você precisa considerar. Você pode melhorar a experiência do usuário ao carregar o conteúdo do topo da página mais rápido, mesmo se o resto da página demorar alguns segundos a ser carregado.

Considere dividir o seu CSS em duas partes: uma pequena parte inline que define os elementos de cima do dobra e uma parte externa que pode ser carregada depois.

O mesmo se aplica a páginas específicas do seu site que não precisam carregar a sua folha de estilos por completa. Por exemplo, você tem uma página de login. Provavelmente, ela tera sua logo, um fundo de tela e uma form, certo? Mesmo que sua folha de estilos esteja minimizada e com 200KB, a página de login simples não precisará carregar todas as regras de estilo. Você, ou seu desenvolvedor, pode optar por criar uma folha de estilos exclusiva para essa página, que poderá ter só 4KB. A diferença parece pouca numa internet rápida, mas considere os usuários que usam planos de dados aqui no Brasil.

9) Reduza o número de plugins que você usa em seu site.

Muitos plugins desaceleram, seu site, criam problemas de segurança e muitas vezes causam falhas e outras dificuldades técnicas.

Desative e exclua todos os complementos desnecessários. Em seguida, remova os plugins que diminuem a velocidade do seu site.

Tente desabilitar seletivamente os plugins e, em seguida, medir o desempenho do servidor. Desta forma, você pode identificar qualquer plugin que prejudique a velocidade do seu site.

10) Reduza redirecionamentos.

Os redirecionamentos criam solicitações HTTP adicionais e aumentam o tempo de carregamento. Então você quer mantê-los no nível mínimo.

Se você criou um site responsivo, mais do que provável, você redireciona no local para levar os usuários móveis do seu site principal para a versão responsiva.

O Google recomenda estas duas ações para garantir que um redirecionamento responsivo não diminua a velocidade de seu site:

  • Use um redirecionamento HTTP para enviar usuários com agentes de usuários mobile diretamente para o URL móvel equivalente sem redirecionamentos intermediários.
  • Inclua a marcação link rel = “alternate” nas páginas desktop para identificar o URL equivalente móvel para que o Googlebot possa descobrir suas páginas móveis.

Conclusão: é relativamente fácil deixar seu site mais rápido.

Algumas dessas dicas são fáceis de implementar, mas algumas são táticas avançadas que podem ser intimidantes se você não é familiar com o jargão técnico. Como um polímata, sabemos que com o tempo você vai se acostumar.

Se for o caso, nós mais que recomendamos que você busque por ajuda. Aqui estão alguns recursos que podemos recomendar:

  • Se você gosta de cavar e fazer você mesmo, o Google Developers possui informações úteis que podem ajudá-lo a melhorar o desempenho do site.

Related Articles