Módulo PageSpeed: Muitas vezes a gente ouve falar sobre isso ou aquilo quando se trata de velocidade de sites, mas nem sempre temos um dado mais exato ou real do que realmente funciona, não é mesmo?
Em nossos servidores de hospedagem de sites, nós instalamos o módulo do Google chamado PageSpeed (Mod_pagespeed), instalamos esse módulo do Apache e fizemos alguns testes sobre os ganhos do módulo PageSpeed nos sites dos nossos clientes.
Vou compartilhar com você alguns dados importantes para você estudar o uso desse módulo em seu servidor, ok?
Vamos lá?
Por que melhorar o tempo de carregamento do meu site?
Você já deve ter lido sobre como é importante que o seu site carregue o mais rápido possível, não é mesmo?
Se você ainda não leu nada sobre o assunto, veja alguns motivos para melhorar o tempo de carregamento do seu site ainda hoje:
- 79% dos clientes insatisfeito com o tempo de carregamento de uma página tem menos probabilidade de comprar novamente no mesmo site
- 64% dos usuários de smartphones esperam que a página seja carregada em menos de 4 segundos
- 47% dos clientes esperam que uma página seja carregada em até 2 segundos
- Se o seu site fatura R$ 100.000,00 por dia, a melhoria de 1 segundo na velocidade da página gera R$ 7.000,00 por dia
- Um atraso de 1 segundo no tempo de carregamento da página significa 11% de perda de visualizações de página
- 1 segundo de atraso significa uma redução de 7% nas conversões
O que é o Módulo PageSpeed?
O Módulo PageSpeed do Google é um plugin de código aberto para servidores com Apache ou Nginx. O módulo aplica automaticamente otimizações ao HTML para acelerar o carregamento das páginas no navegador do usuário.
O Módulo PageSpeed é amplamente aplicável a qualquer tipo de site.
Aplica otimizações que reduzem o número de solicitações, o tamanho dessas solicitações e o tamanho e a complexidade dos arquivos necessários para carregar a página.
Isso é feito combinando, minimizando, descrevendo, incorporando e movendo CSS, JavaScript, imagens e HTML, entre outras otimizações.
Benefícios do Módulo PageSpeed
Se você ainda não adivinhou, este módulo complementa diretamente o PageSpeed Insights do Google.
É uma ótima ferramenta para medir a performance do seu site e o que pode ser feito para otimizá-lo.
O que eu descobri é que muitos dos problemas que o PageSpeed Insights relata para você, podem ser resolvidos automaticamente pelo módulo PageSpeed, basta instalá-lo.
O Google pode dizer o que precisa ser otimizado e como otimizá-lo.
Então, vamos deixá-lo fazer isso por nós, não?
Combinar/reduzir CSS e JavaScript
Ao combinar todo o seu JavaScript e/ou CSS em um número menor de arquivos, reduz o número de solicitações que seu navegador precisa enviar ao servidor.
Sem entrar em latência, bloqueio, etc…
Vamos pensar assim:
Se você pedir a um colega de trabalho para lhe fornecer uma atualização de status em um projeto, você prefere revisar um relatório de uma página em vez de 17 notas diferentes do Post-it®, direito?
Esse certamente é o caso se eles estiverem trazendo um post-it de cada vez.
Embora os desenvolvedores com consciência de velocidade tentem fazer esse trabalho antes de migrar o código para a produção, o módulo PageSpeed pode lidar com isso para você.
A redução do CSS/JavaScript pode ser mostrada simplesmente por uma demonstração. Veja este pequeno exemplo de trecho de JavaScript:
jQuery(function(){
var productSlider = jQuery('#slider');
if (productSlider) {
productSlider.carousel();
}
});
Esse código pode ser usado para executar um carrossel em uma página, por exemplo. Se eu pudesse reduzir, ficaria assim:
jQuery(function(){var e=jQuery("#slider");if(e){e.carousel()}})
Essa compressão reduz o tamanho do arquivo o máximo possível, deixando-o executável pelo navegador.
Obviamente, você terá muitos arquivos e linhas de JavaScript em seu site que precisam ser executados, mas os benefícios da compressão são reais.
Isso resultará em tempos mais rápido no carregamento da sua página e reduzirá o consumo de largura de banda do seu site.
Combinar arquivos JavaScript com a compressão não apenas carregará o seu site mais rápido, como também, solicitará menos requisições no servidor.
Defer JavaScript
Adiar o carregamento de JavaScript é outra vantagem do módulo pagespeed.
Basicamente, é uma técnica para atrasar a execução de scripts até que a página seja carregada, com isso a renderização do seu site, será mais rápida.
Esse filtro do módulo vem com algumas limitações (veja aqui). Sempre teste o seu site a cada novo filtro ativado e certifique-se que não houve quebras de layout, ok?
Mais benefícios do Módulo PageSpeed
Eu quis mostrar algumas possibilidades de utilizar os filtros do módulo PageSpeed.
Você pode separar algum tempo e estudar com calma todas os recursos da ferramenta através do site oficial neste link.
Você pode combinar arquivos CSS, JavaScript, aumentar o tempo de cache, e uma infinidade de outros recursos, visite o site e confira.
Instalando o Módulo PageSpeed
Como o foco desse artigo não é como instalar o Módulo PageSpeed e sim, como esse módulo pode aumentar drasticamente a performance do seu site, não vou focar na instalação, tudo bem?
Você pode tentar instalar por conta própria no seu servidor, ou solicitar a instalação para o administrador do seu servidor.
Neste tutorial, explicarei como instalar e configurar o módulo Mod_pagespeed com o Apache no Ubuntu e Centos7, ok?
Instalando o Mod_PageSpeed no Ubuntu
Passo 1: Atualizar o sistema
sudo apt-get update -y sudo apt-get upgrade -y sudo reboot
Passo 2: Baixando e instalando o Módulo PageSpeed
Você pode baixar a versão estável mais recente do módulo Mod_pagespeed para Apache no site oficial.
Caso contrário, você pode baixá-lo com o seguinte comando:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
Após o download concluído, execute o comandos abaixo:
sudo dpkg -i mod-pagespeed-stable_current_amd64.deb sudo apt-get install -f
Após a concluir a instalação, você precisará reiniciar o servidor Apache para carregar o módulo:
sudo systemctl restart apache2
Você pode verificar o módulo Mod_pagespeed executando o seguinte comando curl:
curl -D- localhost
Se tudo deu certo, você verá algo parecido com o código abaixo:
HTTP/1.1 200 OK Date: Mon, 28 Nov 2016 15:28:51 GMT Server: Apache/2.4.7 (Ubuntu) Accept-Ranges: bytes Vary: Accept-Encoding <strong>X-Mod-Pagespeed: 1.11.33.2-0</strong> Cache-Control: max-age=0, no-cache Content-Length: 10724 Content-Type: text/html; charset=UTF-8
Instalando o Mod_PageSpeed no Centos7
Passo 1: Atualizar o sistema
sudo yum update sudo yum upgrade
Passo 2: Baixando e instalando o Módulo PageSpeed
Faça o download através do seguinte comando:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm
Após o download concluído, execute o comandos abaixo:
yum install at rpm -U mod-pagespeed-*.rpm
Após a concluir a instalação, reinicie o Apache:
/etc/init.d/httpd restart
Você pode verificar o módulo Mod_pagespeed executando o seguinte comando curl:
curl -D- localhost | less
Se tudo deu certo, você verá algo parecido com o código abaixo:
Date: Fri, 03 Feb 2017 05:49:23 GMT Server: Apache/2.4.7 (Ubuntu) Accept-Ranges: bytes Vary: Accept-Encoding <strong>X-Mod-Pagespeed: 1.11.33.5-0</strong> Cache-Control: max-age=0, no-cache Content-Length: 10724
Configurando o Módulo PageSpeed
Ao finalizar a instalação do Módulo PageSpeed, por padrão ele já começará a otimizar os sites que estão no servidor.
Para adicionar filtros extras ou até mesmo removê-los, você pode utilizar o arquivo htaccess para configurações extras, veja:
Desativar o MóduloPageSpeed
Se for você um revendedor de hospedagem de sites, possui um servidor VPS ou dedicado, ao configurar o módulo PageSpeed no servidor automaticamente todos os sites começarão a receber as regras do módulo.
O que é bom por um lado, você não precisará inserir manualmente um a um.
Mas, pode acontecer de alguns sites ficarem com seus layouts quebrados por uma ou diversas regras do módulo.
Nesse caso, será interessante desativar as regras ou até mesmo, desativar o módulo nos sites prejudicados.
Você pode adicionar a linha abaixo no seu arquivo .htaccess:
<IfModule pagespeed_module> ModPagespeed on </IfModule>
Se você precisar adicionar filtros, basta adicionar por exemplo:
<IfModule pagespeed_module> ModPagespeedEnableFilters combine_css ModPagespeedEnableFilters combine_javascript ModPagespeedEnableFilters inline_css ModPagespeedEnableFilters lazyload_images </IfModule>
Conclusão
Aqui na Conectasul nós utilizávamos o módulo PageSpeed por um bom tempo. O que foi ótimo, nossos clientes tiveram excelentes ganhos em velocidade.
Mas, como estamos sempre buscando agregar valor aos nossos clientes, recentemente nós instalamos em nossos servidores o LiteSpeed Server.
Basicamente, ele substitui o Servidor Apache, onde oferece uma performance brutal comparado ao Apache.
Se a sua hospedagem de sites atual utilizar o Servidor Apache, vale muito a pena instalar o módulo PageSpeed e receber bons ganhos de velocidade imediamente.
Bom, se ficou alguma dúvida ou até mesmo quiser fazer um experimento com a nossa hospedagem e validar a performance do LiteSpeed Server, conta com a gente!
