Estou novamente aqui, Bruno Gonçalves. De tempos em tempos utilizo o site do Tales para fazer testes de melhoria de desempenho.
Navegue pelo site e veja se concorda que o desempenho está impressionante para um site em WordPress.
Estamos utilizando um servidor VPS gratuito da Oracle e também o plano gratuito da Cloudflare, aqui não irei abordar a configuração do servidor VPS ou a migração do DNS para a Cloudflare, portanto vamos considerar que você já tem seu site em WordPress funcionando e com o DNS sendo gerenciado pela Cloudflare.
Confira os plugins para acelerar o site e como configura-los:
Async Javascript
https://br.wordpress.org/plugins/async-javascript/
Faz o que o próprio nome já diz, possibilita o carregamento do site sem bloqueios aguardando o carregamento dos arquivos de Javascript. Dependendo de como seu site é construído e dos recursos utilizados, isso pode gerar problemas no site, mas nas configurações é possível fazer ajustes, veja como ficou a configuração deste site:
Autoptimize
https://br.wordpress.org/plugins/autoptimize/
Dependendo do tema e plugins utilizados em seu site, esse plugin pode fazer diversas melhorias, aqui estamos utilizando o tema Divi e poucos plugins, portanto ativei apenas três configurações:
-Otimizar código HTML.
-Carregamento adiado de imagens
-Adia o carregamento a partir da “enésima” – Essa configuração utilizei o valor 3, assim evita de adiar o carregamento da imagem do logo e a primeira imagem do site.
WebP Express
https://br.wordpress.org/plugins/webp-express/
Este site estava com diversos .png e .jpg mal otimizados, então nada melhor que ir diretamente para .webp.
Veja nas imagens a configuração que utilizei:
WP Cloudflare Super Page Cache
https://br.wordpress.org/plugins/wp-cloudflare-page-cache/
Este é o plugin principal, que fará a grande diferença.
O primeiro passo é criar uma API Key ou API Token, eu recomendo o uso da API Token, por limitar o acesso as configurações da CloudFlare.
Logado na CloudFlare vá em “Meu Perfil”, “Tokens de API”, “Criar Token”, “Criar Token Personalizado”, então configure conforme a imagem:
Agora na configuração do plugin utilize as seguintes configurações:
Aba General
Aba Cache
Aba Advanced
Na aba Third Party ativei apenas o Autoptimize
Em OTHER SETTINGS
Configurações para o .htaccess
Adicione ao arquivo .htaccess na pasta principal do WordPress, isso se estiver utilizando servidor Apache:
<FilesMatch “^.*(error_log|wp-config\.php|php.ini|\.[hH][tT][aApP].*)$”>
Order deny,allow
Deny from all
</FilesMatch>
Options All -indexes
#Customize expires caching start - adjust the period according to your needs
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/webp "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
#Expires caching end
# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|webp|gif|swf)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
Dentro da CloudFlare em Speed – Otimização
Dentro da CloudFlare em Caching – Configuração
Dentro da CloudFlare em Regras – Page Rules
Conclusão
A configuração da Cloudflare é quase toda feita pelo plugin WP Cloudflare Super Page Cache, mas é bom verificar se está tudo certo.
Cada site possui suas próprias funcionalidades, tema e plugins, portanto sempre é necessário fazer ajustes, mas este guia trás um passo a passo funcional para a maioria dos sites feitos em WordPress, uma imagem do resultado no Google Page Speed:
