Contacto: (+34) 965 074 601 o info@innovapublicidad.es

Cómo el Lazy Loading puede mejorar el SEO de tu web

Cómo el Lazy Loading puede mejorar el SEO de tu web

¿Qué es Lazy Loading?

Lazy Loading es un nuevo estándar HTML cuyo atributo «loading» se incorporó el pasado febrero de 2020 para imágenes e iframes.

Como su propio nombre indica, lazy loading se podría traducir literalmente a «carga diferida» en español. Su función es la de retrasar la carga de elementos como las imágenes o iframes hasta el momento exacto en el que nuestro usuario lo necesite. De esta forma, ayudamos en la optimización de nuestro sitio web en cuanto a la velocidad web y al uso de recursos.

A modo general, la carga estándar de un sitio web es completa, es decir, cuando un usuario entra en nuestro sitio web, el navegador carga por completo todos los recursos web de la url (imágenes, vídeos, texto, javascript,…) aún sin saber si el usuario va a permanecer mucho tiempo en nuestra url o va a consumir todo el contenido que encuentre en la página web. Esta forma de cargar todo el contenido hace que nuestra web sea más lenta, ocupe más memoria y sobrecargue el ancho de banda.

El atributo de lazy loading consigue que la web no cargue todos los elementos de golpe, si no que vaya descargando las imágenes a medida que el usuario vaya llegando al elemento en cuestión. Es bastante lógico pensar que, gracias a esta carga diferida, uno de los factores más importantes para Google, respecto al posicionamiento SEO se refiere, como es la velocidad de carga se vea ampliamente mejorada, por lo que es una herramienta que debemos tener muy en cuenta a partir de ahora.

El propio John Mueller (Webmaster Trends Analyst at Google) hablaba en su twitter este viernes 17 de julio de la importancia en SEO de la etiqueta lazy loading.

En su tweet dijo lo siguiente:

Existen navegadores que no soportan el lazy loading

Pues sí, así es. Aún con todas las recomendaciones que se están llevando a cabo durante los últimos días y las numerosas ventajas que promueve la etiqueta de carga diferida, aún existen navegadores que no soportan esta nueva integración HTML.

Muchos expertos desarrolladores opinan que este tipo de funcionalidades deberían implantarse automáticamente en los navegadores, sin necesidad de configurar este tipo de etiquetas para retrasar la carga de elementos no importantes para el usuario. Pero mientras tanto, deberemos añadir la etiqueta HTML en aquellas imágenes que no queramos que se cargan de forma automática con todo el resto del contenido al completo.

Para navegadores que aún no soporta este nuevo estándar, es posible implementarlo a través de una librería externa para simular el lazy-load. Un proceso mucho más complejo que la implementación de esta etiqueta de forma común para los navegadores que sí están adaptados a esta funcionalidad.

 

Cómo implementar la etiqueta lazy loading

Para la implementación de esta carga diferida, vamos a centrarnos en el CMS más popular actualmente, WordPress.

La carga diferida funciona así:

  • El navegador estructura la carga de web sin precargar imágenes ni vídeos insertados.
  • Es el código JavaScript el que determina qué imágenes y vídeos carga con el contenido inicial de la web en función del pre-visualizado del usuario y los elementos que vea en un primer vistazo.
  • El resto de imágenes no cargadas, irán cargándose a medida que el usuario haga scroll en la web.

Para la implementación de esta función en nuestro WordPress, es tan fácil como instalar un plugin destinado a ello.

Gracias a la amplia comunidad actual en WordPress, la mayoría de desarrolladores de esta plataforma lanzan sus plugins de forma gratuita, por lo que no necesitaremos hacer un sobre coste para implantar esta etiqueta. Algunos de los mejores plugins para carga diferida pueden ser: BJ Lazy Load, Lazy Load XT o a3 Lazy Load.

Es importante controlar el estado de las imágenes actuales de nuestro WordPress y el funcionamiento de éstas. Por ejemplo, si usamos un plugin o cualquier tipo de herramienta que reduzca el peso de las imágenes o las muestra en algún tipo de miniatura, debemos asegurarnos que el plugin de carga diferida que utilicemos no nos estropee esa cualidad.

Es posible que muchos de los plugins de lazy loading utilicen la versión original de la imagen para cargarla de forma diferida y una vez que se precargue, sea la imagen más pesada. Por ello, es fundamental comprobar cómo se comportan los diferentes plugins y tener procesadas con antelación las imágenes y vídeos para que pesen lo menos posible, antes de añadir la nueva forma de carga web.

Nuevo atributo Loading

Ya hemos aprendido qué es y cómo podemos mejorar nuestra velocidad web a través de la etiqueta de lazy loading, pero la etiqueta loading acepta otros atributos que detallamos a continuación:

  • Lazy :  Como ya hemos comentado, retrasa la carga de las imágenes que no se encuentran en la visualización. Las imágenes se cargan cuando van a ser visualizadas haciendo scroll el usuario.
  • eager : De forma resumida, no hace lazy loading, es decir, carga todas las imágenes desde el principio.
  • auto : Es el navegador el que se decanta por su función por defecto. Como hemos comentado, actualmente hay alguno que no soportan esta etiqueta, por lo que utilizar este atributo a día de hoy, es como no utilizar el lazy loading.

A tener en cuenta para SEO

Si implementamos la carga diferida en nuestra página web, es obvio que la velocidad de carga de nuestro sitio mejorará notablemente, lo que es un punto a favor para nuestra indexación en Google. La velocidad web se ha convertido en uno de los puntos más importantes en los últimos cambios de algoritmo de Google, por lo que, toda nueva funcionalidad que nos haga arañar al menos una milésima de segundo de carga, puede ser muy beneficiosa para nuestro posicionamiento.

Pero, como ya hemos comentado, al tratarse de un atributo bastante novedoso, aún existen varias restricciones que nos hacen tener que valorar muy detalladamente si esta funcionalidad nos beneficia o si, por el contrario, puede traernos algún quebradero de cabeza.

Otro de los puntos a tener en cuenta es si, para Google, esas imágenes que cargamos de forma diferida siguen existiendo. Pero podemos comprobar esto de forma sencilla utilizando la herramienta “Fetch as Google” en Search Console y verificando que nuestras imágenes siguen estando dentro del código fuente de la web.

Esta nueva etiqueta dará mucho que hablar en los próximos meses, por lo que una implementación temprana puede hacernos destacar frente a la competencia que aún no conoce esta función.

¿Te apuntas a la carga en diferido?

 

Adrian Jaen

¡Hola! Soy Adrián Jaén, especialista en SEO y Diseño Web en Innova Publicidad. Soy un apasionado de las bellas artes, la publicidad online y de cómo su conjunto pueden llegar al éxito.

More Posts

Follow Me:
Twitter

¡Hola! Soy Adrián Jaén, especialista en SEO y Diseño Web en Innova Publicidad. Soy un apasionado de las bellas artes, la publicidad online y de cómo su conjunto pueden llegar al éxito.
Share This