Cómo instalar Nginx Google Pagespeed en Debian 11 Bullseye

sudo nano /etc/nginx/nginx.conf

Ahora, agregue la siguiente línea.

 load_module modules/ngx_pagespeed.so; ##### insert with other modules ###

Ejemplo:

Para terminar, pruebe su configuración de Nginx en el comando de ejecución en seco, luego, si está bien, reinicie el servidor de Nginx.

sudo nginx -t

Ejemplo:

 nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
 nginx: configuration file /etc/nginx/nginx.conf test is successful

Si la sintaxis de Nginx es correcta, reinicie el servicio de Nginx:

sudo systemctl restart nginx

Crear caché de PageSpeed

Antes de configurar sus filtros, debe crear un directorio de caché para que Nginx pagespeed almacene los archivos en caché y las conversiones de imágenes. Esto se puede cambiar a una ubicación de su elección; sin embargo, lo haremos en la carpeta Nginx para la guía.

Cree el directorio de caché:

sudo mkdir -p /etc/nginx/ngx_pagespeed_cache

Establezca al usuario www-data como propietario (importante):

sudo chown -R www-data:www-data /etc/nginx/ngx_pagespeed_cache

Configuración de archivadores de PageSpeed

Ahora, hay algunas formas en que puede configurar sus filtros de velocidad de página, y ninguna es correcta o incorrecta. Sin embargo, el ejemplo creará un “pagespeed.conf” archivo de configuración para este tutorial.

La razón de esto se debe al hecho de que la configuración de la velocidad de la página puede ser complicada y, a menudo, puede romper un sitio web. Si desea revertir los módulos de velocidad de página rápidamente, puede comentar contra el incluir pagespeed.conf línea en su bloque de servidor.

Cree el archivo pagespeed.conf:

sudo nano /etc/nginx/modules-available/pagespeed.conf

A continuación, repasaremos el filtro principal configurado de forma segura para la mayoría de los sitios web. Sin embargo, esto se puede cambiar y modificar a una gran cantidad de opciones diferentes en el futuro, pero deberá investigar esto visitando la documentación cuidadosamente.

###enable pagespeed on the server block###
 pagespeed on;
 pagespeed Domain https://www.example.com;
 pagespeed Domain https://example.com;

###Add this line if your website runs on HTTPS###
 pagespeed FetchHttps enable;

###Set up admin location###
 admin console
 pagespeed Statistics on;
 pagespeed StatisticsLogging on;
 pagespeed StatisticsLoggingIntervalMs 60000;
 pagespeed StatisticsLoggingMaxFileSizeKb 1024;
 pagespeed MessageBufferSize 100000;
 pagespeed LogDir /var/log/pagespeed;
 pagespeed AdminPath /pagespeed_admin;

###SECURE THE LOCATION FROM BAD BOTS AND MALICOUS ACTORS###
 location ~ ^/pagespeed_admin {
    allow 127.0.0.1;
    allow your-own-IP-address;
    deny all;
 }


###Specify the file cache folder that you created earlier###
 pagespeed FileCachePath /etc/nginx/ngx_pagespeed_cache;

###Set the cache settings, you can play around with these numbers###
 pagespeed FileCacheSizeKb            102400;
 pagespeed FileCacheCleanIntervalMs   3600000;
 pagespeed FileCacheInodeLimit        500000;
 pagespeed LRUCacheKbPerProcess     1024;
 pagespeed LRUCacheByteLimit        16384;

###OPTIONAL: use Memcached to further increase performance of pagespeed###
 pagespeed MemcachedThreads 1;
 pagespeed MemcachedServers "localhost:11211";

###Ensure requests for pagespeed optimized resources go to the pagespeed handler###
 and no extraneous headers get set.
 location ~ ".pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+" {
   add_header "" "";
 }
 location ~ "^/pagespeed_static/" { }
 location ~ "^/ngx_pagespeed_beacon$" { }

###Set the most common safe filters###
 pagespeed RewriteLevel CoreFilters;

