Como aumentar velocidade de seu site? Veja como chegar na nota 100/100 PageSpeed

Charles David

9 anos atrás

Passo-a-passo para aumentar a performance de seu site e sua nota no PageSpeed

Velocidade e tempo de carregamento de um site atualmente é primordial, além de ser um fator de classificação de SEO para aparecer bem posicionado, e entre as primeiras posições da busca orgânica. Os usuários não tem mais paciência de esperar nem 3 segundos para uma página ser carregada, ainda mais quando o visitante está visualizando seu site através de um dispositivo móvel.

Hoje em dia mais de 50% do tráfego on-line são provenientes de Smartphones e esperam que o site seja carregado instantaneamente. E para verificar essa velocidade existem ferramentas para testes de velocidade como o Google PageSpeed Insights, WebPagetest, GTMetrix e o KeyCDN que lhe dão uma visão sobre a forma como o site carrega e fornece recomendações práticas sobre como otimizá-lo tanto para desktop e mobile.

Aumentar Velocidade do Site em WordPress

Para quem utiliza a plataforma WordPress facilita e muito o processo de otimização de velocidade para acelerar seu WordPress, pois existem plugins de performance que basta instalar e configurar que deixa seu site mais rápido. No arquivo .htaccess basta copiar e colar alguns códigos para aproveitar cache, otimização e compressão de imagens ou então compactar JavaScript e CSS automaticamente.

Como fazer com que as páginas carreguem mais rápido?

Primeiramente, vamos analisar o site na ferramenta de teste de velocidade PageSpeed Insights para verificar o desempenho atual de seu site. O PageSpeed Insights irá analisar o conteúdo de uma página Web, em seguida, gerar sugestões para torná-la mais rápida.

Uma das primeiras opções é na própria ferramenta do PageSpeed, na parte inferior da análise temos a opção de fazer o download dos recursos de image, JavaScript e CSS já otimizados.

Basta clicar no link em destaque para baixar os arquivos, e em seguida fazer o upload (via FTP ou Gerenciador de Arquivos) na mesma pasta ou caminho que a ferramenta mostrar na análise.

Por exemplo: Baixamos os arquivos, e já obtivemos a imagem “plugins.png” otimizada, agora iremos fazer o upload dessa imagem na pasta /screenshots/3.8/ e substituí-la.

O mesmo deverá ser feito tanto para JavaScript e CSS, porém sempre faça um backup dos arquivos que irá modificar, caso mostre algum erro no site futuramente.

1. Otimizando Imagens automaticamente

A ferramenta PageSpeed Insights sugere que otimizemos nossas imagens para carregar mais rápido, reduzindo o tamanho do arquivo. Formatar e compactar corretamente as imagens pode economizar muitos bytes de dados.

Veja a solução para otimizar as imagens no WordPress:

O plugin EWWW Image Optimizer reduz o tamanho da imagens automaticamente. Ele otimiza as imagens que você já enviou, além de converter para o formato de arquivo que irá produzir o menor tamanho de imagem, e aplicará a compressão para conseguir poupar o tamanho das imagens, sem perda de qualidade.

Veja a solução para otimizar as imagens manualmente:

Você poderá comprimir todas as imagens usando ferramentas como o Compressor.io e TinyPNG. São ferramentas gratuitas e podem reduzir as imagens por mais de 80%, sem diminuir a qualidade.

Reduzir o tamanho das imagens para as dimensões mínimas sem diminuir a qualidade. Você nunca deve ter uma imagem com largura e altura mais do que a imagem irá aparecer no site. Por exemplo: Se sua imagem no site é 150x150px, esse deverá ser exatamente o tamanho da imagem, sem redução no CSS ou HTML através de tags.

2. Compactação de Arquivos JavaScript e CSS

A compactação do código JavaScript e CSS pode economizar muitos bytes de dados e acelerar os tempos de download, de análise e de execução

Veja a solução para compactar arquivos JavaScript e CSS no WordPress:

O plugin Autoptimize acelera seu site e ajuda a economizar largura de banda através da agregação e minimizar JS, CSS e HTML. Ele concatena todos os scripts e estilos,minifica e comprime, além de acrescentar expiração nos cabeçalhos, armazena-os e move para o rodapé. Também otimiza o código HTML para tornar sua página realmente mais leve.

