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:
- Lazy load de iframes sin necesidad de usar JavaScript
- mod_expires de Apache: Cachear contenido con htaccess
- DNS prefetch: Optimizar la carga de nuestra web resolviendo DNS previamente
- Compresión GZIP: Ahorrar ancho de banda en tu web
¿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:
|
1 |
<img loading="lazy" src="" width="" height="" alt="" /> |
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.
