Ativar a compactação – PageSpeed Insights

Quando e por que você deve ativar a compactação do seu Website.

O que fazer quando a análise do PageSpeed sugere que você ative a compactação do seu site, veja os passos necessários para  ativar este recurso no WordPress ou Magento.

Exemplo de mensagem no PageSpeed

A compactação de recursos com gzip ou deflate pode reduzir o número de bytes enviados pela rede.
Ative a compactação para os seguintes recursos a fim de diminuir o tamanho de transferência em 328,4 KiB (73% de redução).

Quem deve fazer isso?

Você deverá ativar a compactação quando o PageSpeed ​​Insights detecta que os recursos passiveis de compressão não foram comprimidos.

Todos os navegadores modernos suportam automaticamente a compressão gzip para todos os pedidos HTTP.

A ativação da compressão gzip pode reduzir o tamanho da resposta em até 90%, o que pode reduzir significativamente a quantidade de tempo para baixar o recurso, reduzir o uso de dados para o cliente e melhorar o tempo de renderização das suas páginas.

Recomendações para ativar a compactação

Ative e teste o suporte de compressão gzip no seu servidor web.

O projeto HTML5 Boilerplate contém arquivos de configuração de exemplo para todos os servidores mais populares com comentários detalhados para cada sinalizador de configuração e configuração: encontre seu servidor favorito na lista, procure a seção gzip e confirme que seu servidor está configurado com as configurações recomendadas.

Consulte a documentação do seu servidor web sobre como habilitar a compactação.

Apache

Normalmente sites/lojas virtuais como o Magento, WordPress, plataformas em PHP estão rodando em um servidor apache.

Habilitando a Compressão Gzip via .htaccess

Configurar a compressão diretamente no servidor tem vários benefícios.

Por um lado, os plugins vêm com uma grande quantidade de dados indiretos, o que aumenta o risco de conflitos com outros plugins e erros.

Além disso, se a compressão é tudo o que você procura, a instalação de um grande plugin com dezenas de outras funções não faz sentido.

Como mencionado anteriormente, o arquivo do servidor responsável por habilitar esses recursos é chamado .htaccess (sim, incluindo o ponto).

É usado para implementar instruções especiais para o servidor.

Por exemplo, quando você configura bastante permalinks no WordPress, o CMS adiciona regras de reescrita para .htaccess para que isso aconteça.

Outras coisas que este arquivo pode fazer são redirecionamentos, protegendo arquivos e pastas do acesso e muito mais, incluindo a compressão Gzip.

Veja como fazer o último.

Encontre e edite .Htaccess

Para fazer alterações no arquivo Htaccess, primeiro precisamos encontrá-lo. Isso nem sempre é fácil, porque está escondido por padrão.

A maneira mais fácil de acessar .htacces é via FTP, mas você também pode usar o cPanel ou qualquer outra interface de administração.

No nosso caso, vamos começar abrindo nosso cliente de FTP e conectando-o ao servidor.

.htaccess geralmente é encontrado no diretório raiz do seu site. No entanto, como mencionei, é muitas vezes invisível.

No FileZilla, você pode alterar isso em Servidor > Forçar mostrando arquivos ocultos.

No entanto, seu modo de acesso pode ter a opção em outro lugar.

Depois disso, você pode editar o arquivo como qualquer outro. Em Filezilla isso significa clique com o botão direito do mouse e depois Visualizar / Editar.

Adicionar o código necessário

Adicione o código a seguir no final do arquivo .htaccess e salve em seu servidor.

<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>

Agora você já pode verificar se a compressão Gzip está funcionando em seu site.

Execute o teste do PageSpeed novamente e certifique-se que a nota do seu website melhorou.

Referências

http://httpd.apache.org/docs/current/mod/mod_deflate.html