Veja a solução para compactar arquivos JavaScript e CSS manualmente:

O processo minifying reduz os tamanhos de seus arquivos, eliminando espaços desnecessários, brancos e comentários em seus arquivos JavaScript, CSS e HTML.

Para corrigir esse problema, você pode instalar no seu servidor o Gulpjs. A ferramenta cria automaticamente um novo arquivo CSS e remove todos os espaços.

Porém, a forma mais fácil é baixar os arquivos da ferramenta PageSpeed como descrito no início da postagem.

3. Aproveitando o cache do navegador

A definição de uma data de validade ou de uma idade máxima nos cabeçalhos de HTTP para recursos estáticos instrui o navegador a carregar os recursos transferidos anteriormente a partir do disco local e não por meio da rede.

Veja a solução para aproveitar cache do navegador no WordPress:

O plugin W3 Total Cache melhora a experiência do usuário do seu site, aumentando o desempenho do servidor, reduzindo os tempos de download e proporcionar a integração transparente rede de distribuição de conteúdo (CDN).

Você também pode aproveitar o cache do navegador, adicionando Expiração nos Cabeçalhos. Iremos dizer ao navegador se eles devem solicitar um arquivo específico do servidor ou se deve solicitar através do cache do navegador. O que irá reduzir a quantidade de pedidos HTTP que são necessários.

Adicione o código abaixo em seu arquivo .htaccess, se seu servidor é Apache.

#Força a utilizar Cache-Control e Expires header

<IfModule mod_headers.c>

Header unset ETag

</IfModule>

FileETag None

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/cache-manifest "access plus 0 seconds"

# Html

ExpiresByType text/html "access plus 0 seconds"

# Data

ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType application/xml "access plus 0 seconds"

ExpiresByType application/json "access plus 0 seconds"

# Feed

ExpiresByType application/rss+xml "access plus 1 hour"

ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon

ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio

ExpiresByType image/gif "access plus 1 month"

ExpiresByType image/png "access plus 1 month"

ExpiresByType image/jpg "access plus 1 month"

ExpiresByType image/jpeg "access plus 1 month"

ExpiresByType video/ogg "access plus 1 month"

ExpiresByType audio/ogg "access plus 1 month"

ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType video/webm "access plus 1 month"

# HTC files

ExpiresByType text/x-component "access plus 1 month"

# Webfonts

ExpiresByType application/x-font-ttf "access plus 1 month"

ExpiresByType font/opentype "access plus 1 month"

ExpiresByType application/x-font-woff "access plus 1 month"

ExpiresByType image/svg+xml "access plus 1 month"

ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS / JS

ExpiresByType text/css "access plus 1 year"

ExpiresByType application/javascript "access plus 1 year"

ExpiresByType application/x-javascript "access plus 1 year"

</IfModule>

#Força o IE a sempre carregar utilizando a última versão disponível

<IfModule mod_headers.c>

Header set X-UA-Compatible "IE=Edge,chrome=1"

<FilesMatch

"\.(js|css|gif|png|jpeg|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >

Header unset X-UA-Compatible

</FilesMatch>

</IfModule>

`Veja a solução para aproveitar cache do navegador manualmente:`

Você deverá utilizar uma CDN, que são redes de servidores localizados em vários locais do mundo. São capazes de armazenar em cache a versão estática de sites, como imagens, CSS e aquivos JavaScripts. Os CDN armazena cópias de conteúdo do seu site em seus servidores, e quando o usuário acessa seu site, o conteúdo estático é carregado a partir do servidor mais próximo a eles.

Por exemplo, se o servidor principal de seu site é de São Paulo, um visitante do Amazonas teria que esperar para o servidor carregar todo o caminho, sendo que com o CDN o site seria carregador a partir de um local mais perto do Amazonas, que iria carregar seu site mais rápido.

A melhor descrição para CDN seria: Um servidor perto de você

Um dos mais conhecidos é o Cloudflare que opera a partir de 79 servidores de dados ao redor do mundo.

