Google lleva años invitando a los usuarios a considerar también el factor de rendimiento y, con el tiempo, ha demostrado que se está moviendo cada vez más en esta dirección brindándonos herramientas, guías y tutoriales, y actualizando paulatinamente las pautas de rendimiento que se aplicarán en los sitios. En 2015/2016 apareció el Proyecto AMP objetivo de acelerar el uso de noticias desde dispositivos móviles.
A continuación se muestran las herramientas de medición del rendimiento de Pagespeed Insights yGoogle Lighthouse.
¡Es precisamente por estas dos herramientas que estamos aquí para escribir este artículo!. El año pasado los parámetros para tener un sitio «rápido» (donde «rápido» significa que el puntaje de Pagespeed está en la zona verde) fueron más permisivos y con las implementaciones correctas fue posible obtener resultados más que satisfactorios. En 2018, se revisaron los umbrales para verificar la velocidad y muchos se encontraron con sitios etiquetados como «lentos» con una puntuación insatisfactoria en rojo tanto para móvil como para desktop.
Entre los cambios realizados para verificar el rendimiento de un sitio web, hay uno que ha creado varios dolores de cabeza y «miedos» para los webmasters: las imágenes en formatos de próxima generación.
Cualquier web, incluso aquellos que se optimizaron adecuadamente, vio aparecer la línea fatídica después de la actualización de Lighthouse que indica que el uso de formatos de imagen antiguos afectó los tiempos de carga durante 1 o más segundos . En este artículo te explico cómo he superado el problema de las imágenes para alcanzar un excelente rendimiento de velocidad .
¿Qué es el formato Next-Gen?
Con Next-Gen indican formatos de imagen (JPEG 2000, JPEG XR, WebP) que, manteniendo la misma calidad que los formatos anteriores (jpg y png), son de tamaño reducido y por tanto más rápidos de cargar.
Entre los formatos de próxima generación , WebP se considera el de mejor rendimiento pero, por el momento, no es compatible con todos los navegadores.
¿Qué es el formato WebP?
El formato WebP es un formato de imagen reciente que garantiza una mayor compresión de imagen al tiempo que conserva una calidad similar. Además, entre las características que los hacen especialmente apreciados, está el soporte de transparencia que permite obtener unarchivo 3 veces más pequeño que el PNG correspondiente.
Al ser un formato no soportado por todos los navegadores, la implementación de imágenes en formato WebP es más difícil ya que para cada imagen, a nivel de código, tanto el formato WebP para los navegadores más modernos como el formato original (JPG o PNG) para quienes navegan con navegadores que no soportan estos nuevos formatos.
¿Qué importancia tienen las imágenes para la velocidad del sitio?
La falta de uso de imágenes de próxima generación afecta los tiempos de carga durante 1.05 s (más de un segundo). Teniendo en cuenta que una investigación reciente muestra que el 53% de los visitantes móviles abandonan un sitio que tarda más de 3 segundos en cargarse, ese segundo de «retraso» podría hacernos perder muchas oportunidades.
¿Cómo implementar formatos de próxima generación en WordPress?
Para implementar imágenes en formato Next-Gen en su sitio web, existen varios métodos que implican más o menos trabajo para lograr el resultado deseado.
En este artículo hablaré sobre cómo integrar imágenes en formato WebP en WordPress usando un plugin dedicado, además de algunos trucos que te mostraremos.
WebP Express – Plugin para WordPress
Bjørn Rosell, el autor de este complemento, debió estar cansado de ver la falta de uso de imágenes de próxima generación marcadas en rojo en Lighthouse, por lo que decidió escribir un complemento que resolviera este problema. Y lo hizo muy bien.
WebP Express básicamente tiene 2 características fundamentales :
- Una herramienta que utiliza las bibliotecas de procesamiento de imágenes más comunes para convertir imágenes de WordPress pasadas y futuras al WebP correspondiente
- Un sistema para reemplazar el código correcto en la plantilla para mostrar la imagen en el formato adecuado, dependiendo del navegador utilizado por el usuario
Cómo configurar WebP Express
Una vez instalado el plugin encontraremos su panel de configuración en «Configuración -> WebP Express» desde el cual podremos configurar diferentes aspectos que vemos a continuación.
- Modo de operación : le permite elegir cómo administrar las imágenes en formato Next-Gen, es decir, a través de CDN, convertirlas sobre la marcha, enviar la imagen webp directamente, etc.
- General : le permite indicar en qué formato de imagen aplicar el reemplazo con WebP y si desea guardar las imágenes convertidas en una carpeta separada;
- Regla de redireccionamiento : le permite establecer las reglas de redireccionamiento para decidir si, cuando no tenemos la imagen en WebP, mostramos el formato anterior o lo convertimos sobre la marcha ;
- Conversión : le permite indicar qué biblioteca de gráficos usar para la conversión, la calidad de la imagen y si se deben conservar los metadatos. También le permite configurar la conversión automática de nuevas imágenes cargadas en WordPress, mientras que utilizando la función Bulk Convert puede transformar todas las imágenes anteriores en WebP;
- Alter HTML – Nos permite indicar qué método queremos usar para reemplazar imágenes en nuestro WordPress. Dependiendo de la elección, hay algunas ventajas y desventajas que se resumen en esta tabla:
Riesgos y qué saber sobre WebP Express
Como todos los complementos de WordPress, WebP Express intenta proporcionar una solución a la implementación de formatos de imagen de próxima generación, pero no se excluye que, junto con configuraciones o personalizaciones particulares de WordPress, pueda producir errores.
Por lo tanto debe realizar una copia de seguridad de Ftp y de la base de datos antes de continuar con la implementación de WebP Express.
La otra cosa a saber es que actualmente, en los hosting compartido más populares, es difícil encontrar bibliotecas gráficas que admitan los nuevos formatos Next-Gen: por lo tanto, es posible que deba solicitar al proveedor de Hosting la instalación de una de las bibliotecas compatibles con el complemento. .
Además, Google Mod_Pagespeed está instalado en mi Hostings, un módulo que le permite aplicar numerosas optimizaciones de rendimiento directamente en el lado del servidor. Entre las diversas funciones, es posible configurar que el servidor convierta directamente las imágenes JPG y PNG al nuevo WebP de próxima generación durante el procesamiento de la página.
Resultados de velocidad del sitio con Pagespeed y Lighthouse
Después de todas estas palabras, querrá saber cuál fue el impacto real en términos de rendimiento y puntuación.
En Google Pagespeed Insights los valores son muy diferentes entre Mobile (71) y Desktop (99) pero yo diría que el resultado, por ahora, es más que satisfactorio.
Si, por otro lado, siempre prueba con Lighthouse sin seleccionar «Borrar almacenamiento», es decir, utilizando la interpretación correcta del almacenamiento en caché del navegador, el resultado será el siguiente:
Enlaces adicionales
- AMP – Wikipedia AMP
- Google Pagespeed Insights : herramienta para medir la velocidad de un sitio web
- Google Lighthouse : herramienta para comprobar el rendimiento de sitios web y aplicaciones
- Imagen de próxima generación : página de documentación sobre imágenes de próxima generación
- WebP – Página oficial del formato de imagen WebP
- mod_pagespeed – sitio oficial de Mod Pagespeed