Carga Diferida (Lazy Loading)

La carga diferida retrasa la carga de recursos hasta que sean necesarios, generalmente retrasando la carga de imágenes, iframes y componentes hasta que se acerquen al área visible de la pantalla. El objetivo es reducir el trabajo necesario para renderizar la vista inicial, de modo que el contenido que un visitante ve inmediatamente no compita por el ancho de banda y el procesamiento con contenido que se encuentra mucho más abajo en la pantalla y que podría no llegar a visualizarse nunca.

Esta técnica se ha simplificado para imágenes e iframes, donde un atributo nativo del navegador se encarga de ello sin necesidad de JavaScript. El navegador decide cuándo comenzar la carga en función de la proximidad a la ventana gráfica y las condiciones de conexión. Para componentes y rutas, la división de código logra un efecto equivalente al aplazar la carga de paquetes JavaScript hasta que se visita una ruta o se utiliza una función, lo que puede reducir considerablemente la cantidad de código que debe descargarse y ejecutarse antes de que una página sea interactiva.

El error más común y perjudicial es aplicarlo indiscriminadamente, incluso al contenido visible inicialmente. La carga diferida de la imagen principal retrasa precisamente el elemento que determina la mayor cantidad de contenido visible, y produce un resultado peor que no aplicar la técnica en absoluto. El patrón correcto es cargar el contenido visible sin necesidad de desplazarse, idealmente con una sugerencia de prioridad, y diferir solo lo que realmente se encuentra debajo del pliegue. La aplicación generalizada mediante un plugin o una configuración global es la razón por la que los sitios web terminan con peores métricas de carga después de implementar una optimización de rendimiento.

La estabilidad del diseño es la segunda consideración. Las imágenes diferidas que llegan sin espacio reservado provocan que el contenido se desplace durante la carga, lo que convierte una mejora en la carga en un problema de inestabilidad visual. Las dimensiones o relaciones de aspecto explícitas de cada elemento diferido son imprescindibles, y un marcador de posición que ocupe el espacio correcto es lo que hace que la carga diferida sea imperceptible para el usuario, en lugar de simplemente más rápida.

Hay casos en los que esta técnica resulta inapropiada. El contenido que debe estar presente para que los motores de búsqueda lo indexen correctamente, las páginas imprimibles donde todo debe renderizarse y las interfaces donde los usuarios se desplazan rápidamente por largas listas se ven afectadas por un retraso excesivo en la carga. En este último caso, las imágenes que se cargan solo al acercarse a la ventana gráfica llegan demasiado tarde para un usuario que se desplaza rápidamente, lo que genera una serie de marcadores de posición vacíos; por lo tanto, se requiere un margen de carga mayor o una estrategia diferente.

Una consideración relacionada es qué sucede cuando falla el aplazamiento. Si las imágenes se cargan únicamente mediante JavaScript que no se ejecuta debido a un error, un script bloqueado o un navegador sin soporte, la página se muestra sin imágenes y no hay una alternativa. El aplazamiento nativo del navegador evita esto por completo, razón por la cual debería preferirse a las implementaciones basadas en scripts siempre que sea suficiente. Cuando se requiere un enfoque basado en scripts, proporcionar una alternativa que cargue el contenido cuando el mecanismo no esté disponible supone un pequeño esfuerzo que previene un tipo de fallo que pasa desapercibido en las pruebas habituales y afecta a una pequeña pero real proporción de visitantes.

Aplicada con criterio, la postergación es una de las técnicas más efectivas disponibles para páginas con contenido sustancial debajo del pliegue, lo que describe la mayoría de los listados de productos, artículos y páginas de marketing largas. En la práctica, es un componente de una estrategia de carga más amplia abordada en rendimiento web trabajo, junto con el formato y el tamaño de la imagen, la priorización de recursos y la estructura del paquete, y su impacto es mayor en Si el comercio electrónico contextos en los que las páginas de categorías contienen docenas de imágenes y los visitantes que acceden desde dispositivos móviles asumen el coste total de cargarlas todas a la vez.