Cómo instalar y configurar PageSpeed en NGINX para mejorar el rendimiento de tu sitio web

Google PageSpeed es un módulo de código abierto creado por Google para ayudar a que las páginas web se carguen más rápido. Esta mejora en la velocidad se logra al reescribir las páginas para obtener una mejor latencia y reducir el ancho de banda. Aunque PageSpeed ha estado disponible durante algún tiempo, no se utiliza con frecuencia. Sin embargo, al agregarlo a tus sitios web de NGINX o Apache, notarás un rendimiento considerablemente mejorado.

En este artículo, te mostraré cómo instalar tanto NGINX como PageSpeed para que tus usuarios disfruten de una experiencia mucho mejor con tus páginas web. Lo haremos desde cero, así que será mejor que lo hagas primero en una máquina que no se use en producción. Una vez que hayas dominado el proceso, puedes llevarlo a producción y migrar tus sitios al nuevo servidor web.

Lo que necesitarás

En este tutorial, usaré Ubuntu Server 20.04, por lo que necesitarás una instancia de ese sistema operativo y un usuario con privilegios de sudo. Entonces, ¡comencemos!

Cómo instalar las dependencias necesarias

Lo primero que haremos es instalar algunas dependencias. Inicia sesión en tu servidor y ejecuta los siguientes comandos:

sudo apt-get update

sudo apt-get install libssl-dev libxslt-dev libgd-dev curl nano gnupg2 ca-certificates lsb-release git -y

Cómo instalar NGINX

A continuación, necesitaremos instalar NGINX. Primero, agrega el repositorio con el siguiente comando:

Cómo usar el teclado táctil en Windows 11

sudo add-apt-repository ppa:ondrej/nginx-mainline -y

Actualiza e instala NGINX con los siguientes comandos:

sudo apt update

sudo apt install nginx-core nginx-common nginx nginx-full -y

Ahora, debemos agregar la fuente de NGINX. Abre el archivo de repositorios con el siguiente comando:

sudo nano /etc/apt/sources.list.d/ondrej-ubuntu-nginx-mainline-*.list

Localiza la siguiente línea:

# deb-src http://ppa.launchpad.net/ondrej/nginx-mainline/ubuntu/ focal main

Elimina el carácter # de la línea anterior y luego guarda y cierra el archivo.

Actualiza apt con el siguiente comando:

sudo apt update

Ahora, podemos descargar el código fuente de NGINX. Crea un nuevo directorio con el siguiente comando:

Cómo crear una vista estática de datos en Excel para colaborar en línea

sudo mkdir -p /usr/local/src/nginx

Accede a ese nuevo directorio:

cd /usr/local/src/nginx/

Instala el paquete dpkg-dev con el siguiente comando:

sudo apt install dpkg-dev

Instala el código fuente con el siguiente comando:

sudo apt source nginx

Cómo descargar el código fuente de ngx_pagespeed

Accede al directorio src con el siguiente comando:

cd /usr/local/src

Clona el código fuente necesario con el siguiente comando:

sudo git clone https://github.com/apache/incubator-pagespeed-ngx.git

Ingresa al directorio recién creado:

Cómo obtener descuentos en productos de Microsoft a través del Programa de Uso Doméstico

cd incubator-pagespeed-ngx/

Cambia a la rama estable más reciente:

sudo git checkout latest-stable

Obtén la URL de descarga con el siguiente comando:

cat PSOL_BINARY_URL

Usa esa URL para descargar el PSOL con un comando similar a este:

sudo wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz

Extrae el nuevo archivo con el siguiente comando:

sudo tar xvf 1.13.35.2-x64.tar.gz

Asegúrate de saber qué versión de NGINX estamos usando con el siguiente comando:

ls /usr/local/src/nginx

Usarás el número de versión más reciente (en mi caso, es el 1.21.4). Accede a ese directorio con el siguiente comando:

Peppermint Linux: Ha perdido su encanto

cd /usr/local/src/nginx/nginx-1.21.4

Compila las dependencias necesarias con los siguientes comandos:

sudo apt build-dep nginx

