Lazy Loading - ¿Qué hay detrás?

Las estrategias de Lazy Loading parecen, a primera vista, una buena idea, ya que permiten mejorar de forma notable el rendimiento de los sitios web. Sin embargo, con volúmenes de acceso elevados, las estrategias de Lazy Loading también pueden presentar inconvenientes. En nuestro artículo explicamos de forma exhaustiva cómo implementar estrategias de Lazy Loading y qué posibles desventajas pueden contraponerse a sus ventajas.

Ventajas de rendimiento mediante Lazy Loading

El tiempo de carga de un sitio web debe ser lo más corto posible: eso aporta varias ventajas decisivas. Como estrategia para acortar el tiempo de carga de los sitios web, el Lazy Loading resulta especialmente útil.

Además de optimizar exclusivamente los tiempos de carga de un sitio web, para el rendimiento global siempre hay que tener en cuenta y optimizar en la medida de lo posible la Server Response Time (SRT). También debe asegurarse previamente, por supuesto, un tamaño de caché suficiente y el uso de medios de almacenamiento SSD o NVMe rápidos.

Un tiempo de carga reducido conlleva una gran cantidad de ventajas:

Experiencia de usuario, ingresos y fidelización de clientes

El tiempo de carga de una página web juega un papel muy importante en la experiencia de usuario: en sitios con tiempos de carga comparativamente largos, muchos usuarios suelen impacientarse y abandonan para ir al siguiente resultado de búsqueda. Como visitantes de tu propia web, estos usuarios se pierden, por lo que un rendimiento deficiente puede perjudicar considerablemente tanto el número de visitas como la tasa de conversión.

Mejor posicionamiento

Al mismo tiempo, la velocidad de carga (Pagespeed) es un factor de posicionamiento que no debe subestimarse: Google quiere ofrecer a los usuarios la experiencia más satisfactoria posible al buscar información —de forma análoga a la percepción del usuario, las páginas con tiempos de carga especialmente cortos suelen obtener claras ventajas en el posicionamiento. Los tiempos de carga en móvil y en escritorio se miden siempre por separado. Cuando mediante desarrollo de software se reducen los tiempos de carga, no es raro que el posicionamiento mejore considerablemente.

Menores costes publicitarios

Además de las ventajas de posicionamiento, el tiempo de carga también desempeña un papel importante en la propia publicidad de Google Ads: los tiempos de carga largos afectan negativamente al factor de calidad en Google Ads - y con ello implícitamente también al precio por clic. En páginas con tiempos de carga elevados, la publicidad de Google Ads para sitios web puede, por tanto, resultar considerablemente más cara. Además, hay que tener en cuenta que los usuarios son igual de impacientes al hacer clic en enlaces de anuncios que al abrir páginas web desde las SERPs: tras unos pocos segundos de carga abandonan y ya no visitan la página. El coste del clic conduce así a un número de visitantes claramente inferior - se desperdicia el presupuesto publicitario de forma bastante imprudente. Mediante un desarrollo de software adaptado y, en su caso, estrategias de Lazy Loading, a menudo se puede ahorrar mucho dinero y ganar eficiencia publicitaria.

Rastreo más rápido

Google asigna a cada dominio un determinado "crawling budget". Solo durante este lapso de tiempo asignado el bot rastrea el sitio. Cuanto más lenta sea la carga, menos páginas se rastrean en total. Por ello también tarda mucho más en que todas las subpáginas o los cambios aparezcan en el índice de Google.

Estrategias de Lazy Loading para reducir los tiempos de carga

Fundamentalmente, el Lazy Loading tiene como objetivo mejorar el PageSpeed y la velocidad del servidor, es decir, reducir la duración del tiempo de carga. Esto se consigue haciendo que los objetos no estrictamente necesarios en la página (p. ej., imágenes y gráficos) solo se carguen cuando el usuario probablemente los necesite. Los objetos que están "below the fold" - es decir, fuera del área visible para el usuario - se cargan únicamente cuando el usuario hace scroll hasta ellos. Otros contenidos, como el contenido dinámico dentro de una página estática, también se cargan solo cuando el usuario probablemente vaya a visualizarlos.

La carga diferida, a diferencia de la carga completa, permite cargar únicamente los datos que se necesitan y solo cuando se necesitan. De este modo, con muchos visitantes se cargan cantidades de datos claramente menores y el rendimiento aumenta. También se evita de forma eficaz la carga continua de más datos, hasta auténticas cascadas de datos.

Opciones para implementar la carga diferida

En el ámbito del desarrollo de software se han creado en los últimos años cada vez más posibilidades técnicas para implementar estrategias de carga diferida. En ciertos casos, mediante desarrollo propio es posible adaptar o ampliar individualmente funcionalidades ya existentes.

