Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Lazy load de imágenes en HTML nativo sin necesidad de JavaScript

Nueva e interesante entrada para ver cómo hacer lazy load de imágenes sin usar scripts y lograrlo de manera fácil en HTML nativo.

Otros post interesantes sobre WPO:

¿Qué es el lazy load de imágenes?

Consiste en posponer la carga de las imágenes de una página web hasta el momento de su visualización.

De esta manera además de que la web cargue mucho más rápido (nos ahorramos descargar las imágenes que no se ven) nos ahorramos ancho de banda en nuestro servidor, ya que las imágenes que salen en la parte inferior de la web puede que no se lleguen a ver por el usuario si este no llega a navegar hasta ese punto.

También es un factor positivo de posicionamiento SEO.

loading=’lazy’ – Sintaxis y ejemplo del código HTML necesario

Veamos la sintaxis necesaria para realizar el lazy load sin necesidad de meter scripts en nuestra web, más info en la web oficial:

Tal y como podemos ver en el código superior solo nos hace falta añadir el atributo loading con el valor ‘lazy’ –> loading=’lazy’.

De esta manera ya lo tendríamos implementado en el HTML de manera nativa.

Solo nos queda revisar la compatibilidad de los navegadores actuales, ya que esta especificación de aprobó a comienzos de 2020 y habrá que ver cómo lo van implementando.

La evolución la podéis ver en la web de caniuse.com.

lazy load imágenes lazy loading

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies