¿Qué es la carga diferida y cómo mejora la experiencia del usuario?

Si hay un aspecto de un sitio web que la mayoría de los propietarios de sitios web ignoran, es el tiempo de carga de la página. Inviertes mucho tiempo y dinero en conseguir el diseño perfecto para nuestro sitio web y agregar diferentes tipos de contenido para mantener a los visitantes interesados. ¿Pero qué pasa si eso no es suficiente para convertir a tus visitantes en usuarios?

Los estudios demuestran que por cada segundo adicional que tarda su sitio web en cargarse, disminuye la posibilidad de convertir a un visitante en cliente. Según Portent , la probabilidad de conversión es del 40% al segundo de carga, mientras que cae al 34% al siguiente y al 29% al cabo de tres segundos. Quizás se pregunte: "¿Cuál es entonces la solución?"

Y ahí es donde entra en juego el concepto de Lazy Loading. Es una forma más rápida de cargar su sitio web sin sacrificar la calidad de su contenido.

En este artículo, exploraremos la carga diferida, por qué usarla y cómo se compara con otros métodos. ¡Entremos en ello!

Tabla de contenido

• ¿Qué es la carga diferida?
• La importancia de la carga diferida
• Carga ansiosa versus carga diferida
• Cómo funciona la carga diferida
• Implementando carga diferida

¿Qué es la carga diferida?

La carga diferida es una forma de ahorrar tiempo al cargar solo las partes de un sitio web que necesita de inmediato. En lugar de cargar todo a la vez, lo que puede ser lento y consumir muchos recursos, este método carga el contenido poco a poco.

Las imágenes o vídeos que no se cargan inmediatamente suelen tener elementos de marcador de posición hasta que se necesitan. Por ejemplo, Lazy Loading no carga todas las imágenes a la vez. Solo carga los que puedes ver en tu pantalla. El resto no se cargará hasta que te desplaces hacia abajo.

En lugar de esperar a que se cargue todo, puedes ver lo que ya está en la pantalla de inmediato.

Consejo de experto: compruebe qué tan bien funciona la carga diferida en varios navegadores y dispositivos.Esto es para asegurarse de que no haya problemas de compatibilidad.

La importancia de la carga diferida

Ya sabemos que Lazy Loading puede ayudarte a aumentar la conversión. Pero ese no es el único beneficio que tiene. Aquí hay algunas otras razones por las que debería implementar Lazy Loading en su sitio web.

Optimizar el rendimiento

La carga diferida reduce las transferencias de datos cuando alguien visita su sitio web. Esto es clave para las personas que utilizan dispositivos móviles con Internet lento y planes de datos pequeños.

Reducir el ancho de banda y la carga del servidor

La carga diferida ahorra datos y reduce el trabajo del servidor. Esto reduce los costos para los propietarios y usuarios de sitios web al detener la carga de contenido cuando no es necesario.

Mejorar el SEO

Los motores de búsqueda como Google dan tanta prioridad a los sitios web de carga rápida que es un factor de clasificación oficial. Con la técnica de carga diferida, puede aumentar la velocidad de carga de su página, reducir la tasa de rebote y llevar su sitio web a una clasificación más alta.

¿Qué es la carga ansiosa?

La carga ansiosa es exactamente lo opuesto a la carga diferida. Inicialmente carga todos los recursos necesarios a la vez, incluidos archivos multimedia, scripts y estilos. Esto significa que todos los elementos necesarios de la página están disponibles inmediatamente. Por lo tanto, no hay carga adicional cuando los usuarios se desplazan o interactúan.

La carga ansiosa era el método convencional utilizado en el pasado y muchos sitios web todavía lo utilizan en la actualidad.

Aunque es fácil de implementar, la carga inmediata se ha vuelto menos relevante debido a varios factores, entre ellos:

Aumento del tamaño de la página web

Los sitios web modernos utilizan medios más ricos y partes interactivas. Esto significa que la página web promedio es mucho más grande que antes. Por lo tanto, una carga ansiosa puede resultar en tiempos de carga de la página inicial más prolongados. Especialmente para usuarios con conexiones a Internet más lentas.

Impacto negativo en el rendimiento.

Los tiempos de carga de página más prolongados pueden perjudicar medidas importantes de rendimiento del sitio web , como First Contentful Paint (FCP) y Largest Contentful Paint (LCP). Estos son clave para el SEO y la experiencia del usuario.

Aumento de los usuarios de dispositivos móviles

Con el uso masivo de la navegación móvil, lograr que las cosas se carguen súper rápido desde el principio se ha vuelto crucial.

Carga ansiosa versus carga diferida

Aquí hay una comparación rápida de Eager Loading y Lazy Loading:

La carga diferida y la carga ansiosa son dos métodos diferentes de carga de recursos con sus propios pros y contras. Sin embargo, desde la perspectiva tecnológica actual, Lazy Loading se considera la técnica preferida para la mayoría de los sitios web modernos debido a su eficiencia, beneficios de rendimiento y mejor experiencia de usuario.

Cómo funciona la carga diferida

Ahora que sabes por qué Lazy Loading garantiza mejores resultados entre los dos, echemos un vistazo a cómo lo logra.

Navegación e interacción del usuario : la carga diferida depende de cómo los usuarios usan la página web.A menudo comienza cuando los usuarios se desplazan o mueven el mouse. A medida que se desplazan, el navegador adivina que se necesita contenido nuevo en el área que pueden ver. Luego comienza a cargar esos recursos. La carga diferida también puede comenzar con otras acciones, como hacer clic en un botón o pasar el cursor sobre un elemento.

Implementación técnica para imágenes : Lazy Loading funciona de manera diferente para diferentes tipos de contenido.Para las imágenes, que son muy comunes, normalmente se comienza mostrando un marcador de posición de baja calidad o un simple icono de carga. Cuando el usuario se desplaza cerca de la imagen real, se carga la imagen clara y de alta calidad. De esta manera, los usuarios no esperan imágenes que aún no pueden ver.

Aplicación de diferentes recursos web : la carga diferida es un método flexible que se puede utilizar para varios elementos, no solo imágenes.Funciona igualmente bien para vídeos, iframes e incluso elementos que requieren muchos guiones. Cargar estos elementos solo cuando sea necesario significa que puede mejorar en gran medida la velocidad de carga de su página y administrar sus recursos de manera eficiente. Esto es especialmente crucial para recursos pesados, como videos de alta definición.

Implementación de carga diferida

En esta parte, le mostraremos las diferentes formas de implementar Lazy Loading en su sitio web.

Método 1 : implementar manualmente la carga diferida

La forma manual de implementar Lazy Loading no es para todos. Es complejo y al menos deberías tener un conocimiento intermedio de codificación.

Para hacer esto, utilizará principalmente HTML y JavaScript. Antes de comenzar, asegúrese de tener acceso a los archivos de temas de su sitio de WordPress y de sentirse seguro para editar HTML y JavaScript.

Aquí hay una guía detallada para ayudarlo durante el proceso:

Paso 1 : haga una copia de seguridad de su sitio

Siempre haga una copia de seguridad de su sitio de WordPress antes de realizar cambios en los archivos del tema para evitar perder datos si comete un error.

Paso 2 : edite el archivo funciones.php del tema

• Acceda a los archivos de su sitio de WordPress (usando un cliente FTP o un Administrador de archivos en su panel de control de alojamiento).
• Navegue hasta /wp-content/themes/your-theme/ y busque el archivo funciones.php .
• Abra funciones.php para editar.

Paso 3 : agregue el script de carga diferida

En funciones.php , agregue una función para poner en cola un archivo JavaScript para carga diferida. Aquí hay un ejemplo básico:

función add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), nulo, verdadero);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Este código supone que tiene un archivo JavaScript llamado lazy-load.js en una carpeta js dentro de su directorio de temas.

Paso 4 : crea el archivo JavaScript

• Cree un nuevo archivo llamado lazy-load.js en la carpeta js de su directorio de temas.
• Agregue JavaScript para manejar la carga diferida. Aquí hay un ejemplo básico usando IntersectionObserver :

