Constantemente escuchamos sobre la importancia de mantener los sitios web ágiles y rápidos. Un sitio web de carga rápida hace que los usuarios estén más satisfechos, y los usuarios satisfechos gastan más tiempo y dinero en su sitio web. Sin embargo, la optimización del sitio web es una tarea compleja, ya que no existe una bala de plata para solucionar todos los problemas que causan un rendimiento deficiente.
También escuchamos que abordar el rendimiento de las imágenes es una tarea fácil si desea mejorar la experiencia del usuario de su sitio. Sin embargo, cualquiera que se haya ensuciado las manos tratando de optimizar imágenes y cubrir los principales casos de uso y escenarios con imágenes sensibles de esta tarea se intensifica rápidamente. Para la mayoría de los sitios medianos a grandes, la optimización de imágenes no es una tarea adecuada para humanos. Esta es la razón por la que existen las redes de entrega de contenido de imágenes (CDN).
Una imagen CDN es, de hecho, una red de entrega de contenido construida especialmente para imágenes. Tal como sugiere el nombre. Entonces, ¿por qué necesitaríamos un CDN especial para servir imágenes? ¿Por qué no usar un CDN regular para servir archivos estáticos? La respuesta corta es que las imágenes no son archivos estáticos…
La mayoría de las CDN de imágenes tratan una imagen como contenido dinámico al optimizar la imagen de diferentes maneras según el contexto en el que se consume la imagen.
Explicado un poco diferente; si está utilizando imágenes receptivas en su sitio web, un cdn de imagen generará automáticamente los derivados de la imagen de acuerdo con los tamaños especificados en el marcado, generalmente en función de algunos parámetros de URL. Por ejemplo, el siguiente código selecciona entre 3 derivados especificados en el atributo srcset en función de 3 puntos de interrupción:
<img src="https://i.foo.com/image.jpg" alt="cat"
>De esta forma, el desarrollador o diseñador no tiene que preocuparse por crear todas las versiones de la imagen de antemano. Lo cual es una muy buena noticia, porque la cantidad de imágenes derivadas puede crecer exponencialmente rápidamente en función de muchos puntos de ruptura, formatos de imagen y resoluciones de pantalla. Y eso es antes de que empecemos a hablar de dirección de arte.
Optimización dinámica de imágenes en piloto automático
Ahora que hemos visto cómo una imagen CDN puede crear diferentes tamaños de una imagen sobre la marcha, examinemos cómo esto mejora el rendimiento web.
Antes de continuar con la elección de una CDN de imagen para los ejemplos posteriores, es importante señalar la diferencia entre una CDN de imagen y una herramienta de gestión de activos digitales (DAM). Un DAM, como Cloudinary, se enfoca principalmente en el aspecto de administración de archivos y, a menudo, le permite editar imágenes y aplicar filtros de dirección de arte. Por lo general, estos DAM necesitan un CDN de propósito general al frente y hay poco soporte para la automatización de tareas de optimización de imágenes.
En el extremo opuesto de la escala está ImageEngine. ImageEngine es la CDN de imágenes más eficaz del mercado gracias a su detección de dispositivos integrada que permite una optimización de imágenes superior para el tráfico móvil. Dado que los dispositivos móviles representan más del 50 % del tráfico en muchos países, ImageEngine realmente tiene una ventaja sobre otras CDN. Mientras que la mayoría de los demás CDN de imágenes solo ofrecen poca o ninguna optimización automática, ImageEngine tiene un enfoque más avanzado gracias a su enfoque en el tráfico móvil. Por lo tanto, ImageEngine podrá producir los mejores resultados con menos esfuerzo de implementación y mantenimiento.
Cómo ImageEngine mejora el rendimiento web
Con ImageEngine manejando todo el tráfico de imágenes, las imágenes ya no son contenido estático. Las imágenes ahora se adaptan y sirven exactamente en el tamaño, formato, tasa de compresión y resolución necesarios. Multa. Pero, ¿cómo medimos la mejora?
En estos días, la “herramienta de acceso” para identificar problemas de rendimiento y medir el rendimiento es Google Lighthouse. Lighthouse está disponible como aplicación independiente y en las herramientas para desarrolladores de Chrome.
Realizaremos una auditoría de rendimiento en una página de demostración de comercio electrónico que enumera imágenes de productos.
La página tiene un diseño de cuadrícula receptivo típico con imágenes de productos. El diseño tiene algunos puntos de interrupción donde el tamaño de visualización de las imágenes cambia debido a que cambia la cantidad de elementos por fila. Además, hay una función de pasar el mouse que muestra una imagen diferente del producto. El efecto del mouseover es manejado por JavaScript e incluso la imagen oculta siempre se carga en nuestro ejemplo. Entonces, en general, bastantes imágenes y tamaños potenciales.
Paso uno: evaluar el estado actual
Al ejecutar la auditoría de Lighthouse en la página de demostración, vemos una serie de problemas, resumidos en una puntuación de rendimiento de 98. La mejor puntuación es 100, por lo que 98 puede no parecer tan malo. Lo cual es cierto, pero preste más atención a las métricas debajo del puntaje. La puntuación de rendimiento se calcula en función de algunas métricas con una ponderación variada. Las imágenes de nuestra página tienen un impacto directo e indirecto en estas métricas.
En los detalles del informe, vemos algunas oportunidades relacionadas con las imágenes enumeradas:
- Imágenes del tamaño adecuado. Las imágenes no tienen el tamaño de píxel adecuado. Esto es bastante común en páginas con un diseño sensible o fluido.
- Sirve imágenes en formatos de última generación. Para Chrome, esto básicamente significa convertir imágenes a webp. Por lo general, webp es un formato más eficiente que la mayoría de los demás cuando se trata de tamaño de byte y velocidad de decodificación.
- Codifique imágenes de manera eficiente. Se puede aplicar más compresión a las imágenes antes de afectar la calidad visual percibida.
Los ahorros estimados (a la derecha del informe) son enormes. Esto demuestra por qué el direccionamiento de imágenes se considera una fruta al alcance de la mano para el rendimiento.
Si aún no se ha registrado, cree una cuenta de prueba gratuita de ImageEngine. Una vez que haya completado el registro, puede definir el origen de la imagen (generalmente su sitio web) y un dominio desde el que desea servir las imágenes. La imagen puede ser algo así como imágenes.midominio.com. Apunta este nombre de dominio a ImageEngine con un registro CNAME en su DNS, y está listo para comenzar.
El siguiente paso es cambiar el marcado para aprovechar al máximo las funciones automáticas de ImageEngine.
Si nuestra etiqueta de imagen anterior se viera así:
<img class="pic-1" src="https://css-tricks.com/images-are-not-static-content/images/demo9/img-1.jpg">Nuestra nueva etiqueta de imagen se verá así cuando el nombre de dominio de ImageEngine sirva las imágenes:
<img class="pic-1" src="https://images.mydomain.com/images/demo9/img-1.jpg">Debido a que nuestro diseño de cuadrícula es fluido con 4 puntos de interrupción, también podríamos considerar usar la sintaxis de imágenes receptivas:
<img
class="pic-1"
src="https://images.mydomain.com/images/demo9/img-1.jpg"
sizes="(max-width: 576px) 93vw,
(max-width: 768px) 238px, (max-width: 768px) 238px,
(max-width: 992px) 148px, 253px"
>Gracias a la compatibilidad de ImageEngine con las sugerencias del cliente, ImageEngine ahora generará el tamaño de píxel exacto que se necesita. Las sugerencias del cliente son encabezados HTTP adicionales que el navegador puede enviar para habilitar un cambio de tamaño de imagen más preciso. Actualmente, las sugerencias de clientes solo son compatibles con los navegadores Chrome.
Paso tres: medir la mejora
Al ejecutar la auditoría de Lighthouse nuevamente, vemos que el puntaje ahora es 100. Pero lo que es más importante, mire las mejoras en los tiempos. “Tiempo para interactivo”, por ejemplo. 0,7 segundos menos de espera del usuario para interactuar con la página. Todo porque las imágenes están optimizadas correctamente.
¿Qué significa realmente “optimizado” en este caso? ¿Por qué la página es más rápida y la experiencia del usuario es mejor con ImageEngine? La mayor parte del impacto positivo se debe a la reducción del tamaño de byte de las imágenes. Cuantos menos bytes, más rápidas se transfieren las imágenes desde el host (o los servidores perimetrales de ImageEngine) al navegador. Además, las imágenes más claras suelen ser más rápidas de decodificar y representar en la pantalla de los usuarios. Esto está muy simplificado, pero veamos cuánto reduce ImageEngine la carga útil de la imagen usando WebPageTest.org para comparar nuestro sitio de demostración con y sin ImageEngine:
ImageEngine reduce la carga útil de la imagen a solo el 25 % del tamaño original.
Bonificación: arreglar el almacenamiento en caché
En la búsqueda continua de un mejor rendimiento, es posible que haya visto esta alerta de Lighthouse.
Lighthouse cree que las imágenes tienen un tiempo de vida (TTL) demasiado corto, medido en segundos, en el caché del navegador. De forma predeterminada, ImageEngine transmite las directivas de caché proporcionadas por el origen, pero afortunadamente esto se puede cambiar en la interfaz de administración de ImageEngine.
Siguiente paso: Automatizar la optimización de imágenes
Hemos visto cómo las imágenes ya no deben ser tratadas como contenido estático si queremos un sitio web de alto rendimiento. Debido a que las imágenes tienen un impacto tan alto en el rendimiento del sitio web, las imágenes deben adaptarse de acuerdo con las capacidades y el contexto del navegador y del usuario.
Una CDN de imágenes especialmente diseñada liberará a los humanos de la responsabilidad de tratar de acomodar todas las combinaciones posibles de formatos de imagen, tamaños y niveles de compresión. La gestión de derivados de imágenes no es una tarea para humanos, ya que crecerá rápidamente hasta volverse inmanejable.
El uso de herramientas como Lighthouse y WebPageTest.org documenta el impacto positivo que tienen las CDN de imágenes como ImageEngine en importantes métricas de rendimiento.