BLOG | NGINX

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

NGINX-Parte-de-F5-horiz-preto-tipo-RGB
Miniatura de Liam Crilly
Liam Crilly
Publicado em 03 de março de 2017

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

O 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 de 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 postagem do blog, explicamos como construir e configurar o módulo dinâmico. (Lembre-se de que, como um módulo de terceiros, o PageSpeed não é coberto pelo seu contrato de suporte do NGINX Plus.)

Construindo e carregando o PageSpeed como um módulo dinâmico para NGINX Plus

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

Passo 0: Preparando o ambiente de construção

Recomendamos fortemente que você compile módulos dinâmicos em um sistema separado, ao qual nos referimos aqui como “ambiente de construção”. Isso minimiza o risco e a complexidade do sistema onde você planeja executar o NGINX Plus com o módulo PageSpeed (chamamos isso de “ambiente de produção”). O ambiente de construção deve ter o mesmo sistema operacional e versão do ambiente de produção ; além disso, os seguintes componentes devem ser instalados:

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

Para garantir que seu ambiente de compilação tenha esses pré-requisitos instalados, execute o seguinte comando.

  • Para Ubuntu/Debian:

    $ sudo apt-get install descompactar gcc fazer libpcre3-dev zlib1g-dev
  • Para CentOS/RHEL/Oracle Linux:

    $ sudo yum install descompactar gcc fazer pcre-devel zlib-devel

Passo 1: Obtendo NGINX Open Source

  1. Trabalhando no ambiente de produção, execute o seguinte comando para identificar a versão do NGINX Open Source que corresponde à versão do NGINX Plus em execução. Está destacado em laranja nesta saída: NGINX 1.11.5, que corresponde ao NGINX Plus R11.

    $ nginx -v versão nginx: nginx/1.11.5 (nginx-plus-r11)
  2. Trabalhando no ambiente de compilação, baixe as fontes para a versão apropriada do NGINX Open Source.

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

Passo 2: Baixando e preparando as fontes do PageSpeed

Execute estas etapas no ambiente de compilação.

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

    $ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"
  2. O número da versão do PageSpeed é usado várias vezes nos comandos de compilação, então defina-o como uma variável de ambiente, NPS_VERSION . Inclua apenas a parte numérica da sequência de versão, não o sufixo ‑stable ou ‑beta .

    $ NPS_VERSION= parte-numérica-da-string-da-versão
  3. Baixe e extraia as fontes da seguinte forma. Observe que esses comandos devem ser executados sequencialmente, como um script.

    wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
    descompacte 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}) # extrai para psol/

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

  1. Trabalhando no ambiente de construção, compile o módulo dinâmico PageSpeed executando primeiro o script de configuração do NGINX com o argumento --with-compat para tornar o módulo dinâmico compatível com o binário do 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 módulos
  2. O processo de construção produz 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 .

  3. Trabalhando no ambiente de produção, crie um link simbólico entre o nome do arquivo numerado da versão e o nome do 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 6 de fev 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 6 de fev 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

Passo 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 (“principal”) do arquivo de configuração nginx.conf (ou seja, não nos contextos http ou stream ).

    load_module módulos/ngx_pagespeed.so;
  2. O próprio PageSpeed é configurado no contexto http , então 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 , aqui http://www.example.com .

    pagespeed MessageBufferSize 10240;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    
    servidor {
    ouvir 80;
    localização / {
    proxy_pass http://www.example.com; 
    }
    pagespeed ativado;
    }
  3. Recarregue o NGINX Plus para carregar o módulo PageSpeed na instância em execução.

    $ sudo nginx -s recarregar

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

O PageSpeed Insights é uma ferramenta separada fornecida pelo Google para medir o nível de otimização aplicado a uma página da web para dispositivos móveis e desktops. Ele fornece uma pontuação para ambos os dispositivos com sugestões de como fazer a página carregar mais rápido. É uma ferramenta útil para medir seu site e demonstrar a eficácia do módulo PageSpeed.

A ferramenta PageSpeed Insights avalia o desempenho de carregamento de páginas de um site e sugere maneiras de otimizá-lo. Quando instalamos o módulo dinâmico do PageSpeed, o NGINX obtém uma pontuação alta, 96.

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

O PageSpeed aplica suas otimizações sem nenhuma configuração ou ajuste adicional. No entanto, se você quiser ter mais controle sobre quais otimizações são executadas no seu site, consulte a documentação do PageSpeed .

Experimente o PageSpeed com NGINX Plus você mesmo – comece seu teste gratuito de 30 dias hoje mesmo ou entre em contato conosco para discutir seus casos de uso .


"Esta postagem do blog pode fazer referência a produtos que não estão mais disponíveis e/ou não têm mais suporte. Para obter as informações mais atualizadas sobre os produtos e soluções F5 NGINX disponíveis, explore nossa família de produtos NGINX . O NGINX agora faz parte do F5. Todos os links anteriores do NGINX.com redirecionarão para conteúdo semelhante do NGINX no F5.com."