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.
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.
La carga diferida es parte de la optimización SEO técnica que puedes implementar en tu web y que trae muchos beneficios.
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.
Hay varias formas de implementar lazy loading para optimizar tu web, aquí mencionaremos algunas:
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.
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.
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.
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.
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:
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.
Al finalizar el año es momento de mirar hacia atrás para reflexionar, pero también de ver al futuro y empezar…
Publicar contenido interesante y útil para posicionar tu blog es fundamental. Aunque hay momentos en que la inspiración tarda en…
Planifica las próximas publicaciones con esta guía para crear tu estrategia de contenidos en Navidad. ¿Aún no sabes sobre qué…
Saber cómo posicionar nuestra web en las búsquedas por voz es muy importante en estos tiempos. La búsqueda por voz se…
Posicionar una página web en los buscadores es una de las tareas más comunes que se fijan en la era…
Algunos estudios elaborados por grupos como Forrester Research, comScore, Forbes Insight y Online Publisher coinciden en que las interacciones que…