sudo apt install uuid-dev

Cuando finalicen esos comandos, configura el entorno con el siguiente comando:

sudo ./configure --with-compat --add-dynamic-module=/usr/local/src/incubator-pagespeed-ngx

Compila el módulo de PageSpeed:

sudo make modules

Copia los módulos al directorio necesario con el siguiente comando:

sudo cp objs/ngx_pagespeed.so /usr/share/nginx/modules/

Cómo cargar el módulo de PageSpeed

Abre el archivo de configuración de NGINX con el siguiente comando:

sudo nano /etc/nginx/nginx.conf

Agrega la siguiente línea al principio del archivo:

Aprende a crear tus propios juegos con el paquete completo de AppGameKit al 80% de descuento

load_module modules/ngx_pagespeed.so;

Guarda y cierra el archivo. Recarga NGINX con el siguiente comando:

sudo systemctl reload nginx

Cómo configurar los filtros de PageSpeed

En primer lugar, crea la carpeta que PageSpeed utilizará para su caché y otórgale los permisos adecuados con los siguientes comandos:

sudo mkdir -p /var/ngx_pagespeed_cache

sudo chown -R www-data:www-data /var/ngx_pagespeed_cache

A continuación, habilitaré PageSpeed para el sitio web predeterminado de NGINX. Debes hacer esto en el archivo de configuración del sitio/página que estás sirviendo con NGINX. Para mi demostración, abriré el archivo predeterminado con el siguiente comando:

sudo nano /etc/nginx/sites-available/default

Agrega lo siguiente al final de la sección del servidor:

pagespeed on;

pagespeed FileCachePath /var/ngx_pagespeed_cache;

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {

add_header "" "";

}

location ~ "^/pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

De modo que todo el bloque del servidor quede así:

server {

listen 80 default_server;

listen [::]:80 default_server;

# SSL configuration

#

# listen 443 ssl default_server;

# listen [::]:443 ssl default_server;

#

# Note: You should disable gzip for SSL traffic.

# See: https://bugs.debian.org/773332

#

# Read up on ssl_ciphers to ensure a secure configuration.

# See: https://bugs.debian.org/765782

#

# Self signed certs generated by the ssl-cert package

# Don't use them in a production server!

#

# include snippets/snakeoil.conf;

root /var/www/html;

# Add index.php to the list if you are using PHP

index index.html index.htm index.nginx-debian.html;

server_name _;

location / {

try_files $uri $uri/ =404;

}

pagespeed on;

pagespeed FileCachePath /var/ngx_pagespeed_cache;

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {

add_header "" "";

}

location ~ "^/pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

pagespeed RewriteLevel CoreFilters;

}

Guarda y cierra el archivo.

Las 5 mejores herramientas de creación de contenido digital en 2022

Recarga NGINX con el siguiente comando:

sudo systemctl reload nginx

Cómo comprobar la configuración de PageSpeed

Ahora puedes asegurarte de que PageSpeed esté funcionando con el siguiente comando:

curl -I -p https://SERVIDOR

Donde SERVIDOR es la dirección IP o el dominio del servidor. La salida debe incluir algo como esto:

X-Page-Speed: 1.13.35.2-0

¡Eso es todo! PageSpeed está instalado y listo para ayudarte a acelerar tu servidor web NGINX. Para asegurarte de que NGINX no se actualice automáticamente (y rompa PageSpeed), puedes bloquearlo con el siguiente comando:

sudo apt-mark hold nginx

Cuando recibas una alerta (de apt) de que hay una nueva versión de NGINX, deberás descargar el paquete fuente y compilar todo nuevamente.

Suscríbete a How To Make Tech Work de Newsmatic en YouTube para obtener los últimos consejos tecnológicos para profesionales de negocios de Jack Wallen.

Cómo utilizar la consola de administración de Google Workspace: consejos y funciones clave

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Software, allí encontraras muchos artículos similares a Cómo instalar y configurar PageSpeed en NGINX para mejorar el rendimiento de tu sitio web , tenemos lo ultimo en tecnología 2023.