Como obtener un 100% en rendimiento en Google Lighthouse – 1

Como obtener un 100% en rendimiento en Google Lighthouse – 1

Empezamos con la serie de post para obtener un 100% en todos las métricas de Google Lighthouse utilizando Wordpress, algo que intentamos conseguir en todos nuestros proyectos, donde vamos a desglosar los checks que se tienen en cuenta para evaluar la categoría performance (rendimiento). 

Son un total de 34 checks y en este post explicamos los 11 primeros, son estos:

1. Eliminate render-blocking resources (Eliminar recursos que bloquean el renderizado)

Los recursos que se piden en la página bloquean el renderizado de la misma durante la carga inicial. Se puede valorar entregar el css/js crítico en línea aunque no es obligatorio y diferir todos los js/css que no sean críticos.

Cómo pasarlo

Basta con incluir el atributo async o defer en las llamadas a los recursos css y js:

<script type="text/javascript" async src="https://www.googleadservices.com/pagead/conversion_async.js"></script>

En nuestro caso, sólo dejamos como “crítico” el css del tema, el cual no entregamos en línea sino que simplemente no le agregamos el atributo async:

<link media="all" href="https://lorraine.es/wp-content/cache/autoptimize/css/autoptimize_ceda898e447d2370119cb49ecabe54f9.css" rel="stylesheet">


2. Properly size images (Tamaño apropiado de imágenes)

En esta métrica comprueban que el tamaño utilizado en las imágenes de la web es el adecuado.

Cómo pasarlo

Hay que evitar cargar imágenes en un tamaño mucho mayor que el que realmente necesitan. Por ejemplo, teniendo una versión de escritorio y otra para móviles y cargando cada una de ellas cuando proceda.

En nuestro tema, utilizamos el elemento picture y el siguiente código para mostrar la imagen principal en la web:

<picture>
  <source media="(max-width: 719px)" srcset="<?php echo bloginfo('stylesheet_directory') . '/images/' . $this->getMobileImgName(); ?>">
  <source media="(min-width: 720px)" srcset="<?php echo bloginfo('stylesheet_directory') . '/images/' . $this->getDesktopImgName(); ?>">
  <img class="landing__img" src="<?php echo bloginfo('stylesheet_directory') . '/images/' . $this->getDesktopImgName(); ?>" width="1905" height="1096" alt="<?php echo $this->getTitle(); ?>">
</picture>


3. Defer offscreen images (Diferir imágenes no visibles)

Utilizar lazy-loading para las imágenes que no se visualizan en la pantalla inicial después de que todos los recursos críticos hayan sido cargados bajan la métrica TTI que mide el tiempo en que la web es totalmente interactiva.

Cómo pasarlo

En nuestro caso utilizamos el plugin Autoptimize, el cual ofrece una opción para entregar las imágenes no visibles en la pantalla inicial y las muestra al hacer scroll.


4. Minify CSS (Minificar y concatenar CSS)

Minificando, concatenando y comprimiendo el código CSS se reduce tanto el peso de la página como el número de peticiones que se hacen al servidor.

Cómo pasarlo

El plugin Autoptimize te permite realizar las tareas necesarias fácilmente.


5. Minify JavaScript (Minificar y concatenar Javascript)

Análogamente, minificando, concatenando y comprimiendo el código JS se consigue reducir el peso y número de peticiones de la web.

Cómo pasarlo

El plugin Autoptimize también permite realizar estas tareas fácilmente, e incluye, por defecto en el caso de JQuery, la salvedad de no incluir en esa minificación el código JS que le indiquemos para evitar posibles errores javascript en la web.


6. Reduce unused CSS (Reducir CSS no utilizado)

Indica la cantidad de código css que no es utilizado en la página que se está mostrando y su potencial ganancia. Si se utiliza un framework css o algún tema genérico pesado, es posible que haya una cantidad considerable de código que no se esté utilizando. Se puede comprobar abriendo en dev tools de Google Chrome la pestaña coverage.

Cómo pasarlo

