Cómo implementar lazy loading para optimizar tu web

La carga diferida es una técnica novedosa en el diseño web que se refiere al aplazamiento del contenido que no es crítico o no es visible. Tiene mucha utilidad para el SEO, por eso en Posicionamiento Web Salamanca te decimos cómo implementar lazy loading para optimizar tu web. Sigue leyendo y conoce más.

¿Qué es lazy loading?

Normalmente cuando un usuario visita una web todo el contenido de esa página se descarga y se ve de una vez. Esto permite que el navegador almacene en caché la página, aunque no es garantía que el usuario vea todo el contenido. Por ejemplo, si una web es de galería de fotos, todas estas se bajan, aunque el usuario no termine viéndolas. Lo que resulta en una pérdida de memoria y ancho de banda.

En lugar de que todo se cargue de una vez hay una opción, el lazy loading. Esto permite que el contenido cargue a medida que el usuario vaya a las partes de la página que lo requieren.

Google explica que la técnica de lazy loading “difiere la carga de recursos no críticos al tiempo de carga de la página”. Esos recursos se cargan cuando se necesiten. Indican que las imágenes que se consideran no críticas son aquellas que están fuera de la pantalla.

Es considera una buena práctica, aunque si no se implementa correctamente puede terminar escondiendo contenido importante de Google.

Seguramente ya te has encontrado con más de un sitio con carga diferida pero no lo habías notado. Se ve cuando llegas a un sitio y haces scroll, entonces ves como la imagen no carga al instante, pero sí ves el cuadro y sabes que ahí hay una imagen. Y de repente aparece la imagen final.

Beneficios de lazy loading

La carga diferida es parte de la optimización SEO técnica que puedes implementar en tu web y que trae muchos beneficios.

• Da un balance entre el contenido optimizado entregado y dinamiza la experiencia final del usuario.
• Los usuarios se conectan al contenido más rápido, ya que solo una parte del contenido necesita ser descargada cuando el usuario la abre.
• Los negocios consiguen más retención de los clientes porque el contenido se carga paulatinamente. Eso reduce la posibilidad de que la persona deje el sitio web.
• Los negocios ven menos costos de recursos, porque el contenido solo se entrega cuando lo necesitan.
• Al almacenarse la data en cache se reducen las peticiones y mejora los tiempos de cargas. Pero esto debe hacerse bien para que no haya demasiado contenido en caché y termine con errores.
• El tamaño de la página es mucho menor, por lo tanto, tarda menos en descargarse. Esto es ideal para los sitios donde las conexiones móviles son muy lentas.
• Evitas malgastar data de los usuarios. Esto es especialmente importante cuando hay conexiones lentas.
• Al no cargar las imágenes inmediatamente los usuarios ahorran batería, tiempo y recursos.

¿La carga diferida hace la diferencia?

Lo cierto es que sí. Porque como ya mencionamos mejora los tiempos de carga, al reducirse estos podrás tener mejores tasas de conversión y más clics. Además, al bajar el tamaño de los sitios se hacen menos peticiones, lo que igual significa más velocidad del sitio.

Al aligerar la carga el contenido se verá más rápido. Y se sabe que los tiempos de carga son un punto clave para estar en los primeros puestos de Google. Claro, esta no debe ser la única acción, debes llevar a cabo distintos trabajos de optimización de los tiempos de carga.

Recuerda que un sitio lento puede causar frustración entre los visitantes. Un sitio web bien diseñado debe ser tanto fácil de usar como rápido. Así el tráfico que llegue se quedará y no lo perderás.

Cómo implementar lazy loading para optimizar tu web

Hay varias formas de implementar lazy loading para optimizar tu web, aquí mencionaremos algunas:

Lazy loading de imágenes y vídeos en WordPress

Para implementar la carga diferida en WordPress podrás usar los plugins BJ Lazy Load, Lazy Load XT, A3 Lazy Load y Lazy Load. Cada uno ofrece ciertas características, podrás probar varios y ver cuál te funciona mejor de acuerdo con los resultados que esperas.

