Post222 nn

Actualización de 5 minutos Nginx 1.10 a 1.15+ en Ubuntu 16.04 + Page Speed


Hola comunidad de Backtrack Academy, constantemente estoy escribiendo artículos relacionados con problemas que se presentan en nuestra plataforma, el día de hoy vamos a mejorar el performance, ya que Google PageSpeed nos arroja una mala clasificación.

 

La velocidad de carga de una web es el tiempo que una web tarda en estar totalmente disponible en el dispositivo desde el que accedamos. Google tiene una herramienta destinada a analizar esta velocidad: Pagespeed.

 

PageSpeed Insights (PSI) se proporcionan datos sobre el rendimiento real de las páginas tanto en dispositivos móviles como en ordenadores, y se dan consejos para mejorarlas.

 

Puntos a considerar:

1.- Optimizar imágenes.

2. Comprimir código JavaScript y CSS.

3. Recursos de bloqueo de procesamiento por encima del pliegue

4. Aproveche el almacenamiento en caché del navegador

 

Lo primero que necesitaremos es actualizar nuestra versión de Nginx a una más actual:

 

Así que aquí está la guía más simple para actualizar Nginx Web Server de 1.10.3 a 1.15.1.

Primero vamos a hacer una copia de seguridad de nuestro directorio Nginx. Hacemos esto bien, porque siempre debemos tener una copia de seguridad en caso de que las cosas salgan mal. Entonces esto es tan simple como hacer lo siguiente.

sudo mkdir /etc/nginx-backup/

 

Respaldamos nuestros archivos:

sudo cp -r /etc/nginx/* /etc/nginx-backup/

 

Si prueba para ver su versión actual de Nginx, verá lo siguiente.

sudo nginx -V
nginx version: nginx/1.10.3 (Ubuntu)
built with OpenSSL 1.0.2g 1 Mar 2016

 

Así que ahora vamos a actualizar Nginx a 1.12.1 desde el repositorio oficial de Nginx. Primero agregamos el repositorio. Para esto necesita propiedades de software comunes, si aún no está instalado. Entonces, primero, hagamos eso.

sudo apt-get install software-properties-common

 

Ahora agreguemos el repositorio Nginx ejecutando los siguientes comandos en la terminal.

sudo add-apt-repository ppa:nginx/stable

 

Ahora ejecute lo siguiente para actualizar su información de repositorio de apt.

sudo apt-get update

 

Ahora vamos a actualizar Nginx a 1.15.1 ejecutando lo siguiente desde la terminal

apt-get install nginx

 

Seleccione N y presione ENTER

Eso es todo, su actualización de Nginx está terminada y ahora está balanceando Nginx V 1.12.1 y puede confirmar esto escribiendo lo siguiente.

sudo nano /etc/nginx/nginx.conf

 

Las líneas superiores de su archivo nginx.conf existente se verán así.

user www-data;
worker_processes auto;
pid /run/nginx.pid;

 

Simplemente agregamos la siguiente línea para que se vea así.

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

Verificamos servicio:

sudo nginx -t
nginx: [warn] could not build optimal variables_hash, you should increase either variables_hash_max_size: 1024 or variables_hash_bucket_size: 64; ignoring variables_hash_bucket_size
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

 

Instalación  de ngx_pagespeed

 

Descargue el paquete fuente ngx_pagespeed Para compilar Nginx con el módulo ngx_pagespeed, también necesitamos el paquete fuente ngx_pagespeed. Cloné el repositorio ngx_pagespeed de Git.

cd /usr/local/src

sudo apt install git

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

cd incubator-pagespeed-ngx/
 
 

Cargue el módulo ngx_pagespeed

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

 

Edite el archivo de configuración principal de Nginx.

sudo nano /etc/nginx/nginx.conf
 

Agregue la siguiente línea al comienzo del archivo.

load_module modules/ngx_pagespeed.so;
 

Guarde y cierre el archivo, luego puede probar la configuración de Nginx.

sudo nginx -t

Configuración del módulo ngx_pagespeed

En nuestra configuración de nginx en mi caso /etc/nginx/default.conf

# enable pagespeed module on this server block
pagespeed on;

# Needs to exist and be writable by nginx. Use tmpfs for best performance.
pagespeed FileCachePath /var/ngx_pagespeed_cache;

# 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$" { }

pagespeed RewriteLevel CoreFilters;

 

Además puedes agregar:

pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters prioritize_critical_css;
#This filter is likely to cause problems for loading your web pages. 
pagespeed EnableFilters defer_javascript;

Para ver más información sobre los filtros.

 

https://www.modpagespeed.com/doc/filter-head-add

 

Para verificar si está todo bien:

curl -I -p https://youdomain.com

response

[deploy@bta-plataform ~] curl -I -p https://backtrackacademy.com
HTTP/1.1 200 OK
Date: Fri, 13 Dec 2019 19:21:12 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Set-Cookie: __cfduid=dc582389aff27de4060fd1720c772d74b1576264872; expires=Sun, 12-Jan-20 19:21:12 GMT; path=/; domain=.backtrackacademy.com; HttpOnly; Secure
Vary: Accept-Encoding
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Set-Cookie: _bta_session=bzk4U25yTW9JNDhjL2lXY1pLa2VyMDQ3SXJUZDhDR3Ura1lrbGFrRVp0VllRa084d29rbmFlQ1JPMWQvT2VJWmgzSnQ5eE1GWFYvWDhWc0o2YnlNSGZuM0o4UEM0cXordFEzQUxWSmYrRnpuc05Ubm52RXY2UWNNMWtwamNub3pqZmNiV1BGRFRkUzBQL0w5YWZ0K1FLSC8xYVhrR00xaVBPZ0plMTkxc1M3cmpMWW1IMmYzajUzMS9lcHBUWTliLS04QkZqRnJxNmg5czRKL0tOT3NURXpBPT0%3D--e44f782ad46768418ccf26005a8e30f420b7db82; path=/; HttpOnly
X-Request-Id: 6f560e78-0b63-4fa0-bbe6-e2dd90b6bd41
X-Runtime: 0.221665
Vary: Origin
X-Page-Speed: 1.13.35.2-0
Cache-Control: max-age=0, no-cache, must-revalidate
CF-Cache-Status: DYNAMIC
Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Server: cloudflare
CF-RAY: 544a4cbe0eefccfe-EWR

Comprobamos:

X-Page-Speed: 1.13.35.2-0

 

Hoy en día, las plataformas con desarrollo continuo se ven cada día más expuestas a cambios relacionados con performance/posicionamiento. Google, Amazon con Alexa cada día son más estrictos al momento de clasificar la posición de un sitio web, estoy nos ayuda bastante al momento de querer obtener más impresiones ya que te darán más preferencia.

Dicen que Amazon pierde un 1% de facturación por cada 100ms de lentitud y que los ingresos de Google se reducían un 20% con 600ms más de carga.

 

Configuración extra

 

Comprimir archivos:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

 

Serve static assets with an efficient cache policy

 

Publica recursos estáticos con una política de caché eficaz Se han encontrado 15 recursos, es un problema común, Una duración en caché más larga puede aumentar el número de visitas repetidas a tu página.

 

 

El almacenamiento en caché de HTTP puede acelerar el tiempo de carga de la página en visitas repetidas.

Cuando un navegador solicita un recurso, el servidor que proporciona el recurso puede decirle al navegador cuánto tiempo debe almacenarlo temporalmente o almacenarlo en caché . Para cualquier solicitud posterior de ese recurso, el navegador utiliza su copia local en lugar de obtenerla de la red.

 

 
## All static files will be served directly.
  location ~* ^.+\.(?:css|cur|js|jpe?g|gif|htc|ico|png|html|xml|otf|ttf|eot|woff|woff2|svg)$ {
    access_log off;
    expires 30d;
    add_header Cache-Control public;

    ## No need to bleed constant updates. Send the all shebang in one
    ## fell swoop.
    tcp_nodelay off;

    ## Set the OS file cache.
    open_file_cache max=3000 inactive=120s;
    open_file_cache_valid 45s;
    open_file_cache_min_uses 2;
    open_file_cache_errors off;
  }


Artículos que te pueden interesar

Mejores webshell para PHP y ASP

Las Webshells son scripts (código que contiene un conjunto de comandos a ejecutar) que se suben malintencionadamente en las páginas webs aprovechando alguna vulnerabilidad, cuya complejidad varía para realizar distintas acciones sobre el servidor que la soporta. Como ejemplo visual se muestra la esta imagen..