Porém, mesmo utilizando toda essa tecnologia, ainda podem aparecer esses tipos de problemas como mostramos na imagem abaixo, de Compactação de JavaScript do PageSpeed com recursos de terceiros:

Aproveitar cache Scripts Twitter, Facebook e Google Plus

Para corrigir esse problema de scripts de mídia social, deverá substituir os contadores fornecidos por eles com algumas imagens estáticas hospedadas no CDN. Ao invés, de ter os scripts de terceiros que estavam tentando acessar os dados do Twitter, Facebook e Google Plus para obter o número de seguidores, e hospedá-los em seu servidor.

Aproveitar cache código Google Analytics

Mas ainda resta o Script do Google Analytics, que será mais difícil. Isso ocorre por que o roteiro tem uma duração de cache de apenas 2 horas. Como o código do Analytics é raramente modificado, você deverá criar um script que será executado em algum período, por exemplo de 6 em 6 horas, para verificar a última modificação se houver. Então, o script fará o download do código do Analytics se houver alterações. Desta forma, podemos sediar o código do Google Analytics sem ter que carregá-los nos servidores do Google em cada visita.

Caso, haja modificação no código, o servidor irá automaticamente baixar a nova versão e enviá-lo para o CDN. Isso poderá ser feito para todos os scripts de terceiros externos.

Aproveitar cache código Google Analytics no WordPress

Porém para quem utiliza o CMS WordPress, existe o plugin Analytics.js host que insere o código de monitoramento no cabeçalho, salva o arquivo localmente no analytics.js e o mantém atualizado usando wp_cron (). Basta instalar o plugin, digitar seu ID de rastreamento e adicionar o código de acompanhamento em seu tema.

Aproveitar cache código Google Analytics manualmente

Outra solução é ga-lite script, um script do Google Analytics que utiliza a API do Google Analytics. Copie o seguinte código e cole no rodapé de seu site antes da tag </body>. Não esqueça de alterar com seu UA tracking ID:

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>

4. Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Tente adiar ou carregar de maneira assíncrona os recursos de bloqueio, ou incorpore in-line as partes fundamentais desses recursos diretamente ao HTML.

Veja a solução para eliminar JavaScript e CSS de bloqueio de renderização no WordPress:

Nas configurações do Plugins que instalamos, o Autoptimize, devemos configurar da seguinte forma:

– Em opções de JavaScript desmarque a opção “Forçar JavaScript no <head>?”

– Em opções de CSS, marque “Colocar todo CSS inline?”

5. Habilitar Compressão ou Ativar Compactação

Esta regra é acionada quando o PageSpeed detecta que os recursos compactáveis na página não foram veiculados com a compactação HTTP. Isso pode reduzir a quantidade de tempo exigida para fazer o download dos recursos necessários para processar seu site.

Para Apache: use mod_deflate

Para Nginx user HttpGzipModule

ISS: configure a compactação HTTP

Veja a solução para ativar a compactação e habilitar compressão no WordPress

Você pode ativar a compactação, adicionando o seguinte código em seu arquivo .htaccess:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Veja a solução para ativar compactação e habilitar compressão manualmente

A sugestão de compressão pode ser feito nas configurações do seu servidor. Se você não é muito técnico, você pode pedir a sua equipe de suporte para ativar a compactação GZIP em seu servidor.

6. Reduzir tempo de resposta do Servidor

Para reduzir o aviso de tempo de resposta do servidor, as melhores recomendações para isso é usar um serviço de hospedagem rápida e também implementar um CDN.

Conclusão

Estes são os passos mais importantes para aumentar a velocidade de seu site e chegar na nota 100/100 do PageSpeed Insights.

Qual a nota de seu site? Quer deixar seu site mais rápido, mas não sabe como? Entre em contato, que faremos um orçamento e deixarei seu site na velocidade possível, chegando na nota verde do PageSpeed Insights.

Notícias sobre SEO

Charles David

Charles David - Coordenador de SEO e Webmaster com experiência mais de 10 anos na área de SEO. Coordenação das Ações desde sua Criação até análise dos resultados e otimização constante. Planejamento e Gestão de: Web Site Optimization - Search Engine Optimization - SEO Otimização de Sites.