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.

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

Deja un comentario Cancelar respuesta

Heavy User: Todo lo que necesitás sobre este peso pesado

Sí bien lo políticamente correcto es decir que queremos a todos los usuarios por igual. Lo mismo sucede con los padres y los hijos. Pero, lo cierto es que las empresas siempre tienen predilección por esos usuarios más cotizados, uno de estos es conocido como Heavy User. Identificar a este tipo de consumidores es de

Read More »

Hashtag: La herramienta digital que marca la diferencia en tus redes sociales

— En los tiempos que corren, los Hashtag son la principal moneda de cambio que tenemos en el mundillo del Marketing Digital. Pues, en la jungla online, donde las redes sociales encuentran y des-encuentran personas, compartir contenido es parte del día a día. Pero, así mismo, también nos saturamos con mensajes que no queremos, y

Read More »

Keyword Research Tradicional: Autocompletar y búsquedas relacionadas

Cuando optimizamos nuestro contenido para posicionarlo en Google, es decir, hacemos SEO. Pensamos en los motores de búsqueda, la planificación de palabras clave «Keyword Research», y demás factores relevantes conforme al posicionamiento. Para ello, hoy vamos a valernos tanto de la función Autocompletar, cómo las búsquedas relacionadas. Sin embargo, los problemas aparecen principalmente en dos

Read More »

HTML: ¿Qué es y como se relaciona con el CSS y JavaScript?

Sin duda, la digitalización de las empresas está cambiando el mercado como lo conocemos. Pues, este proceso imparable está transformando todos los sectores a un ritmo cada vez más acelerado. Esto puede darse gracias a las nuevas estrellas del mercado, los programadores. Siendo los especialistas en HTML, Python, y JavaScript, entre otros, como los más cotizados y buscados en

Read More »

Anchor Text: Dominar este concepto es crucial para tu SEO

A la hora de hablar del Anchor Text o los textos anclas debemos entender qué los barcos tienen once anclas. Pues, siempre dicen: «eleven anclas» estas son lo qué nos permite alcanzar cierta parte de nuestro sitio haciendo un salto calculado. Este Anchor text es el texto visible de un enlace, en el cual un

Read More »

Keyword Stuffing: ¡No abuses de las palabras clave!

— A nadie le gusta el chamullo, pero mucho menos a Google. Esto es así a tal punto, qué incluso a esta práctica se pone un nombre: «Keyword Stuffing«. El cual es una mala práctica de SEO que consiste en la repetición exagerada de palabras clave con el fin de manipular al algoritmo. Esto funcionó

Read More »
error: Content is protected !!