document.addEventListener(“DOMContentLoaded”, función() {

let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (“IntersectionObserver” en la ventana) {

let lazyImageObserver = new IntersectionObserver(función(entradas, observador) {

entradas.forEach(función(entrada) {

si (entrada.isIntersecting) {

let lazyImage = entrada.objetivo;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove(“perezosa”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

imágenes perezosas.forEach (función (imagen perezosa) {

lazyImageObserver.observe(lazyImage);

});

}

});

Paso 5 : actualiza tus etiquetas de imágenes en WordPress

Modifique las etiquetas de sus imágenes para admitir la carga diferida. En sus plantillas PHP o directamente en sus publicaciones/páginas, cambie sus etiquetas de imagen de la siguiente manera:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”descripción de la imagen”>

Reemplace placeholder-image.jpg con una imagen de baja resolución o un gráfico de carga, y original-image.jpg con la URL de la imagen real.

Consejo de experto: utilice marcadores de posición responsivos para imágenes cargadas de forma diferida para garantizar que el diseño permanezca estable.

Paso 6 : prueba tus cambios

• Si tiene instalado un complemento de almacenamiento en caché, asegúrese de borrar el caché de su sitio.
• Luego, vaya a su sitio web y desplácese hacia abajo hasta la sección donde se supone que una imagen debe cargarse de forma diferida.
• Tómate un momento para ver si las imágenes se cargan sin problemas a medida que te desplazas.

Notas

• Asegúrese de realizar siempre la prueba primero en un entorno de desarrollo, antes de hacerlo en su sitio web activo.
• Considere la posibilidad de crear un tema secundario mientras hace esto. Las actualizaciones del tema pueden sobrescribir sus cambios.
• Para otros tipos de contenido como videos o iframes, se puede usar un enfoque similar donde el atributo src se reemplaza con un atributo data-src y se carga a través de JavaScript cuando está en la ventana gráfica.

Esta técnica es una forma sencilla de incorporar Lazy Loading. Si tiene sitios web más complejos o requisitos específicos, es posible que desee explorar una solución o un complemento más potente.

Método 2 : usar un complemento de WordPress para implementar la carga diferida

Este es el más fácil de los dos métodos, ya que puedes usar un complemento de WordPress para habilitar la carga diferida de forma segura. Varios complementos le permiten hacer esto, pero usaremosWP-Optimize en este ejemplo.WP-Optimize es un potente complemento de WordPress que le ayuda a aumentar la velocidad de su sitio web y mejorar la experiencia del usuario.

Ofrece un método simple y fácil para configurar sus imágenes, iframes y videos para que se carguen de forma diferida. Su función Lazy Load incorporada retrasa automáticamente la carga de los recursos web hasta que sean visibles, lo que resulta en tiempos de carga de páginas significativamente más rápidos. Sin embargo, esta es una característica premium de WP-Optimize.

Para habilitar la función:

• Abra la pestañaWP-Optimize > Imágenes desde su Panel de administración de WordPress
• Abra la subpestaña Imágenes de carga diferida
• Desde aquí, puede habilitar la carga diferida tanto para imágenes como para videos/iframes.

Si necesita deshabilitar la carga diferida para ciertas imágenes, imágenes de fondo, videos o iframes, simplemente habilítelo desde aquí. También puede optar por omitir ciertas clases de imágenes.

Antes y después de

Probamos la velocidad de un sitio web de muestra antes y después de implementar Lazy Load. El sitio web ya era bastante rápido, con un tiempo de carga de First Contentful Paint (FCP) de 1,5 segundos,según GTMetrix.

Después de habilitar la carga diferida, el FCP pasó a ser de 344 ms, que es mucho más rápido que lo que teníamos antes. Los resultados pueden variar según la cantidad de contenido que tenga en su página, pero en la mayoría de los casos su puntuación FCP mejorará.

¿Listo para acelerar el tiempo de carga de tu página?

¡Así que esto es todo! Hablamos sobre qué es Lazy Loading y el importante papel de Lazy Loading para los sitios modernos. Al esperar a cargar cosas hasta que las necesites, las páginas se cargan más rápido, ahorra datos de Internet y hace que la navegación sea más fluida, especialmente en teléfonos con datos limitados.

También brindamos algunos consejos útiles sobre cómo usar Lazy Loading en WordPress. Cubrimos todo, desde hacerlo usted mismo con código hasta usar un complemento como WP-Optimize.

Intente agregar Lazy Loading a su sitio web y cuéntenos cómo afecta su rendimiento. ¿Tienes preguntas? No dudes en preguntar en los comentarios.

Preguntas frecuentes

¿La carga diferida es buena o mala?

Lazy Loading generalmente se considera una buena práctica ya que tiene varios beneficios. Ayuda a mejorar los tiempos de carga de la página web y mejora la experiencia del usuario al cargar contenido solo cuando es necesario.

¿Qué es la carga diferida en la interfaz de usuario?

Lazy Loading en UI se refiere a la práctica de cargar elementos visuales como imágenes y videos solo cuando están en (o cerca) de la ventana gráfica del usuario.

¿La carga diferida afecta el SEO?

Cuando se implementa correctamente, Lazy Loading puede tener un impacto positivo en el SEO al mejorar los tiempos de carga de la página y mejorar la experiencia del usuario, los cuales son factores de clasificación importantes.

¿Deberías cargar todas las imágenes de forma diferida?

Si bien es beneficioso cargar imágenes de forma diferida que están fuera de la pantalla, no es necesario para las imágenes que son visibles inmediatamente al cargar la página. Cargar estas imágenes inmediatamente puede evitar cualquier retraso en su visualización.

¿Cuáles son los problemas con la carga diferida?

Algunos problemas con Lazy Loading incluyen retrasos en la carga de contenido a medida que los usuarios se desplazan, posibles problemas con la indexación del motor de búsqueda si no se implementa correctamente y la dependencia de JavaScript, que puede no ser compatible con todos los navegadores.