Otimizando seu site com o módulo dinâmico Google PageSpeed para NGINX Plus

Liam CrillyDiretor Sênior de Gestão de Produtos

À medida que o tamanho médio das páginas da web continua aumentando, torna-se cada vez mais importante otimizar todos os aspectos do design, do desenvolvimento e da disponibilização do seu site para garantir uma boa experiência aos usuários, independentemente do dispositivo que estejam usando. Está bem documentado que o tempo de carregamento da página afeta a experiência do usuário e a receita.

Google PageSpeed é um conjunto de ferramentas para medir e otimizar o desempenho do seu site e está disponível há vários anos como um módulo de terceiros que você pode compilar no NGINX Open Source. Com a introdução dos módulos dinâmicos no NGINX Plus R11, os usuários do NGINX Plus agora também podem aproveitar o PageSpeed.

Quando você carrega o PageSpeed como um módulo dinâmico no NGINX Plus, ele reescreve e otimiza automaticamente os recursos do seu site. Nesta publicação do blog, explicamos como compilar e configurar o módulo dinâmico. (Lembre-se de que, por ser um módulo de terceiros, o PageSpeed não está coberto pelo seu contrato de suporte do NGINX Plus.)

Como compilar e carregar o PageSpeed como um módulo dinâmico para o NGINX Plus

As instruções a seguir são baseadas nas instruções de instalação manual do Google e foram adaptadas para garantir a compatibilidade binária com o NGINX Plus. (Você pode usar as instruções do Google sem alterações para criar um módulo dinâmico que funcione com o NGINX Open Source.)

Etapa 0: Preparação do ambiente de compilação

Recomendamos enfaticamente que você compile os módulos dinâmicos em um sistema separado, que chamamos aqui de “ambiente de compilação”. Isso minimiza o risco e a complexidade do sistema no qual você pretende executar o NGINX Plus com o módulo PageSpeed (chamamos esse sistema de “ambiente de produção”). O ambiente de compilação deve ter o mesmo sistema operacional e a mesma versão que o ambiente de produção; além disso, os seguintes componentes devem estar instalados:

• Utilitário UnZip
• Compilador e utilitário make
• Biblioteca de expressões regulares compatíveis com Perl (arquivos de desenvolvimento)
• Bibliotecas de compactação Zlib (arquivos de desenvolvimento)

Para garantir que esses pré-requisitos estejam instalados no seu ambiente de compilação, execute o comando a seguir.

• Para Ubuntu/Debian:

$ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev

• Para CentOS/RHEL/Oracle Linux:

$ sudo yum install unzip gcc make pcre-devel zlib-devel

Etapa 1: Obtendo o NGINX Open Source

1. No ambiente de produção, execute o comando a seguir para identificar a versão do NGINX Open Source correspondente à versão do NGINX Plus em execução. Ela está destacada em laranja nesta saída: NGINX 1.11.5, que corresponde ao NGINX Plus R11.

$ nginx -vnginx version: nginx/1.11.5 (nginx-plus-r11)

1. No ambiente de compilação, baixe o código-fonte da versão apropriada do NGINX Open Source.

$ wget -qO - http://nginx.org/download/nginx-1.11.5.tar.gz | tar zxfv -

Etapa 2: Baixando e preparando o código-fonte do PageSpeed

Execute estas etapas no ambiente de compilação.

1. Consulte o número da versão mais recente do módulo PageSpeed nas notas de versão, ou execute este comando.

$ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"

1. O número da versão do PageSpeed é usado várias vezes nos comandos de compilação, portanto, defina-o como uma variável de ambiente, NPS_VERSION. Inclua apenas a parte numérica da string da versão, sem o sufixo ‑stable ou ‑beta.

$ NPS_VERSION=numeric-part-of-version-string

1. Baixe e extraia os arquivos-fonte conforme indicado a seguir. Observe que esses comandos devem ser executados sequencialmente, como em um script.

wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip unzip v${NPS_VERSION}-beta.zip cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/

Etapa 3: Compilando o módulo dinâmico do PageSpeed

1. No ambiente de compilação, compile o módulo dinâmico PageSpeed executando primeiro o script configure do NGINX com o argumento --with-compat para tornar o módulo dinâmico compatível em nível binário com o NGINX Plus. Em seguida, execute make modules para compilar apenas o módulo.

$ cd ../nginx-1.11.5$ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat
$ make modules

1. O processo de compilação gera o módulo dinâmico como objs/ngx_pagespeed.so. Copie o arquivo .so do ambiente de compilação para o diretório de módulos, /etc/nginx/modules, no ambiente de produção. Recomendamos (e a etapa a seguir pressupõe) que, ao copiar o arquivo, você o renomeie para incluir o número da versão do NGINX Open Source, por exemplo, ngx_pagespeed_1.11.5.so.
2. No ambiente de produção, crie um link simbólico entre o nome de arquivo que contém o número da versão e o nome de arquivo genérico (original).

$ cd /etc/nginx/modules$ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so
$ ls -gG
-rw-r--r-- 1 11924784 Feb  6 11:52 ngx_pagespeed_1.11.5.so
lrwxrwxrwx 1       23 Feb  6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

Etapa 4: Carregando o módulo dinâmico PageSpeed

Execute estas etapas no ambiente de produção.

1. Inclua a diretiva load_module para carregar o PageSpeed como um módulo dinâmico. A diretiva deve aparecer no contexto de nível superior (“main”) do arquivo de configuração nginx.conf (ou seja, não nos contextos http ou stream).

load_module modules/ngx_pagespeed.so;

1. O próprio PageSpeed é configurado no contexto http, portanto, coloque essas diretivas em um novo arquivo de configuração chamado pagespeed.conf no diretório /etc/nginx/conf.d. O PageSpeed é ativado para o site especificado na diretiva proxy_pass, neste caso, http://www.example.com.

pagespeed MessageBufferSize 10240;
pagespeed FileCachePath /var/ngx_pagespeed_cache;

server {
    listen 80;
    location / {
        proxy_pass http://www.example.com; 
    }
    pagespeed on;
}

1. Recarregue o NGINX Plus para carregar o módulo PageSpeed na instância em execução.

$ sudo nginx -s reload

Testando o módulo PageSpeed do NGINX Plus com o PageSpeed Insights

PageSpeed Insights é uma ferramenta independente fornecida pelo Google para medir o nível de otimização aplicado a uma página da Web em dispositivos móveis e computadores. Ela atribui uma pontuação para ambos os tipos de dispositivo e oferece sugestões para acelerar o carregamento da página. É uma ferramenta útil para avaliar seu site e demonstrar a eficácia do módulo PageSpeed.

Você pode usar o PageSpeed Insights para comparar a pontuação do seu site e as sugestões de otimização com e sem o PageSpeed ativado. Alterne entre as diretivas pagespeed on; e pagespeed off; para avaliar a eficácia do módulo PageSpeed no seu site.

O PageSpeed aplica suas otimizações sem exigir configurações ou ajustes adicionais. No entanto, se quiser ter mais controle sobre quais otimizações são realizadas no seu site, consulte a documentação do PageSpeed.

Experimente o PageSpeed com o NGINX Plus – comece hoje mesmo sua avaliação gratuita de 30 dias ou entre em contato conosco para conversar sobre seus casos de uso.

Sobre o autor

Liam CrillyDiretor Sênior de Gestão de Produtos

Mais publicações de Liam Crilly