Lazy Loading: Las cargas diferidas mejoran el rendimiento SEO

Bueno, seguimos con la seguidilla de posteos SEO. Así qué toca hablar sobre los tiempos de carga, más precisamente sobre el Lazy Loading, y es qué: ¡Usted es un holgazán McFly!.

— ¿De qué va el Lazy Loading?. Pues, cómo sabrán, la velocidad y los tiempos de carga son importantes para puntuar bien en el PageSpeed. Esto se traduce en un buen rendimiento y la consecuente, buena UX «experiencia del usuario».

La rapidez de carga y respuesta por medio de una buena optimización en tu sitio web, más le gustará el sitio a los usuarios. Pero, para lograrlo tenemos que atravesar por distintas adversidades, pues, hay muchas variables a tener en cuenta.

Es aquí donde entra el Lazy Loading. Dado qué este patrón de diseño para sitios webs está tomando más importancia. Pues, el Lazy Loading genera justamente eso, cargas diferidas.

Esta buena práctica SEO, puede ayudarte a mejorar el posicionamiento de tu sitio. Pues, Google premia las buenas prácticas por medio de técnicas eficientes. Sí quieres dominar las SERPs, seguí leyendo este post sobre el Lazy Loading.


¿Qué es Lazy Loading?

El Lazy Loading es una técnica que podemos aplicar en nuestra estrategia SEO. Consta de crear un patrón de diseño, en la cual los distintos elementos y recursos no se cargan todos a la vez. Pues, estos se van renderizando a medida qué el usuario los va alcanzando y utilizando, de aquí el nombre de «carga diferida«.

— Entonces, ¿cuál es el efecto qué genera esto?. Cómo lo comentaba, sí los recursos cargan de manera diferida, se genera una mejora en la velocidad y el procesamiento de los datos. Pues, imaginemos qué pasaría sí tenemos una URL medianamente grande con varias imágenes y videos.

En esta situación se tardaría mucho en generar una primera respuesta inicial. En cambio, sí los objetos se cargan conforme el usuario lo necesita, la primera impresión se obtendrá mucho más rápido.

Esta acción de retrasar las cargas es el Lazy Load, y aplicarla tiene buenas ventajas qué iremos viendo conforme se desarrolle el post.


Beneficios del Lazy Loading

Bueno, justamente, cómo lo comenté, el principal beneficio es la mejora en el PageSpeed y los tiempos de carga en general. Pero además, esto trae consigo otros beneficios:

  • Mejora la experiencia del usuario.
  • Mejora el rendimiento en general, en especial en los dispositivos móviles.
  • Potencia el rendimiento general de los recursos de la computadora, cómo el RAM y el uso del CPU.
  • Mejora el tiempo de permanencia «Dwell Time».
  • Disminuye el porcentaje de rebote.

Lazy Loading vs Eager Loading

Hay un concepto que se debe tener en cuenta con el que se compara a menudo al Lazy Loading. Estoy hablando del Eager Loading.

Este otro concepto, conocido como «carga ansiosa» o Eager Loading, es un proceso similar al que estamos desarrollando en el post, pero con sus diferencia. Pues, el Eager Loading carga todos los recursos del sitio web cuando se ejecuta el código.

Para qué esto suceda, se requiere una precarga de recursos, permitiendo qué estos sean renderizados con las distintas acciones del usuario. Esto brinda la posibilidad de cargar recursos de fondo «en segundo plano», generando una mejora de la experiencia entregada, con un recorrido muy fluido. Pero siempre, con estadísticas distintas.

¿Cuándo usar Eager Loading?

Pues, podemos concluir qué el Eager Loading es más útil en la asociación de modelos relacionados con una sola ejecución, en lugar de varias simultáneas. Entonces, es más interesante poner un Eager Loading en lugares donde no necesitemos muchas consultas al servidor. Cómo por ejemplo en la carga de una URL de un e-commerce para un producto, o una categoría pequeña.

¿Cuándo usar Lazy Loading?

En cambio, la carga diferida es más util para las colecciones, u otros lugares qué requieran muchas consultas al servidor. Pues, irá haciendo las peticiones a medida qué las vaya necesitando.

Pero en especial, el Lazy Loading es ideal para los sitios con recursos visuales. Simplemente, tendremos qué modificar las distintas etiquetas en incluir los atributos: «loading» y el valor «lazy«. Así podremos mejorar la velocidad de carga, incluso cuando tengamos contenido multimedia muy pesado.


Lazy Loading y SEO

Ahora veremos qué consecuencias con respecto al SEO genera el Lazy Loading. Pues, vale la pena especificar y entrar un poco en detalle en los diversos beneficios qué esta práctica puede traernos.

Optimiza la memoria caché

