Carga de imagenes usando lazy load - Resultado del experimento

Publicado el 15 de febrero del 2019 por Lino Uruñuela


En el anterior post hablamos de cómo realizar la carga de imágenes mediante Lazy Load, usando diferentes métodos.

Los resultados se podían ver una semana después de realizar ese experimento, pero hasta hoy no he tenido tiempo de crear este breve post para poder comentar los resultados.

En aquel experimento SEO queríamos comprobar si Google indexaba las imágenes que cargábamos en el DOM una vez cargado el documento.

Los diferentes métodos que probamos

  • Carga normal, sin lazy load → (Indexada)

  • Imagen usando thubmnail de posición → (Indexada)

  • Cargar imagen desde desde data-src → (Indexada)

  • Imagen usando thubmnail de posición y noscript → (Indexada)

  • Sin usar thubmnail pero sí noscript → (Indexada)

  • Sin usar thubmnail ni tampoco noscript → (Indexada)

  • Con thubmnail tamaño mediano + tamaño grande vía lazy load → (Indexada)



Las imágenes cargadas por javascript son las que posicionan

En artículo anterior explicamos cómo se suele usar una imagen inicial, por ejemplo un pixel transparente que pesa menos y por lo tanto carga mucho más rápido, que luego es sustituida mediante javascript por la imagen adecuada, que en algunos casos definimos en el atributo "src-lazy" o  "data-src.

Las imágenes que indexa y posiciona Google son aquellas que pretendíamos indexar, es decir, no las que están inicialmente en el atributo src de las imágenes, sino aquellas imágenes que al finalizar están en el atributo src. Este src ha sido moficado tras la ejecución del código javascript lanzado en el onload y la url final es la que indexará.

Cómo ya comentamos en el experimento sobre cómo ejecuta Google el código javascript, Google indexa el contenido que permanece tras ejecutar la carga del dom y ejecutar el código javascript definido en el onload o onready de la función.

Seguiremos probando diferentes métodos en la carga de imágenes para saber cómo debemos cargar las imágenes de tal manera que sea bueno para la experiencia de usuario y que sean indexadas correctamente por Google.


 



Contacta

Lánzate y pregunta!


He leído y acepto la política de privacidad

Mecagoenlos.com te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Lino Uruñuela. como responsable de esta web.

La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para enviar un correo con los datos que introduzcas, sin guardarse en ninguna base de datos.

Legitimación: Al marcar la casilla de aceptación, estás dando tu legítimo consentimiento para que tus datos sean tratados conforme a las finalidades de este formulario descritas en la política de privacidad.

Como usuario e interesado te informamos que los datos que nos facilitas estarán ubicados en los servidores de Linode.com (proveedor de hosting de Mecagoenlos.com) cumpliendo la ley de protección de datos. Ver política de privacidad de Linode.com.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@mecagoenlos.com, así como el derecho a presentar una reclamación ante una autoridad de control. Más información aquí.

Últimos posts

Últimos comentarios


Fran Javietr

Hola Lino como podemos añadir a este código la identificación de la ip del bot, como sabes hay falsos bots y una forma de saber si son l
Post: Monotorizar GoogleBot con Google Analytics

Javier

Buenas Lino, ¿Alguna novedad sobre cómo considera Google los links en PDFs? Se me ocurre que, siguiendo con este experimento, se po
Post: Link building con PDF

Francisco

Flaco. Por lo general, no dejo comentarios pero, en tu caso, voy a hacer una excepción pues, sencillamente... ¡sos un genio!, Gracias.
Post: Cómo cargar css y js y no bloquear la carga de contenido

Juan Francisco Gancia

Excelente artículo, gracias! Te encuentro de casualidad por un post de hace 10 años.
Post: Diferencias entre url indexada y url accesible

Lino Urnuela

@Emirodgar gracias! Pero parece que en tema de imágenes las pilla lo hagas cómo lo hagas parece, eso sí, siempre que no tengas un fall
Post: Indexar imágenes en Google usando Lazy Load

Emirodgar

Muy interesante el experimento. Yo estaba probando con los nuevos formatos webp y pero al final, como eran pocas imágenes y usaba Masonry,
Post: Indexar imágenes en Google usando Lazy Load

Lino Uruñuela

Completamente de acuerdo :) Pero en este experimento solo quería comprobar el método usado para hacer lazy load, en este caso con xmlht
Post: Indexar imágenes en Google usando Lazy Load

Francisco Morales

Lino muy interesante las distintas formas de cargar la imagen. Pero no crees que lo realmente interesante de aplicar Lazy Loading es cargar
Post: Indexar imágenes en Google usando Lazy Load

javier

Buenas , esto del onclik ha cambiado actuamente en algunas web que tengo las lee y sigue enlaces
Post: ¿Cómo ejecuta, interpreta e indexa Google el contenido cargado mediante javascript?

David Girona

Antes de Nada muchas gracias por la aportación. Estoy probando de poner en marcha este procedimiento y me surgen un par de dudas. En
Post: Cómo añadir el valor del meta Robots a Google Analytics via Google Tag Manager