Lighthouse te indicará si merece la pena o no en función de la potencial ganancia. Es decir, nuestro css ocupa tan sólo 58 Kb aproximadamente y en la página principal sólo se utiliza el 24% de ese css, con lo cual la potencial ganancia es de 41 Kb pero marca el check como pasado. Al minificar, concatenar y comprimir el código css ya estás reduciendo su peso, por lo que, a no ser que se utilice un framework css o tema cuya hoja de estilos sea muy grande, es posible que con las acciones anteriores sea suficiente.

En caso de no ser suficiente con esto, puedes incluir el css útil (el que se está utilizando en cada página) con el plugin Autoptimize o con WP Rocket, aunque esta funcionalidad suele ser de pago.


7. Reduce unused JavaScript (Reducir Javascript no utilizado)

Al igual que en el check anterior, indica la cantidad de código JS que no se está utilizando y su potencial ganancia.

Cómo pasarlo

De la misma forma que en el caso anterior, será Lighthouse quien indicará si necesitas realizar alguna tarea adicional más allá de minificar, concatenar y comprimir el JS dependiendo de la potencial ganancia. 

 

8. Efficiently encode images (Codificar las imágenes eficientemente)

Indica la potencial ganancia después de optimizar la codificación de las imágenes JPEG y BMP de la página. Para ello, se establece el nivel de compresión de las imágenes en 85 y se compara con la versión que se está utilizando. 

Cómo pasarlo

Como norma general, antes de subir las imágenes al servidor, es conveniente guardarlas con un nivel de compresión entre 85 y 90. La mayoría por no decir todos los programas de edición de imágenes permiten esta opción. Si ya están subidas hay cantidad de plugins que las optimizan.


9. Serve images in next-gen formats (Servir imágenes en formatos de nueva generación)

Los nuevos formatos de imágenes tales como WebP y AVIF ofrecen mejor compresión que PNG o JPEG, con lo cuál la página pesará menos.

Cómo pasarlo

Nosotros utilizamos el formato WebP con un conversor y con la propia librería en local, también hay plugins que ofrecen esta opción. Aseguraos de añadir la lógica necesaria para que se vea correctamente en aquellos navegadores que no soporten estos formatos.


10. Enable text compression (Habilitar la compresión de textos)

Los recursos de tipo texto deben ser servidos con compresión (gzip, deflate o brotli) para reducir el peso total de la web.

Cómo pasarlo

Dependerá del tipo de servidor utilizado. En nuestro caso, utilizamos Apache y para solucionarlo añadimos la siguiente regla en el fichero htaccess:

<IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
   <IfModule mod_mime.c>
       # DEFLATE by extension
       AddOutputFilter DEFLATE js css htm html xml
   </IfModule>
</IfModule>

Puedes comprobar que está activa y la optimización realizada con la siguiente herramienta

 

11. Preconnect to required origins (Preconectarse a orígenes requeridos)

Considerar agregar preconnect o dns-prefetch para establecer conexiones tempranas con orígenes de terceros importantes.

Cómo pasarlo

En nuestro caso no hemos implementado esta solución puesto que no tenemos ningún recurso de tercero crítico. Pero si fuera así, basta con incluir en el head de la aplicación la siguiente etiqueta:

<link rel="preconnect" href="https://example.com">

Hay que destacar que preconnect es sólo efectivo para recursos de terceros y no para recursos servidos desde tu propio servidor.

 

Y hasta aquí el primer post sobre como conseguir un 100% en Google Lighthouse. En el siguiente post explicaremos los siguientes 11 checks de la categoría performance.

Configuración de privacidad

Desde este panel puedes modificar la configuración de privacidad para habilitar o deshabilitar las cookies no exceptuadas de las que hace uso este sitio web:

Cookies técnicas (Exceptuadas)

Se utilizan para gestionar la configuración de privacidad establecida por el usuario en su dispositivo.

Cookies de preferencias (Exceptuadas)

Se utilizan para identificar a los usuarios logados en el sitio web, personalizar la visualización de la interfaz de administración y la interfaz principal de la web.

Cookies de análisis

Se utilizan para distinguir los usuarios únicos y las sesiones de un usuario para aportar información sobre cómo los usuarios interactúan con el contenido del sitio web.

Cookies de publicidad

Se utilizan para hacer un seguimiento de las ventas y de otras conversiones cuando el usuario hace clic en un anuncio o una ficha.