Compresión brotli con WordPress

Compresión brotli con WordPress

Hoy vengo a hablaros de unas de esas cosas que no dentro de mucho dará que hablar. La compresión brotli con WordPress.

Todo este viene a raíz de este tuit. No sabía lo que era Brotli así que me informé y monté este artículo.

 

¿Que es la compresión Brotli?

Brotli Es un formato de compresión de páginas web ideado que afirma que comprime más que el formato Gzip que se usa ahora en los servidores de páginas web. Con brotli conseguimos ratios mayores de compresión que con Gzip  lo que hace que nuestras páginas pesen menos y por lo tanto carguen más rápido.  Ahora mismo Google lo está usando en la Google Play (por ejemplo) y está notando que la cantidad de datos a descargar es mucho menor.

Aquí os dejo una imagen para que podáis comprobar los ratios de compresión de brotli.

Brotli Play Store
Brotli Play Store

 

 

 

 

Con esto conseguimos un ahorro en los tiempos de carga y una mejora en el WPO de la web.

El único inconveniente que tiene por el momento es que solo funciona con los Navegadores modernos (lease Chrome y Firefox) pero al igual que otras tecnologías para la web se irán implantando en los demás navegadores. ¿Y esto que tiene que ver con WordPress?

Pues mucho la verdad, ya que gracias a brotli y cosas como el HTTP2 va a conseguir que nuestras instalaciones de WordPress vayan  mucho más rápidas.

 

Compresión brotli con WordPress

Y ahora que has llegado aquí te estarás preguntando como conseguir usar esta nueva tecnología en nuestros WordPress.  Pues la cosa directamente no pinta fácil ya que hay que hacer cambios en la configuración del servidor que no están al alcance de los mortales. Además por ahora solo funciona con Nginx como módulo (aunque es posible utilizarlo de otra manera). Di que casi todos los Hosting Optimizados para WordPress ya traen en el stack del servidor Nginx funcionando como proxy inverso.Así que solo queda esperar que poco a poco los hosting vayan implementando esta solución.

Cosa que desde luego no es fácil ya que hay que recompilar Nginx con el módulo añadido de brotli. Ahora mismo el único (que yo sepa) servidor que instala brotli con Nginx es ServerPilot  (quizás alguno más lo haga) del que ya os he hablado en este blog, pero solo en la versión premium. En  la gratuita solo hace una instalación de Nginx normal.

Y es que después de muchos tutoriales que he mirado para hacer esta prueba al tener que compilar el Nginx entero como te confundas en alguno de los pasos la has liado.

Ahora os voy a explicar como funciona la compresión brotli con WordPress.

 

El Proceso

Lo primero es preparar un VPS para hacer las pruebas.  Yo en mi caso uso uno de los más sencillos de DigitalOcean (enlace con referido, si os apuntáis con ese enlace os dan 10 $ para gastar). Yo os aconsejo que le metáis un poco de crédito que nunca está de más tener estas cosas para hacer pruebas y macarradas (como digo yo).

En este caso cree un droplet de 512 MB en UK y con Lemp instalado en Ubuntu 16.04

 

Droplet Lemp Ubuntu 16.04
Droplet Lemp Ubuntu 16.04

 

Antes de qué sigáis os aviso que esto de usar compresión brotli con WordPress aparte de ser para muy frikis es un poco largo así que no os asustéis.

Droplet UK 512 MB
Droplet UK 512 MB

 

Una vez que se ha creado el droplet te llegarán  por correo las credenciales y la ip del VPS. Yo en mi caso redirigí un dominio de los que tengo por ahí a la IP del VPS para hacer más fácil el tema de la instalación de WordPress y demás. Cuando tengas las credencias y la ip te conectas por SSH al VPS. Lo primero que te pedirá es modificar la clave de root por la que tú quieras (puedes hacer una conexión por claves ssh generándolas pero esto me pareció más rápido).

 

Conexión SSH Droplet
Conexión SSH Droplet

Una vez que tenemos acceso al VPS y al ser uno de pruebas pues no me pongo a securizarlo ni nada (que es lo que se debería de hacer).

Creación Base de Datos y usuario MYSQl e Instalación de WordPress

Ya conectado lo primero que voy a hacer es crear la Base de Datos y el usuario que luego utilizaré para la instalación de WordPress.Después me descargo la última versión de WordPress para hacer las pruebas.

Instalación de WordPress
Instalación de WordPress

 

Si has llegado aquí y buscas esto de la compresión brotli con WordPress me imagino que ya sabes algo de WordPress así que me voy a saltar la instalación para no hacer el artículo más largo que un día sin pan.

 

Recompilación de Nginx

Y es que ahora viene lo complicado del asunto. La instalación del Nginx con el módulo de compresión de brotli instalado.  Como esta instalación sería muy larga os dejo en enlace en el que me he basado para hacer la instalación. Ya os aviso que sino tenéis unos mínimos conocimientos de Linux se os va a hacer un poco complicada esta parte. Yo os puede decir que aún controlando me ha llevado un buen rato (sobre todo si vas sin leer bien las instrucciones).

Una vez recompilado Nginx con el módulo de compresión de brotli empezamos las pruebas de brotli con WordPress.

 

Pruebas con WordPress

Para las pruebas con WordPress las he realizado primero con una instalación limpia al que la instalo el plugin Elementor y me descargo unas de las plantillas que ya vienen predefinidas.

WordPress_Elementor

Después hago un test en Pingdom Tools para ver cuanto me tarda en cargar la web con el Nginx a pelo sin el módulo de Brotli.

 

Página de Elementor sin Brotli activado
Página de Elementor sin Brotli activado

Ahora probamos con la compresión de brotli activada.

Elementor con compresión brotli activada
Elementor con compresión brotli activada

 

Como se puede comprobar ya hemos ganado en velocidad.Ahora vamos a hacer las pruebas con esta misma web clonada en el VPS.

 

Pruebas con WordPress en Web Real

Probamos primero sin la compresión brotli.

Y ahora con la compresión brotli activada.

 

WordPress Real con compresión Brotli
WordPress Real con compresión Brotli

 

Aquí ya se nota la diferencia en el tiempo de carga para la misma web. Esto ya es harina de otro costal.

 

 

¿Quieres probar si tienes la compresión brotli activada en tu hosting?

 

Pues es más sencillo de lo que parece. Te vas a la siguiente web y allí pruebas tu sitio.

 

Conclusión

Quiero dejar claro que para las pruebas usé un VPS con la instalación por defecto y solo con Nginx como servidor web y sin tunear. Con una buena optimización del VPS y usando Apache junto con Nginx y con algún módulo de caché en el servidor seguramente los tiempos de carga serían mucho más rápidos (quizás en una segunda parte del artículo). Pero lo que quería conseguir es explicaros que es esto de la compresión brotli con WordPress y como dentro de nada esto se empezará a implementar en los Hosting y así consigamos web mucho más rápidas.

Entiendo que este tema es un poco friki y que puede haber muchas dudas al respecto. Si me las ponéis en los comentarios intentaré contestar a todas. Eso sí, como ya he dicho antes para hacer estas pruebas hay que tener unos mínimos conocimientos de Linux. Esto no es pincho 3 o 4 clicks y ya está.  También os pediría que si os ha gustado el artículo compartidlo en vuestras Redes Sociales que aunque no lo creáis hay muchos “gurus” del WordPress que un artículo de esta índole lo pondrían en la sección de pago de su web. Y sino al tiempo.