Las posibilidades ampliamente extendidas y bien conocidas son:

• Definición de objetos añadiendo los atributos loading "eager" o "auto" (lazy loading nativo, especialmente en imágenes e iframes)
• Uso de un plugin específico de WordPress
• Uso de IntersectionObserver (p. ej. en animaciones)
• Carga de contenidos solo en la inicialización (consulta o modificación)
  Uso de proxies virtuales (un objeto con el mismo aspecto actúa como "marcador de posición" en el lugar correcto; la carga de datos se inicia solo al utilizar el objeto)
• Uso de Ghosts (como proxy virtual, pero ya utilizable de forma limitada incluso sin cargar datos)
• Value Holder (objeto marcador de posición que gestiona la obtención de datos para objetos de datos)

Una estrategia importante es también el code-splitting, que puede aplicarse en JavaScript, CSS y HTML. El código se divide en partes más pequeñas; inicialmente solo se cargan las partes estrictamente necesarias, y el resto se carga posteriormente bajo demanda.

Desventajas de las estrategias de carga diferida

Como se mencionó al principio, en las estrategias de carga diferida también deben tenerse en cuenta algunas posibles desventajas, que mediante desarrollo de software no siempre pueden compensarse o solo pueden mitigarse de forma limitada.

El contenido principal no es indexado por Google

Como "Contenido primario" se denominan aquellos contenidos que solo se muestran cuando se produce una acción por parte del usuario, por ejemplo elementos adicionales al final de una lista que solo se cargan cuando el usuario ha hecho scroll hasta allí.

Ese tipo de contenidos, en principio, no pueden ser rastreados por Googlebot, por lo que tampoco se registran. Eso puede, en determinadas circunstancias, provocar problemas considerables en la correcta indexación de los sitios web.

Los tiempos de carga de las imágenes con frecuencia se reducen insuficientemente

Para cargar imágenes mediante estrategias de carga diferida es necesario primero cargar un script correspondiente (a menudo bastante grande) para que los datos lleguen al mecanismo de carga diferida. En algunos casos la carga del script puede incluso tardar más que la propia carga de las imágenes. Una ventaja real en los tiempos de carga suele producirse únicamente cuando se van a cargar muchas imágenes muy grandes.

Por el contrario, cuando hay un gran número de imágenes y vídeos en HD, a menudo resulta más conveniente plantearse el uso de una Redes de entrega de contenido (CDN).

Posibles problemas en la construcción de páginas web y rechazo por parte de los usuarios

Incluso con un desarrollo de software cuidadoso, el uso de la carga diferida puede ocasionar de vez en cuando problemas en la construcción de las páginas web. Además, los usuarios a menudo se sienten molestos por las funcionalidades de carga diferida y abandonan dichas páginas web o son mucho más reticentes a comprar o a valorar el sitio. Esto, a su vez, tiene consecuencias negativas acumuladas sobre los ingresos, la fidelización de clientes (compra repetida), la tasa de rebote o la recomendación del sitio web.

Otro problema surge especialmente con la inclusión de JavaScript cuando la configuración del navegador del usuario no permite scripts. En ese caso suele producirse una experiencia de usuario negativa.

Con una estructura de página poco adecuada, además, con frecuencia no es posible la navegación hacia atrás.

Función limitada de los píxeles de seguimiento

También hay que tener en cuenta que, sin medidas adicionales, todos los píxeles de seguimiento solo se cargarán cuando entren en el área visible. No obstante, esto puede evitarse en el desarrollo del software mediante contramedidas adecuadas (atributo eager o definición de clases y exclusión mediante JavaScript).

Si no se hace, no es posible registrar correctamente los valores de rendimiento (clics, conversiones, etc.).

Problemas de carga

La carga diferida conduce, por un lado, a una notable complicación del código y a la inclusión de scripts y librerías externas, en ocasiones voluminosas, lo que a su vez puede alargar los tiempos de carga.

Hay que tener en cuenta que el Lazy Loading suele ser eficaz para reducir el número de consultas, pero a su vez expone las fuentes de datos a un gran número de consultas individuales. Esto supone un problema especialmente grave para las bases de datos, cuyo funcionamiento está optimizado para devolver resultados completos con pocas consultas. Un elevado número de consultas individuales puede sobrecargar con frecuencia las bases de datos, sobre todo con un alto volumen de accesos (el llamado problema SELECT N+1). Asimismo, la estructura de la red suele verse excesivamente cargada por un gran número de consultas individuales.

Este aspecto debe contemplarse en el desarrollo de software y en la planificación de estrategias de Lazy Loading para evitar la sobrecarga de las fuentes de datos y, por ende, nuevos retrasos en los tiempos de carga (p. ej., el uso de un balanceador de carga).

Crédito de la imagen: Gerd Altmann en Pixabay