Ahora, es posible que haya notado que renombramos en el directorio de velocidad de página recién creado el archivo de configuración “pagespeed-example.com.conf .” Esto se hizo como si alojara varios sitios web en el mismo servidor. Algunos pueden necesitar una personalización diferente de la velocidad de la página, por lo que separar los archivos de configuración evitará que la configuración se ensucie.

La opción de filtro que se estableció fue "CoreFilters" como nivel de reescritura. En general, PageSpeed ​​ofrece tres niveles de reescritura:"CoreFilters, PassThrough, y OptimizeForBandwidth" . Como habrá notado en los comentarios originales, "CoreFilters" es seguro para la mayoría de los sitios web y se usa como valor predeterminado para las pruebas.

Corefilters consta de:

• añadir_cabeza – Añade un elemento al documento si aún no está presente.
• combinar_css – Combina múltiples elementos CSS en uno.
• combinar_javascript – Combina múltiples elementos de script en uno.
• convertir_meta_etiquetas – Agrega un encabezado de respuesta para cada metaetiqueta con un atributo http-equiv.
• extender_caché – Prolonga la vida útil de la memoria caché de CSS, JS y recursos de imagen que no se han optimizado de otro modo mediante la firma de URL con un hash de contenido.
• fallback_rewrite_css_urls – Reescribe los recursos a los que se hace referencia en cualquier archivo CSS que de otro modo no se puede analizar ni minimizar.
• flatten_css_importaciones – CSS en línea aplanando todas las reglas de @import.
• inline_css – Inserta pequeños archivos CSS en el documento HTML.
• inline_import_to_link – En línea etiquetas que comprenden solo CSS @imports convirtiéndolas en equivalentes etiquetas.
• inline_javascript – Alinea pequeños archivos JS en el documento HTML.
• reescribir_css – Reescribe los archivos CSS para eliminar el exceso de espacios en blanco y comentarios y, si está habilitado, reescribe o extiende en caché las imágenes a las que se hace referencia en los archivos CSS. En el modo OptimizeForBandwidth, la minimización ocurre en el lugar sin cambiar las URL.
• reescribir_imágenes – Optimiza imágenes, recodificándolas, eliminando el exceso de píxeles e insertando imágenes pequeñas. En el modo OptimizeForBandwidth, la minificación ocurre en el lugar sin cambiar las URL.
• reescribir_javascript – Reescribe archivos JavaScript para eliminar el exceso de espacios en blanco y comentarios. En el modo OptimizeForBandwidth, la minificación ocurre en el lugar sin cambiar las URL.
• reescribir_estilo_atributos_con_url – Vuelva a escribir el CSS en los atributos de estilo si contiene el texto 'url(' aplicando el filtro rewrite_css configurado.

Ahora, puede aumentar aún más los CoreFilters agregando aún más filtros. Sin embargo, recomendaría investigar un poco, ya que más filtros equivalen a más riesgo de que su sitio web se rompa. Es un arte usar la velocidad de la página de Google, ejemplo a continuación de algunas opciones adicionales.

###css optimization filters###
 pagespeed EnableFilters outline_css;
 pagespeed EnableFilters inline_google_font_css;
 pagespeed EnableFilters move_css_above_scripts;
 pagespeed EnableFilters move_css_to_head;
 pagespeed EnableFilters prioritize_critical_css;

###html optimization filters###
 pagespeed EnableFilters combine_heads;
 pagespeed EnableFilters collapse_whitespace;
 pagespeed EnableFilters convert_meta_tags;
 pagespeed EnableFilters elide_attributes;
 pagespeed EnableFilters pedantic;
 pagespeed EnableFilters remove_comments;
 pagespeed EnableFilters remove_quotes;
 pagespeed EnableFilters trim_urls;

###javascript optimization filters###
 pagespeed EnableFilters canonicalize_javascript_libraries;
 pagespeed EnableFilters defer_javascript;

###image optimization filters###
 pagespeed EnableFilters dedup_inlined_images;
 pagespeed EnableFilters inline_preview_images;
 pagespeed EnableFilters resize_mobile_images;
 pagespeed EnableFilters lazyload_images;
 pagespeed EnableFilters strip_image_color_profile;
 pagespeed EnableFilters strip_image_meta_data;
 pagespeed EnableFilters jpeg_subsampling;
 pagespeed EnableFilters convert_png_to_jpeg;
 pagespeed EnableFilters resize_rendered_image_dimensions;
 pagespeed EnableFilters insert_image_dimensions;
 pagespeed NoTransformOptimizedImages on;
 pagespeed EnableFilters sprite_images;

