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.
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
Veja a solução para otimizar as imagens no WordPress:
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
Veja a solução para compactar arquivos JavaScript e CSS no WordPress:
Veja a solução para compactar arquivos JavaScript e CSS manualmente:
3. Aproveitando o cache do navegador
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:
A melhor descrição para CDN seria: Um servidor perto de você
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
<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
5. Habilitar Compressão ou Ativar Compactação
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
6. Reduzir tempo de resposta do Servidor
Conclusão
Olá Charles, tudo bom?
Eu estava pesquisando como arrumar um problema com velocidade do site que administro e encontrei este artigo. Eu sou leigo, comecei a trabalhar com WordPress a pouco tempo e criei o site e mantenho ele por amor mesmo, não tenho interesse nenhum comercial.
Em minhas pesquisas encontrei vários tutoriais ensinando a como melhorar a velocidade de carregamento do site. Daí eu instalei e configurei alguns plugins conforme fui lendo os tutoriais. Eu instalei o W3 Total Cache, WP Performance Score Booster, Yoast SEO, Google Analytics by MonsterInsights, iThemes Security, Jetpack por WordPress.com (este eu instalei para substituir outros plugins que pioravam a performance do site)…
E realmente o site deu uma melhora de velocidade de carregamento, mas um problema persiste. Ao verificar o site no Google Insights, aparece aquele erro “Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda”… caso queira ver meu resultado, é este: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.raciociniocristao.com.br
Eu li seu artigo mas como sou leigo, não entendi muito bem… Este plugin Autoptimize é para resolver isso? Se sim, por favor, me ajude! Como configurar corretamente ele?
Uma dúvida, como tenho os plugins W3 Total Cache e o WP Performance Score Booster, eles teriam alguma incompatibilidade com o Autoptimize?
Me ajuda nessa por favor, não tenho como contratar alguém pra resolver isso, estou desempregado e como eu disse, mantenho o site como voluntário sem nada em troca. Espero que possa me ajudar nessa.
Grande abraço.
Bom dia Allison, tudo bem?
Pode instalar o Autoptimize sem problemas que ele irá corrigir esses “erros” que apontam na ferramenta. Na solução 4 mostro como configurar:
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
?”– Em opções de CSS, marque “Colocar todo CSS inline?”
Caso não resolva, esse problema ocorre pois ele consta no topo da página (header), o que você pode testar e ver se funciona é verificar os arquivos que estão apontando na ferramenta e inserir no rodapé (footer).
Mas sua nota já está muito boa…Parabéns
Agradeço, me ajudou muito este conteúdo.
Obrigado pelo feedback
Muito bom o artigo. Lerei com mais calma !!
Obrigado pelo comentário
Cara, que dureza consertar esses ‘Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda’ e ‘Aproveitar cache do navegador’! E olha que eu fiz o que tá aqui, tentei outras alternativas e nada.
Putz!
não sei mais o que fazer. falta pouco pra atingir os 100/100. Dá uma olhada:
https://developers.google.com/speed/pagespeed/insights/?hl=pt-BR&url=http%3A%2F%2Fwebsitesempire.com
Excelente conteúdo. Obrigado, pois me ajudou bastante na otimização do meu site. Estava deixando passar detalhes que realmente não encontramos em conteúdos na web.
Parabéns e obrigado mais uma vez pelo excelente conteúdo!
Abçs, Fco Bisneto
Obrigado pelo comentário
Olá Charles, boa tarde! Parabéns pelo artigo!
Não entendi muito bem a parte que fala Aproveitar cache Scripts Twitter, Facebook e Google Plus
Poderia me dar um Help!?
Muito obrigado
Excelente conteúdo!!!
Obrigado pelo comentário
Meu problema esta sendo no cache das redes sociais, como aproveito do cloudflare para me auxiliar nisso?
Valeu pela dica, aumentei consideravelmente meu score após ter seguido alguns passos. Tive melhores resultados na edição de meu .htacess os demais nao alteraram muita coisa. acrescendo apenas 1 a 2 pontos ja na adição dos códigos subiu 12 pontos. Obrigado novamente.
Obrigado pelo feedback fico feliz em ajudá-lo.
Melhor artigo sobre otimização de imagens que já li até hoje, e olha que já trabalho com isso há anos. É incrível o quanto me ajudou!!!
Muito Obrigado pelo comentário e elogio.
Ola Charles. utilizando um tutorial https://www.elegantthemes.com/blog/tips-tricks/how-to-improve-your-google-page-speed-score fiz o passo a passo e meu score foi subindo até chegar à 82/100. Ativei e desativei o w3 total cache e o wp super cache e outros plugins e tudo ia bem até chegar ao final: Imagens. Ativei o WP Smush e depois de mais de 2000 imagens ‘smushadas’, meu site parou de carregar. ficou em loping. Desativei, exclui, fiz o diabo e nada aconteceu. Tive q solicitar a restauracao do backup no host e comecar tudo de novo. Achei esse tutorial bem pareceido com aquele. Alguma sugestão para meu “reinício”?
Boa tarde, tenta fazer manual como no artigo acima. Baixe diretamente do Page Speed as imagens. Porém, como são muitas imagens já tentou utilizar o EWWW Image Optimizer?
Valeu pelas dicas! Consegui sair de 46 para 86 pontos com os procedimentos no .htacess do meu blog: https://www.clubedapipoca.com/blog/
Olá para chegar a 100/100 eu só preciso Priorizar o conteúdo visível sabe que o procedimento no wordprees para fazer isso?
https://developers.google.com/speed/pagespeed/insights/?hl=pt-br&url=http%3A%2F%2Fvagassergipe.com.br&tab=desktop
nossa me ajudou muito
obrigado
Muito obrigado pelo feedback
Legal, só faltou mais detalhes para: “Aproveitar cache Scripts Twitter, Facebook e Google Plus”, estou com problemas no meu que não acho a solução.
https://static.doubleclick.net/instream/ad_status.js (15 minutos)
https://connect.facebook.net/pt_BR/sdk.js (20 minutos)
Muito bom esse tuto, brother certamente você dispôs de tempo, energia, etc., para poder fazer um tuto tão bom!
Parabéns pelo trabalho e dedicação.
Obrigado pelo reconhecimento
Uns dos melhores conteudo da internet, simples é didatico…