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.