El Lazy Loading reduce el impacto de los recursos utilizados, en especial las memorias. Es qué la memoria de RAM, y la caché son las más perjudicadas cuando tenemos qué cargar varias cosas al mismo tiempo.

Al usar esta práctica, podemos volver más eficiente la utilización de estas memorias, en especial la caché.

Código depurado

Un código más depurado es más eficiente para aparecer en los primeros lugares de las SERPs. Pues, una carga rápida y eficiente ayuda mucho con este proceso. Pues, limpia mucho tu CSS.

Mejor UX

Una navegación fluida y de calidad brinda una buena experiencia al usuario. En consecuencia, podría mejorar la tasa de conversión. Pues, usuarios contentos es igual a «más dinero para casa«.

Reduce el tamaño del DOM

Esto es un efecto de beneficio mutuo. Pues, tener una hoja de documentos más depurada facilita la carga y el Lazy Load. Reduce al máximo el tamaño del DOM para más placer beneficios.

Este apartado está relacionado con la mejora de la UX. Pues, sí tu sitio es buenísimo, es probable que recibas enlaces entrantes y en consecuencia, mejore tu posicionamiento en la web. Los backlinks son buenos para tu seo Off page.


¿Cómo podemos hacer Lazy Loading en nuestro sitio?

Bueno, hay dos, o tres maneras «sí se quiere» de hacer Lazy Loading. Una a la «vieja escuela«, otra mucho más siempre, y la tercera qué es un híbrido entre ambos.

1. Lazy loading con código

Para utilizar el Lazy Loading con código HTML, primero debemos ver sí nuestro navegador soporta. Desde la versión 75 de Chrome sí funcionan, y en general la mayoría lo hacen, pero no está de más aprender la teoría.

Para ello debemos recurrir a un Script en java. El propio es:

Cuando ejecutemos el console.log, nos arrojará un resultado diciendo sí lo soporta o sí no.

Cómo lo más probable es qué si lo haga, podremos aplicar en nuestro sitio el siguiente atributo dentro del tag img del código HTML:

Entonces, un mini ejemplo del Lazy Loading en nuestro editor HTML quedaría algo como:

Este ejemplo se usó para imágenes, pero podemos aplicarlo para cualquier archivo multimedia.

2. Lazy Loading con Plug-in

Ahora bien, no todo el mundo quiere hacer código, ni tienen ganas de hacerlo. Entonces, iremos a nuestro CMS, o donde estemos creando nuestro sitio. Y de allí vamos a la tienda de aplicaciones qué esta tienda. Da igual sí es WordPress, Shopify, etc. La mayoría tiene una tienda con complementos.

Para encontrar el Plug-in que buscamos, simplemente debemos escribir «lazy loading» en el buscador y listo, aparecerán muchas opciones.

3. Estrategia Mixta

En la estrategia mixta hacemos, cómo su nombre lo indica, una mezcla de ambas. Yo puntualmente utilizo un plugin, y además en algunas URLs modifico desde el editor HTML la etiqueta, dependiendo mi objetivo con dicha página.


Directrices de Google sobre el Lazy Load

Hola Google, ¿se puede usar el Lazy Load?. Sí, podes. Es qué Google no cuenta con mucho lujo de detalles, solo comenta qué «no lo ve mal«.

A ver, podés hacerlo. Pero puede qué algunas URLs no sean rastreable desde un sitemap. — ¿Por qué?, no hay por qué. Hay qué implementar la carga diferida, y luego chequearlo tanto con el Robots como en el Search Console. Pues, los Crawlers no son unos genios.

Pero, en definitiva, es tomar esa precaución por las dudas.


¿Necesito un Lazy Loading en mi sitio?

Bueno, sí estas en este post, es probable qué quieras saber sí tu sitio tiene problemas de carga y es apto para un Lazy Loading. Para esto, lo primero es ver tu página desde incógnito y ver sí carga rápido todo. Este proceso es muy random y se hace a ojo.

Luego, también podrías ver cómo carga, y sí está indexada en la caché de Google. — ¿Cómo se hace?. Mirá la imagen aquí debajo.

Basándonos en nuestra intuición, ahora nos toca contrastar la información con datos posta verídicos. Son principalmente cinco los puntos a tener en cuenta:

1. Velocidad del sitio

El primer punto es el más importante. Debemos analizar sí la velocidad de nuestro sitio es óptima. Para hacerlo debemos usa herramientas cómo PageSpeed Insights, LightHouse, o el propio GTmetrix. Todas estas herramientas harán lo mismo, mandarán consultas al servidor y medirán los tiempos de respuesta.

Luego de medir los tiempos de respuesta, se arrojarán unos resultados. Estos resultados te indicarán cuál o cuáles elementos son los qué más están tardan en renderizarse.

