Optimización de su sitio web con el módulo dinámico de Google PageSpeed para NGINX Plus

A medida que el tamaño promedio de las páginas web continúa creciendo, es cada vez más importante optimizar todos los aspectos del diseño, desarrollo y entrega de su sitio web para garantizar una buena experiencia para sus usuarios, independientemente del dispositivo que estén usando. Está bien documentado que el tiempo de carga de la página afecta la experiencia del usuario y los ingresos.

Google PageSpeed es un conjunto de herramientas para medir y optimizar el rendimiento de su sitio web, y ha estado disponible durante varios años como un módulo de terceros que puede compilarse en NGINX de código abierto. Con la introducción de módulos dinámicos en NGINX Plus R11, los usuarios de NGINX Plus ahora también pueden aprovechar PageSpeed.

Cuando carga PageSpeed como un módulo dinámico en NGINX Plus, automáticamente reescribe y optimiza los recursos de su sitio web. En esta entrada del blog explicamos cómo construir y configurar el módulo dinámico. (Ten en cuenta que, como módulo de terceros, PageSpeed no está cubierto por tu acuerdo de soporte de NGINX Plus).

Creación y carga de PageSpeed como módulo dinámico para NGINX Plus

Las siguientes instrucciones se basan en las instrucciones de instalación manual de Google y están adaptadas para la compatibilidad binaria con NGINX Plus. (Puede utilizar las instrucciones de Google sin cambios para crear un módulo dinámico que funcione con NGINX Open Source).

Paso 0: Preparación del entorno de construcción

Le recomendamos encarecidamente que compile módulos dinámicos en un sistema separado, al que aquí llamamos el “entorno de compilación”. Al hacerlo se minimiza el riesgo y la complejidad del sistema donde planea ejecutar NGINX Plus con el módulo PageSpeed (lo llamamos el “entorno de producción”). El entorno de compilación debe tener el mismo sistema operativo y versión que el entorno de producción ; además, deben estar instalados los siguientes componentes:

• Utilidad de descompresión
• Compilador y utilidad de creación
• Biblioteca de expresiones regulares compatible con Perl (archivos de desarrollo)
• Bibliotecas de compresión Zlib (archivos de desarrollo)

Para garantizar que su entorno de compilación tenga estos requisitos previos instalados, ejecute el siguiente comando.

• 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

Paso 1: Obtención de NGINX de código abierto

1. Trabajando en el entorno de producción, ejecute el siguiente comando para identificar la versión de código abierto de NGINX que corresponde a la versión de NGINX Plus en ejecución. Está resaltado en naranja en esta salida: NGINX 1.11.5, que corresponde a NGINX Plus R11.

   $ nginx -v versión de nginx: nginx/1.11.5 (nginx-plus-r11)

2. Mientras trabaja en el entorno de compilación, descargue las fuentes para la versión de código abierto NGINX adecuada.

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

Paso 2: Descarga y preparación de las fuentes de PageSpeed

Realice estos pasos en el entorno de compilación.

1. Busque el último número de versión del módulo PageSpeed en las notas de la versión o ejecutando este comando.

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

2. El número de versión de PageSpeed se utiliza varias veces en los comandos de compilación, así que configúrelo como una variable de entorno, NPS_VERSION . Incluya solo la parte numérica de la cadena de versión, no el sufijo -stable o -beta .

   $ NPS_VERSION= parte numérica de la cadena de versión

3. Descargue y extraiga las fuentes de la siguiente manera. Tenga en cuenta que se espera que estos comandos se ejecuten secuencialmente, como un script.

   wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
   descomprimir 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 $(nombre_base ${psol_url}) # extrae a psol/

Paso 3: Compilación del módulo dinámico de PageSpeed

1. Trabajando en el entorno de compilación, compile el módulo dinámico de PageSpeed ejecutando primero el script de configuración de NGINX con el argumento --with-compat para hacer que el módulo dinámico sea compatible binariamente con NGINX Plus. Luego, ejecute make modules para compilar solo el módulo.

   $ cd ../nginx-1.11.5 $ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat $ crear módulos

2. El proceso de compilación produce el módulo dinámico como objs/ngx_pagespeed.so . Copie el archivo .so del entorno de compilación al directorio de módulos, /etc/nginx/modules , en el entorno de producción. Recomendamos (y el siguiente paso lo supone) que al copiar el archivo, cambie el nombre para incluir el número de versión de código abierto de NGINX, por ejemplo, ngx_pagespeed_1.11.5.so .

3. Trabajando en el entorno de producción, cree un enlace simbólico entre el nombre de archivo numerado por la versión y el nombre de archivo 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 feb 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 6 feb 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

Paso 4: Cargando el módulo dinámico de PageSpeed

Realice estos pasos en el entorno de producción.

1. Incluya la directiva load_module para cargar PageSpeed como un módulo dinámico. La directiva debe aparecer en el contexto de nivel superior (“principal”) del archivo de configuración nginx.conf (es decir, no en los contextos http o de flujo ).

   módulo de carga módulos/ngx_pagespeed.so;

2. PageSpeed en sí se configura en el contexto http , así que coloque estas directivas en un nuevo archivo de configuración llamado pagespeed.conf en el directorio /etc/nginx/conf.d . PageSpeed está activado para el sitio web especificado en la directiva proxy_pass , aquí http://www.example.com .

   Pagespeed MessageBufferSize 10240;
   Pagespeed FileCachePath /var/ngx_pagespeed_cache;
   
   servidor {
   escuchar 80;
   ubicación / {
   contraseña_proxy http://www.ejemplo.com; }
   Pagespeed activado;
   }

3. Vuelva a cargar NGINX Plus para cargar el módulo PageSpeed en la instancia en ejecución.

   $ sudo nginx -s reload

Prueba del módulo NGINX Plus PageSpeed con PageSpeed Insights

PageSpeed Insights es una herramienta independiente proporcionada por Google para medir el nivel de optimización aplicado a una página web tanto para dispositivos móviles como de escritorio. Proporciona una puntuación para ambos dispositivos con sugerencias sobre cómo hacer que la página se cargue más rápido. Es una herramienta útil para medir su sitio y demostrar la eficacia del módulo PageSpeed.

Puede utilizar PageSpeed Insights para comparar la puntuación de su sitio y las sugerencias de optimización con y sin PageSpeed habilitado. Alterne entre las directivas pagespeed on y pagespeed off para medir la eficacia del módulo PageSpeed en su sitio.

PageSpeed aplica sus optimizaciones sin ninguna configuración o ajuste adicional. Sin embargo, si desea tener más control sobre qué optimizaciones se realizan en su sitio, consulte la documentación de PageSpeed .

Pruebe PageSpeed con NGINX Plus usted mismo: comience hoy mismo su prueba gratuita de 30 días o contáctenos para analizar sus casos de uso .