Optimiza tu sitio web con el módulo dinámico Google PageSpeed para NGINX Plus

Liam CrillyDirector sénior de Gestión de Producto

A medida que el tamaño medio de las páginas web sigue aumentando, cada vez es más importante optimizar todos los aspectos del diseño, el desarrollo y la distribución de su sitio web para garantizar una buena experiencia a sus usuarios, independientemente del dispositivo que utilicen. Está ampliamente documentado que el tiempo de carga de las páginas afecta a la experiencia del usuario y a los ingresos.

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

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

Compilació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 se han adaptado para garantizar la compatibilidad binaria con NGINX Plus. (Puede utilizar las instrucciones de Google sin modificarlas para compilar un módulo dinámico que funcione con NGINX Open Source.)

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

Recomendamos encarecidamente que compile los módulos dinámicos en un sistema independiente, al que aquí denominamos «entorno de compilación». De este modo, se reducen al mínimo los riesgos y la complejidad del sistema en el que tiene previsto ejecutar NGINX Plus con el módulo PageSpeed (al que denominamos «entorno de producción»). El entorno de compilación debe tener el mismo sistema operativo y la misma versión que el entorno de producción; además, deben estar instalados los siguientes componentes:

• Utilidad UnZip
• Compilador y utilidad make
• Biblioteca de expresiones regulares compatibles con Perl (archivos de desarrollo)
• Bibliotecas de compresión Zlib (archivos de desarrollo)

Para asegurarte de que tu entorno de compilación tenga instalados estos requisitos previos, ejecuta 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: Obtener NGINX Open Source

1. En el entorno de producción, ejecute el siguiente comando para identificar la versión de NGINX Open Source que corresponde a la versión de NGINX Plus en ejecución. En esta salida aparece resaltada en naranja: NGINX 1.11.5, que corresponde a NGINX Plus R11.

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

1. En el entorno de compilación, descargue el código fuente de la versión correspondiente de NGINX Open Source.

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

Paso 2: Descargar y preparar el código fuente de PageSpeed

Realice estos pasos en el entorno de compilación.

1. Consulta el número de la versión más reciente del módulo PageSpeed en las notas de la versión, o ejecutando este comando.

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

1. El número de versión de PageSpeed se utiliza varias veces en los comandos de compilación, así que configúralo como una variable de entorno, NPS_VERSION. Incluye únicamente la parte numérica de la cadena de versión, no el sufijo ‑stable ni ‑beta.

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

1. Descarga y extrae el código fuente como se indica a continuación. Ten en cuenta que estos comandos deben ejecutarse de forma secuencial, como si fueran un 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/

Paso 3: Compilar el módulo dinámico de PageSpeed

1. En el entorno de compilación, compile el módulo dinámico PageSpeed ejecutando primero el script configure de NGINX con el argumento --with-compat para que el módulo dinámico sea compatible a nivel binario con NGINX Plus. A continuación, ejecute make modules para compilar únicamente el módulo.

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

1. El proceso de compilación genera 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 presupone) que, al copiar el archivo, le cambie el nombre para incluir el número de versión de NGINX Open Source; por ejemplo, ngx_pagespeed_1.11.5.so.
2. En el entorno de producción, cree un enlace simbólico entre el nombre de archivo que incluye el número de 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 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

Paso 4: Cargar el módulo dinámico PageSpeed

Realice estos pasos en el entorno de producción.

1. Incluya la directiva load_module para cargar PageSpeed como módulo dinámico. La directiva debe aparecer en el contexto de nivel superior («main») del archivo de configuración nginx.conf (es decir, no en los contextos http ni stream).

load_module modules/ngx_pagespeed.so;

1. PageSpeed se configura en el contexto http, así que añade estas directivas a un nuevo archivo de configuración llamado pagespeed.conf en el directorio /etc/nginx/conf.d. PageSpeed se activa para el sitio web especificado en la directiva proxy_pass, en este 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. Recargue NGINX Plus para cargar el módulo PageSpeed en la instancia en ejecución.

$ sudo nginx -s reload

Prueba del módulo PageSpeed de NGINX Plus con PageSpeed Insights

PageSpeed Insights es una herramienta independiente proporcionada por Google que permite medir el nivel de optimización aplicado a una página web tanto para dispositivos móviles como para ordenadores. Ofrece una puntuación para ambos tipos de dispositivos y sugerencias para que la página cargue más rápido. Es una herramienta útil para evaluar su sitio web y demostrar la eficacia del módulo PageSpeed.

Puedes usar PageSpeed Insights para comparar la puntuación de tu sitio y las sugerencias de optimización con PageSpeed activado y desactivado. Alterna entre las directivas pagespeed on; y pagespeed off; para medir la eficacia del módulo PageSpeed en tu sitio.

PageSpeed aplica sus optimizaciones sin necesidad de configuración ni ajustes adicionales. Sin embargo, si desea tener un mayor control sobre las optimizaciones que se realizan en su sitio, consulte la documentación de PageSpeed.

Prueba PageSpeed con NGINX Plus – empieza hoy mismo tu prueba gratuita de 30 días o contacta con nosotros para hablar sobre tus casos de uso.

Sobre el autor

Liam CrillyDirector sénior de Gestión de Producto

Más artículos de Liam Crilly