• BJ Lazy Load: su instalación y configuración es muy sencilla. Tiene las opciones que necesitarás configuradas por defecto. El plugin reemplaza las imágenes de los post, miniaturas y en marcos con un marcador de posición y carga el contenido mientras se acerca el visitante al hacer scroll. También funciona con widgets de textos, así como con vídeos de YouTube y Vimeo.
• Lazy Load XT: aunque no ha sido actualizado últimamente. El plugin además de ayudarte con la carga diferida de imágenes y vídeos te sirve para minimizar JavaScript, CSS, cargar los catálogos usando Cloudflare CDN y mover scripts al footer.
• A3 Lazy Load: la configuración por defecto se puede dejar así, quizás puedas cambiar el color del marcador de posición dependiendo del diseño de tu web. Usando este plugin podrías bajar los tiempos de carga en medio segundo.
• Lazy Load de WP Rocket: muestra imágenes o marcos de una página solo cuando están visibles para el usuario. Esto reduce el número de peticiones de HTTP y mejora los tiempos de carga. Funciona con miniaturas e imágenes completas.

Lazy loading usando el Intersection Observer API

Es una interfaz moderna que te permite hacer la carga tardía de imágenes y otros contenidos. En la web de esta indican que “La API Observador de Intersección, provee una vía para, de forma asíncrona, observar cambios en la intersección de un elemento objetivo, con un elemento ancestro o con un documento de nivel superior”.

Es decir, se mira de forma asíncrona la intersección de un elemento con otro.

Implementa lazy load con Lozad.js

Es una alternativa fácil y rápida para implementar esto en las imágenes, así dejas que la librería JS haga la mayoría del trabajo. Lozad es una forma de configurar esta cara con JavaScript sin ninguna dependencia. Podrás usarlo para vídeos, imágenes, iframes y más. Además, usa la solución que acabamos de mencionar Intersection Observer API.

Lazy loading con el efecto de imagen borrosa

Uno de los sitios más populares donde se está implementado este concepto es en Medium. Si lo has visitado seguramente has notado como el sitio carga la imagen principal, y es que primero ves una imagen borrosa, de baja resolución de la imagen, mientras esta va cargando. Esto puedes lograrlo en tu web.

Esto lo lograrás con un código que explican a detalle en sitepoint. Se trata de un código construido con HTML5, CSS3 y JavaScript. Que ayudará a que la web cargue más rápido y sea más ligera. Funciona para imágenes responsivas. No tiene dependencias. Se ve bien en todos los navegadores modernos. Y es fácil de usar.

Estas son las opciones para implementar lazy loading para optimizar tu web. Pero debes asegurarte de aplicarlas bien, lo mejor es seguir estas recomendaciones de Google.

Lo que recomienda Google sobre lazy loading

Hay una relación entre lazy loading y el SEO, no solo por la mejora de los tiempos de carga. Sino que debes estar pendiente de que al aplicar esta técnica en tu web no afecte el posicionamiento web.

Si implementas lazy loading sin prestar atención a cómo Google puede descubrir ese contenido de carga diferida, entonces corres el riesgo de que no sea rastreable en las búsquedas. Lo que afectará tu posicionamiento web.

Asegúrate que Google pueda rastrear tus imágenes que tienen carga diferida. Esto lo puedes comprobar con Google Search Console usando “Explorar como Google”. Si puedes ver las imágenes en el código entonces no habrá problemas.

También debes revisar que le agregas el texto ALT a todas las imágenes, así estas pueden posicionarse para Google Images.

Recientemente Google publicó en Google para desarrolladores una guía para asegurarte que pueden ver el contenido lazy-loaded. Aquí detallaremos algunos de los lineamientos básico que indicaron:

• En general, el contenido cargará cuando sea visible en la vista usando InstersctionObserver API y un polyfill. Esto te asegurará que el contenido
  completo de la página puede ser visto por Google.
• Para hacer scroll infinito recomiendan que admitas la carga paginada, esto se consigue dando un enlace único a cada sección, uno que los usuarios pueden compartir y cargar directamente. Google recomienda usar la History API para actualizar la URL cuando el contenido se carga dinámicamente.
• Para probar el lazy-loading asegúrate de usar un “puppeteer script” para probar localmente la implementación. En el mismo documento de desarrolladores Google lo da. Este requiere Node.js.

Al implementar lazy loading para optimizar tu web podrás disfrutar de muchos beneficios, pero debes saber hacerlo bien. Si necesitas ayuda lo mejor es contar con expertos en diseño web Salamanca para optimizar tu web y adaptarla sin problemas.