Una vez hecho esto, CTRL+O para guardar, luego CTRL +X para salir.

Agregue la siguiente línea, pruebe y reinicie una vez que se complete la configuración para incluir esto en su bloque de servidor.

sudo nano /etc/nginx/sites-available/example.com.conf

Agregue la siguiente línea para incluir los filtros:

include /etc/nginx/modules-available/pagespeed.conf;

Ejemplo:

Alternativamente, simplemente vincúlelo desde módulos disponibles a módulos habilitados , ambas opciones funcionan según lo que prefieras usar.

Ejemplo:

sudo ln -s /etc/nginx/modules-available/pagespeed.conf /etc/nginx/modules-enabled/pagespeed.conf 

RECUERDA UTILIZAR SOLO UN MÉTODO.

Pruebe su servidor Nginx antes de reiniciar:

sudo nginx -t

Si su sintaxis de Nginx está bien y no hay errores, reinicie el servicio de Nginx:

sudo systemctl restart nginx

Soporte de conversión WebP

Para generar imágenes WebP, instale los siguientes paquetes en su sistema.

Compatibilidad con PHP 7.4 WebP:

sudo apt install imagemagick php7.4-imagick ffmpeg

Compatibilidad con PHP 8.0 WebP:

sudo apt install imagemagick php8.1-imagick ffmpeg

Compatibilidad con PHP 8.1 WebP:

sudo apt install imagemagick php8.1-imagick ffmpeg

Para aquellos que no tienen PHP 8.0 o PHP 8.1, esto significa que están usando el repositorio estándar de Debian. Esto se puede solucionar importando las últimas compilaciones de PHP con el siguiente comando.

curl -sSL https://packages.sury.org/php/README.txt | sudo bash -x

A continuación, ejecute una actualización de APT para sincronizar la nueva incorporación.

sudo apt update

Ahora vuelva a ejecutar esos comandos como se mencionó anteriormente. Asegúrese de ajustar cualquier otra configuración si realizó una actualización significativa de PHP.

Verificar que ngx_pagespeed esté operativo

El trabajo duro ha valido la pena. Ahora quiere ver si PageSpeed ​​está funcionando. Haremos esto usando el comando curl, como en el ejemplo a continuación.

curl -I -p https://www.example.com

Debería ver en la salida esta parte de la siguiente manera:

x-page-speed: 1.13.35.2-0

Precargar ngx_pagespeed

El módulo ngx_pagespeed no tiene una función de precarga, lo que puede ser frustrante, ya que puede llevar varias visitas antes de que los elementos se almacenen en caché y se optimicen adecuadamente. Esto puede empeorar si tuviera que purgar el caché varias veces al día, lo que dejaría inaceptablemente los niveles de optimización de su sitio web.

Sin embargo, ingresa el siguiente comando para obtener previamente todas sus páginas web si tiene configurado ramdisk. Además, puede configurar esto en un cronjob para que el futuro lo haga por hora, día o semana.

Visita el Crontab.guru si necesita ayuda para crear tiempos cron.

Configuración de ramdisk de velocidad de página precargada:

sudo wget -m -p -E -k -P /tmp/preload/ https://www.example.com/

Trabajo de Cronjob una hora:

00 */1 * * * wget -m -p -E -k -P /tmp/preload/ https://www.example.com/

Para aquellos nuevos en Linux y Debian, para abrir Cron use el siguiente comando.

sudo crontab -e

Recursos comunitarios para PageSpeed

• ModPageSpeed.com:documentación oficial y probablemente el primer sitio que debe visitar para obtener ayuda.
• PageSpeedGuide.com:gran fuente de información sobre PageSpeed ​​y filtros.
• ngx_pagespeed Google Group:gran chat de la comunidad de Google sobre Nginx + PageSpeed