En este caso, medí el rendimiento de mi sitio con GTmetrix y está optimizado. Pero, podría suceder qué tengas tiempos de carga en donde las imágenes, o las fuentes, etc. Sí las métricas son similares a las de la siguiente imagen, necesitás hacer un Lazy Loading. Pues, los problemas de performance en el sitio se debían a problemas en la Performance.

Veamos de manera superficial los problemas:

Vemos qué básicamente podría mejorar el rendimiento con un Lazy Load y Reduciendo el tamaño del DOM.

2. Optimización del código

Otra cosa qué sucede con relativa frecuencia, es qué hay problemas de compresión. En especial la información que no está bien comprimida se debe al Gzip o Brotli, al JavaScript, o al propio HTML.

3. Redirecciones

Las redirecciones pueden ser una solución, pero también un problema. Porque, pues, sí tenemos muchas redirecciones en un sitio, este puede volverse lento.

4. Diferir la carga de imágenes

Es altamente recomendado diferir la carga de las imágenes. Sí algo no se ve, capaz no es necesario qué se cargue de entrada. Por eso es una buena idea el Lazy Loading.

5. Recursos externos

Tener muchos recursos externos en diferentes servidores no es buena idea. Lo ideal sería unificar los recursos en un mismo servidor y luego aplicar el Lazy Loading.


Conclusión

Para ir finalizando el post vale aclarar qué el Lazy Loading es una muy buena herramienta sí se quiere mejorar los tiempos de carga. Esto ayuda a la experiencia del usuario «UX», y sin duda beneficiará a tu sitio y marca.

Espero qué el post te ayude a tomar acción y una decisión sobre la utilidad del Lazy Loading en tu sitio. Es una buena oportunidad, no la desperdicies.

— ¿Sabés qué más es una buena oportunidad?. Pues, el banner qué te dejo acá debajo. Ahí encontrarás un regalito de 25 dólares para qué puedas aplicar el Lazy Loading. ¿Qué estás esperando?.

Ahora sí, me despido. ¡Nos vemos la próxima!.

Consigue 25 dólares para tu próximo sitio WordPress

Tf*idf: La frecuencia de términos vs Frecuencia inversa del documento es una práctica funcional a tu SEO dentro del marketing de contenidos

Puede que te parezca extraño el título del artículo de hoy, pero, posiblemente el Tf*idf sea una métrica que seguro utilizaste sin saberlo. En especial sí tu sitio web o blog aplica marketing de contenidos para posicionarse conforme a los motores de búsqueda. Si una de las patas centrales de tu negocio o actividad profesional

Read More »

Metodología Agile: qué es y cómo aplicarla a tu proyecto de alto rendimiento en tu flujo de trabajo

Cuando hablamos de cambios y procesos tecnológicos relacionados con la transformación digital, tendremos una gran cantidad de nuevos conceptos dentro de la nube de ideas de temas relacionados. Sin embargo, sí hablamos propiamente de la gestión de proyectos, un concepto se destaca por sobre el resto, estoy hablando, de la metodología Agile. Entonces, hablando netamente

Read More »

Mindset: Aprende sobre el poder de la mentalidad positiva o growth mindset «progresivo» y a detectar tu propio mindset con ejemplos

Este es un tema muy propio del desarrollo personal, pues, tener una mentalidad correcta, es crucial para tu crecimiento. Entonces, toca hablar del Mindset, y de los marcos mentales relacionados con el mismo. El Mindset es un término que ha ganado mucha popularidad en los últimos años. Este concepto es simple y la verdad, no

Read More »

Liderazgo: Aprende qué es este concepto con definiciones y ejemplos, los tipos de líderes, algunas frases

Bueno, se viene un post cortito y serio sobre Liderazgo y desarrollo personal. El liderazgo es una cualidad importante que tienen todas las personas, independientemente de su área de interés; pues, el liderazgo se encuentra a muchos niveles y tiene muchos matices. En este post, intentaré definir el liderazgo, y mencionar los tipos de liderazgo

Read More »

Diseño web: Aprende qué es y como un diseño profesional puede ayudarte a posicionar tu sitio web con este post tutorial

Bueno, el diseño web es un área enfocada en el desarrollo de interfaces digitales, como el diseño de sitios y aplicaciones para web «Progressive Web App». Para ello, los diseñadores web crean sitios utilizando lenguajes de programación como HTML, CSS, JavaScript, e incluso otros tantos más. Pero, siempre, el motivo del diseño debe estar orientado

Read More »

Diseño: Cuando el diseño es tu pasión nada puede malir sal

— La idea de este post ocurrió mientras estaba escuchando la siguiente canción que seguramente comparta por aquí debajo. Mientras lo hacía, no paraba de pensar en el meme que dice: «el diseño gráfico es mi pasión«. Bueno, siendo justos, tampoco soy un gran maestro del diseño, pues, todo lo que engloba al diseño requiere

Read More »
error: Content is protected !!