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.

1. 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é.

2. 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.

3. 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“.

4. 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.

5. Posibilidad de obtener Backlinks

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.

En cuanto a los backlinks te enchufo un chivo de mi canal de YouTube y pumm, ya te colé una subscripción.

---

¿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 Plugins en WordPress

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.

En este punto te voy a mencionar tres opciones para Lazy Loadear (¿Existe esa palabra?)

WP-Optimize

El WP-Optimize es una herramienta que te ayuda con varios puntos de tu web, y uno de ellos es con la diferida de cargas de tus imágenes (y otros recursos).

La verdad es que funciona dignamente bien, sin embargo yo actualmente no la estoy utilizando dado que la herramienta de WP-Rocket me funciona mejor para mi WordPress. — ¿Por qué? ¡Qué se yo! pero lo cierto es que cuando lo testeo las imágenes me cargan mejor (y más progresivamente estable).

Sin embargo, para muchos clientes utilizo esta herramienta y se comporta mucho mejor que las otras, así que como puedo permitírmelo, utilizo ambas en mi sitio, pero Wp-Optimize hace algo, y WP-Rocket otra cosa.

NOTA: No te recomiendo diferir la carga de imágenes del fondo porque pensá que, si es una imagen estática grande para toda la web, probablemente no cargue a la primera y quizás estés un rato haciendo scroll hasta que comience la carga.

WP-Rocket

Como comentaba antes, WP-Rocket me gusta más para manejar la carga de mis recursos en general, además está muy bien la entrega de recursos desde el CDN. Pero bueno, vos no estás acá por eso, vos querés saber si está bueno WP-Rocket… y si, está bueno.

— ¿Por qué? Bueno, principalmente los recursos cargan bien (incluso el fondo). Por eso lo utilizo tanto para el Lazy Loading de las imágenes, cómo para los iframes, videos, y embeds.

Pero, supongamos que algún recurso no te carga bien, bueno, simplemente tenés que identificar cual es el recurso y tirarlo en la lista de excluidos.

Otra cosa que me parece bien en WP-Rocket, es que, si tenés algún template que no dimensione imágenes correctamente, o directamente que vos no establezcas las dimensiones, WP-Rocket lo hace por vos.

Además, si tenés algo que no está funcionando bien con WP-Rocket, el propio LightHouse se va a encargar de decirtelo.

Jetpack

Jetpack es la perra mayor la herramienta de cabecera de WordPress.com y básicamente intenta optimizar la entrega de recursos, y en este caso el de las imágenes.

Puntualmente, a las imágenes las intenta diferir. Pero bueno, no es la mejor opción, pero si están pagándola y no quieren entrar en mayores gastos, es una opción más que interesante.

Antes, cuando yo era joven, había un meme que decía algo cómo: It’s something… y en este caso aplica a la perfección.

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?

Si encontraste útil toda la información que hemos compartido, te agradecemos sinceramente tu apoyo. Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal↗️ o Cafecito↗️. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.

Si estás considerando crear tu propio sitio web, te recomendamos WordPress↗️. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento de $25 al crear tu sitio con WordPress↗️.

---

FAQs sobre el lazy loading:

¿Qué hace lazy loading?

El Lazy Loading es una técnica SEO qué permite cargar los recursos de manera diferida, con el fin de mejorar las métricas de carga.

¿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”.