Aprenda como acelerar sites usando o módulo Nginx e Gzip

Mesmo numa época em que velocidades significativas da Internet estão disponíveis em todo o mundo, todos os esforços para otimizar o tempo de carregamento do site são bem-vindos de braços abertos.

Neste artigo discutiremos um método para aumentar a velocidade de transferência, reduzindo o tamanho dos arquivos por meio da compactação. Essa abordagem traz um benefício extra, pois também reduz a quantidade de largura de banda usada no processo e torna-o mais barato para o proprietário do site que paga por ele.

Para atingir o objetivo declarado no parágrafo acima, usaremos Nginx e seu módulo gzip integrado neste artigo. Como afirma a documentação oficial, este módulo é um filtro que compacta respostas usando o conhecido método de compactação gzip. Isso garante que o tamanho dos dados transmitidos será compactado pela metade ou até mais.

Leitura sugerida: O guia definitivo para proteger, fortalecer e aumentar o desempenho de sites Nginx

Quando chegar ao final desta postagem, você terá mais um motivo para considerar o uso do Nginx para servir seus sites e aplicativos.

Instalando o servidor Web Nginx

Nginx está disponível para todas as principais distribuições modernas. Embora usaremos uma máquina virtual CentOS 7 (IP 192.168.0.29) para este artigo.

As instruções fornecidas abaixo funcionarão com pequenas (se houver) modificações em outras distribuições também. Presume-se que sua VM seja uma instalação nova; caso contrário, você terá que se certificar de que não há outros servidores web (como o Apache) em execução na sua máquina.

Para instalar o Nginx junto com suas dependências necessárias, use o seguinte comando:


----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

Para verificar se a instalação foi concluída com sucesso e se o Nginx pode servir arquivos, inicie o servidor web:


systemctl start nginx
systemctl enable nginx

e então abra um navegador da web e vá para http://192.168.0.29 (não se esqueça de substituir 192.168.0.29 pelo endereço IP ou nome do host do seu servidor) . Você deverá ver a página de boas-vindas:

Devemos ter em mente que alguns tipos de arquivos podem ser compactados melhor que outros. Arquivos de texto simples (como arquivos HTML, CSS e JavaScript) são compactados muito bem, enquanto outros (.iso arquivos, tarballs e imagens, para citar alguns) não, pois já são compactados por natureza.

Assim, é de esperar que a combinação de Nginx e gzip nos permita aumentar as velocidades de transferência do primeiro, enquanto o último poderá apresentar pouca ou nenhuma melhoria a nível todos.

Também é importante ter em mente que quando o módulo gzip está ativado, os arquivos HTML são SEMPRE compactados, mas outros tipos de arquivos comumente encontrados em sites e aplicativos (ou seja, CSS e JavaScript) não são.

Testando velocidades de sites Nginx SEM o módulo gzip

Para começar, vamos baixar um modelo Bootstrap completo, uma ótima combinação de arquivos HTML, CSS e JavaScript.

Depois de baixar o arquivo compactado, iremos descompactá-lo no diretório raiz do nosso bloco de servidor (lembre-se que este é o equivalente Nginx da diretiva DocumentRoot em uma declaração de host virtual Apache ):


cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

Você deve ter a seguinte estrutura de diretórios dentro de /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Agora vá para http://192.168.0.29/tecmint e certifique-se de que a página carregue corretamente. A maioria dos navegadores modernos inclui um conjunto de ferramentas de desenvolvedor. No Firefox, você pode abri-lo através do menu Ferramentas → Desenvolvedor Web.

Estamos particularmente interessados no submenu Rede, que nos permitirá monitorar todas as solicitações de rede que ocorrem entre o nosso computador e a rede local e a Internet.

Leitura sugerida: Instale Mod_Pagespeed para acelerar o desempenho do Nginx em até 10x

Um atalho para abrir o menu Rede nas ferramentas do desenvolvedor é Ctrl + Shift + Q. Pressione essa combinação de teclas ou use a barra de menu para abri-la.

Como estamos interessados em examinar a transferência de arquivos HTML, CSS e JavaScript, clique nos botões na parte inferior e atualize a página. Na tela principal você verá o detalhe da transferência de todos os arquivos HTML, CSS e JavaScript:

À direita da coluna Tamanho (que mostra os tamanhos individuais dos arquivos), você verá os tempos de transferência individuais. Você também pode clicar duas vezes em qualquer arquivo para ver mais detalhes na guia Tempos.

Certifique-se de anotar os tempos mostrados na imagem acima para poder compará-los com a mesma transferência depois de ativarmos o módulo gzip.

Habilitando e configurando o módulo gzip no Nginx

Para ativar e configurar o módulo gzip, abra /etc/nginx/nginx.conf, localize o bloco do servidor principal conforme mostrado na imagem abaixo e adicione ou modifique o seguinte linhas (não esqueça o ponto e vírgula no final ou o Nginx retornará uma mensagem de erro ao reiniciar mais tarde!)


root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

A diretiva gzip liga ou desliga o módulo gzip, enquanto gzip_types é usada para listar todos os tipos MIME que o módulo deve manipular.

Para saber mais sobre os tipos MIME e visualizar os tipos disponíveis, acesse Basics_of_HTTP_MIME_types.

Testando velocidades de sites Nginx com módulo de compactação Gzip

Depois de concluir as etapas acima, vamos reiniciar o Nginx e recarregar a página pressionando Ctrl + F5 (novamente, isso funciona no Firefox, então se você estiver usando um navegador diferente consulte primeiro a documentação correspondente) para substituir o cache e observemos os tempos de transferência:


systemctl restart nginx

A guia de solicitações de rede mostra algumas melhorias significativas. Compare os tempos para ver por si mesmo, tendo em mente que são as transferências entre nosso computador e 192.168.0.29 (as transferências entre servidores do Google e CDNs estão além do nosso alcance):

Por exemplo, vamos considerar os seguintes exemplos de transferência de arquivos antes/depois de ativar o gzip. Os tempos são dados em milissegundos:

index.html (representado por /tecmint/ no topo da lista): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Isso não faz você amar ainda mais o Nginx? No que me diz respeito, é verdade!

Leitura sugerida: 5 dicas para aumentar o desempenho do seu servidor Web Apache

Resumo

Neste artigo demonstramos que você pode usar o módulo gzip Nginx para acelerar transferências de arquivos. A documentação oficial do módulo gzip lista outras diretivas de configuração que você pode querer dar uma olhada.

Além disso, o site da Mozilla Developer Network possui uma entrada sobre o Network Monitor que explica como usar essa ferramenta para entender o que está acontecendo nos bastidores de uma solicitação de rede.

Como sempre, sinta-se à vontade para usar o formulário de comentários abaixo se tiver alguma dúvida sobre este artigo. Estamos sempre ansiosos para ouvir de você!