La porción de imágenes y videos en la carga útil típica de un sitio web puede ser significativa. Lamentablemente, es posible que las partes interesadas del proyecto no estén dispuestas a reducir los recursos de medios de sus aplicaciones existentes. Esos estancamientos son frustrantes, en especial cuando todas las partes involucradas desean mejorar el rendimiento del sitio, pero no pueden ponerse de acuerdo sobre cómo lograrlo. Afortunadamente, la carga diferida es una solución que reduce la carga útil inicial de la página y el tiempo de carga, pero no escatima en contenido.
¿Qué es la carga diferida?
La carga diferida es una técnica que aplaza la carga de recursos no esenciales en el tiempo de carga de la página. En su lugar, estos recursos no esenciales se cargan en el momento en que se necesitan. En lo que respecta a las imágenes, "no esencial" suele ser sinónimo de "fuera de pantalla". Si usaste Lighthouse y examinaste algunas oportunidades de mejora, es posible que hayas visto información en este dominio en forma de Aplazar la auditoría de imágenes fuera de pantalla:
Es probable que ya hayas visto la carga diferida en acción y se parece a lo siguiente:
- Llegas a una página y te desplazas a medida que lees el contenido.
- En algún momento, te desplazas por una imagen de marcador de posición en el viewport.
- La imagen de marcador de posición se reemplaza de repente por la imagen final.
Puedes encontrar un ejemplo de carga diferida de imágenes en la popular plataforma de publicación Medium, que carga imágenes de marcador de posición livianas durante la carga de la página y las reemplaza por imágenes de carga diferida a medida que se desplazan hacia el viewport.
Si no estás familiarizado con la carga diferida, es posible que te preguntes qué tan útil es esta técnica y cuáles son sus beneficios. ¡Sigue leyendo para descubrirlo!
¿Por qué usar la carga diferida de imágenes o videos en lugar de solo cargarlos?
Porque es posible que estés cargando contenido que el usuario nunca verá. Esto es un problema por dos razones:
- Se desperdician datos. En las conexiones no medidas, esto no es lo peor que podría suceder (aunque podrías estar usando ese valioso ancho de banda para descargar otros recursos que el usuario efectivamente verá). Sin embargo, en planes de datos limitados, cargar elementos que el usuario nunca ve podría ser una pérdida de dinero.
- Se desperdician tiempo de procesamiento, batería y otros recursos del sistema. Después de descargar un recurso multimedia, el navegador debe decodificarlo y renderizar su contenido en el viewport.
La carga diferida de imágenes y videos reduce el tiempo de carga inicial de la página, el peso inicial de la página y el uso de recursos del sistema, lo cual tiene un impacto positivo en el rendimiento.
Cómo implementar la carga diferida
Existen varias formas de implementar la carga diferida. La solución que elijas debe tener en cuenta los navegadores compatibles y, además, lo que intentas realizar la carga diferida.
Los navegadores actualizados implementan la carga diferida a nivel del navegador, que se puede habilitar con el atributo loading en iframes y imágenes.
Para proporcionar compatibilidad con navegadores más antiguos o realizar una carga diferida de elementos sin una carga diferida integrada, puedes implementar una solución con tu propio JavaScript.
También hay varias bibliotecas existentes que te ayudarán a hacerlo.
Consulta las publicaciones de este sitio para conocer todos los detalles de todos estos enfoques:
Además, compilamos una lista de posibles problemas con la carga diferida y aspectos que debes tener en cuenta en tu implementación.
Conclusión
Si se usan con cuidado, la carga diferida de imágenes y videos puede reducir significativamente el tiempo de carga inicial y las cargas útiles de páginas de tu sitio, incluidas las Métricas web esenciales. Los usuarios no generarán actividad de red innecesaria (incluida la contención de red en conexiones más lentas) ni costos de procesamiento de recursos multimedia que quizás nunca vean, pero aún pueden ver esos recursos si lo desean.
En lo que respecta a las técnicas de mejora del rendimiento, la carga diferida no presenta conflictos. Si tienes muchas imágenes intercaladas en tu sitio, es una forma perfecta de reducir las descargas innecesarias. ¡Los usuarios de tu sitio y los interesados en el proyecto lo agradecerán!