O arquivo .htaccess, de forma resumida, possui a função de permitir aos proprietários de servidores de hospedagem um pouco mais de controle sobre ele. Por isso, sabendo explorar todas as possibilidades desse arquivo, é possível acelerar o carregamento do site com apenas algumas linhas de código.
Praticamente quase todos os servidores web Apache disponibilizados por empresas de hospedagem, como a HostGator e Hostinger, possuem suporte a arquivos .htaccess. As empresas que não permitirem isso, é porque utilizam apenas Nginx. Como sabemos que esses termos podem ser confusos para usuários iniciantes, daremos uma breve explicação de cada:
O Apache web server é um servidor de código aberto (open source) mantido pela empresa Apache Software Foundation e é responsável por cerca de 46% de todos os sites online na internet, tendo uma fatia impressionante de mercado, o que o faz ser utilizado pela maioria das empresas de hospedagem.
Ngnix web server é um servidor com facilidade para gerenciar conexões simultâneas. Como a arquitetura dele é baseada em eventos específicos. Dessa forma, ele consegue lidar com centenas de milhares de conexões ao mesmo tempo. Tudo isso usando uma quantidade minúscula de recursos.
Explicações dadas, se o seu servidor for do tipo Apache, siga com o tutorial. Se não for, outro conteúdo ainda será publicado ensinando como otimizar servidores Nginx. Dito isso, vamos ao conteúdo
Por que acelerar o carregamento do site?
Acelerar o carregamento do site traz uma série de benefícios, muitos até mesmo desconhecidos pelo público geral. Abordaremos cada um deles abaixo:
Motivo 1. Mais resultados nas buscas
A velocidade de carregamento de um site é fator determinante para seu site aparecer na primeira página dos resultados de busca. Afinal de contas, como o Google prioriza uma boa experiência de usuário, se consegue avaliar com maestria que sites rápidos têm vantagem.
Para ter ideia, Maile Ohye, do Google, afirmou de forma consistente: “2 segundos é o tempo aceitável para um site de e-commerce. No Google, esperamos que todos fiquem abaixo de meio segundo.”
Motivo 2. Maior garantia de indexação das páginas
O John Mueller, responsável pelo Google, uma vez disse: “Temos visto um tempo de resposta extremamente alto em alguns sites (maiores que 2 segundos por uma única url). Isso ocasiona limitações no número de urls indexadas.”
Em outras palavras, parafraseando um pouco Mueller, seu site deve carregar em menos de 2 segundos para evitar problemas de indexação. Claro, o google ainda indexará suas páginas se demorarem um pouco mais do que isso. Mas eles deixaram claro que sites lentos perderão espaço para sites mais rápidos, uma vez que esses estarão mais otimizados.
Essa notação de “menos de 2 segundos” tende a ser frequente em respostas relacionadas ao Google. Embora seja um mistério se isso é de fato um critério prático ou recomendação, otimizar seu site ao máximo não trará malefícios.
Motivo 3: Melhor experiência de usuário
As pessoas não gostam de esperar. Logo, serão perdidas várias visitas consistentes se as suas páginas se mostrarem lentas para carregar.
Para fins práticos, uma pesquisa foi realizada no Reino Unido, nela, 67% dos consumidores afirmam que o tempo de carregamento é o principal fator para abandonarem uma compra on-line.
Todos esses motivos são mais do que suficientes para acelerar o carregamento do site através do arquivo .htaccess.
O que é o arquivo .htaccess?
O .htaccess é um arquivo de configuração essencial para a criação e alteração de rotas e links do seu site. De forma geral, os recursos como a estrutura de permalinks (ou links permanentes, como também são conhecidos), redirecionamentos, bloqueios de IPs, dentre outros recursos, utilizam o .htaccess para isso.
Como será visto no post atual, há diversas formas de utilizar o .htacess para otimizar seu site. No entanto, não basta "abrir o arquivo e sair alterando". Existem práticas recomendadas antes de alterá-lo.
Algumas recomendações antes de mexer no arquivo .htaccess
1. Faça um backup antes
Como o .htaccess é fundamental para atividades internas do servidor, qualquer erro nele deixará seu site fora do ar. Logo, o mais recomendado é manter um backup dele. Felizmente, o arquivo tem poucas linhas de código e a cópia de segurança pode ser feita até mesmo no bloco de notas.
Caso esteja usando o WordPress, o .htaccess padrão pode ser visto no codex WordPress. É uma boa alternativa, caso tenha esquecido de realizar o backup (mas, por favor, não esqueça).
2. Se utilizar plugins de cache, algumas das alterações já terão sido realizadas por ele
Ao utilizar plugins de cache, eles mexem na estrutura comum do .htaccess, de forma a realizar essas otimizações. Portanto, se tiver instalado e ativado um plugin dessa categoria, verifique se a otimização já não está presente no arquivo. Se estiver, parte para próxima, se não estiver, implemente.
3. Em WordPress multisites, o .htaccess tende a ser diferente
O próprio codex WordPress mostra diferentes tipos de arquivos .htaccess dependendo se for utilizado multisites ou não. Nossa sugestão é que aplique as otimizações apenas se não utilizar o WordPress multisites. Se o utilizar, busque o uso de plugins para alcançar a otimização necessária.
Como localizar o arquivo .htaccess
Para usuários do WordPress, ele fica na pasta raiz da instalação. Ou seja, na pasta principal. Porém, dependendo da configuração do seu gerenciador de arquivos, pode ser que ele esteja oculto.
Para mostrá-lo, dentro do gerenciador de arquivos, no canto direito superior, clique em configurações, o item de menu com ícone de engrenagem.
Depois, nas preferências, clique na opção “Mostrar arquivos ocultos (dotfiles)”, como mostra a imagem abaixo.
Os arquivos dotfiles (em inglês dot = ponto e files = arquivos), são arquivos de configuração que iniciam com um ponto, justamente como o .htaccess.
As 5 maneiras de acelerar o carregamento do site através do .htaccess
Veja as principais dicas para acelerar o seu site usando apenas o arquivo .htaccess.
1. Ative a cache manualmente
Plugins de cache sempre existiram no WordPress e garantem uma velocidade de carregamento muito superior que a convencional. No entanto, embora eles possam ser úteis e agrupar diversas configurações diferentes que até geram mais velocidade, é possível ativar a cache manualmente no seu site através do .htaccess.
Para isso, será necessário digitar o seguinte código abaixo:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresByType application/javascript “access plus 1 month”
ExpiresDefault “access plus 2 days”
</IfModule>
Cada linha dessas define o tempo máximo que os arquivos ficarão na cache do navegador do visitante. Esse tempo pode ser alterado, se houver a necessidade.
2. Arquivos Gzip
O Gzip é uma configuração que permite compactar arquivos para que, dessa forma, o site carregue de forma muito mais veloz. O código abaixo ativa o Gzip para HTML, textos, CSS, JS e PHP.
<ifModule mod_gzip.c> mod_gzip_on Sim mod_gzip_dechunk Sim arquivo mod_gzip_item_include \.(html?|txt|css|js|php)$ manipulador mod_gzip_item_include ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript. * mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
Caso queira entender melhor como funciona o Gzip, já escrevemos o conteúdo O que é Gzip e porque ele acelera (muito) o seu site.
3. Ative Gzip e Caching ao mesmo tempo
Os dois códigos acima são interessantes para aumentar a performance das suas páginas. Mas é possível uní-los de forma otimizada através do código abaixo:
# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch "\.(css|js|x?html?|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# BEGIN Turn ETags Off
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off
# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header
Importante: não é recomendável, de forma alguma, que esse terceiro código esteja em conjunto com os dois primeiros, uma vez que ele é uma espécie de junção deles.
4. Desabilite os hotlinks
Ao postar uma imagem no WordPress, é possível que outras pessoas apenas copiem a URL da imagem e a utilizem no site delas, atitude chamada de “hotlinking”. Mesmo essa prática parecendo inofensiva, ela consome a banda do seu servidor. Portanto, se feita em excesso, atrapalha o desempenho do seu site.
Para evitar que isso aconteça, é possível desabilitar os hotlinks através do .htaccess. Para isso, utilize o código abaixo.
#disable hotlinking of images with forbidden or custom image option RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?seudominio.com.br/.*$ [NC] #RewriteRule \.(gif|jpg)$ - [F] RewriteRule \.(gif|jpg)$ http://www.seudominio.com.br/stealingisbad.gif [R,L]
Lembre de alterar o “seudominio.com.br” pelo domínio do seu site. E de alterar o " http://www.seudominio.com.br/stealingisbad.gif" para a imagem que deseja mostrar a que tentar utilizar suas imagens.
5. Acabe com o SPAM nos comentários
Assim como o hotlinking, que se trata do uso das suas imagens, todas as vezes que um SPAM é gerado nos seus comentários, recursos dos seus servidores são utilizados. Logo, para impedir que isso atrapalhe o desempenho do seu conteúdo.
Para isso, existe o código abaixo, que verifica a origem de quem está comentando e a impede, se for considerada que veio “de nenhum lugar”, como normalmente acontece com os bots que geram spam nos comentários.
RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post\.php* RewriteCond %{HTTP_REFERER} !.*seudominio.com.* [OR] RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
Lembre de trocar o “seudominio.com” pelo domínio do seu site.
Fica a nossa recomendação de, assim que instalar esse código, testar a inserção de comentários por outros dispositivos e navegadores, usando também a aba anônima. Para ter a certeza de que o código está impedindo apenas os robôs que geram SPAM mesmo.
É possível substituir todas essas alterações por plugins?
É sim. O problema de utilizar plugins é o fato deles serem compostos de códigos longos e muitos arquivos, de forma a prejudicar a performance do seu site. Entretanto, em situações que não se sinta confortável a modificar arquivos avançados, como o .htaccess, é possível utilizá-los sem nenhum problema.
Para recursos de cache
W3 Total Cache
Vantagens:
- Aumento nos resultados das buscas, uma vez que velocidade de carregamento é fator primordial para SEO.
- Melhor a performance do servidor, fazendo com que ele sustente tráfegos elevador por mais tempo.
- Salva cerca de 80% da banda de tráfego, compactando arquivos HTML, CSS e JS.
WP Super Cache
Vantagens:
- Gera arquivos HTML estáticos, fazendo com que a carga de tráfego necessária para mostrar a página seja reduzida consideravelmente.
- Possui método avançado, que usa o Apache mod_rewrite para servir arquivos em cache (o mesmo que os códigos demonstrados nesse artigo fazem).
- Coleta de lixo de cache, fazendo com que a cache não acumule espaço desnecessário no servidor.
WP Fastest Cache
Vantagens:
- Exclusão automática de cache quando um post ou página é publicado.
- Pré-carga de cache: criando a cache de todo o site de forma automática.
- Plugin com utilização extremamente simplificada, ideal para iniciantes que nunca utilizaram cache.
Para hotlinks
Hotlink File Prevention
Cria configurações específicas na biblioteca de mídia para prevenir os arquivos de hotlink e protegê-los. Plugin simples e fácil de ser utilizado.
Para impedir spam nos comentários
A recomendação é utilizar apenas um dos plugins sugeridos abaixo. Eles conferem um lista de filtros e práticas diferentes para impedir que robôs venham deixar comentários automáticos nos seus posts.
Proteção contra spam, AntiSpam, FireWall by CleanTalk
Akismet Spam Protection
AntiSpam Bee
Conclusão: acelerar o carregamento do site
No conteúdo de hoje, mostramos como acelerar o carregamento do site através de 5 códigos úteis no .htaccess. Claro, pode ser que alterar esse arquivo não seja confortável para todos os usuário e, por isso, também recomendamos plugins com os mesmos objetivos.
Embora os plugins sejam maiores e te façam perder pontos mínimos de otimização (nada realmente muito significativo), utilizá-los pode ser uma boa opção.
Esperamos que todo esse material tenha te ajudado a acelerar o carregamento do site. Caso tenha alguma dúvida, a seção de comentários abaixo está aberta e pronta para receber seus questionamentos. Os responderemos assim que possível.
Um forte abraço! Até o próximo conteúdo.