Nuevo post para ver cómo hacer lazy load de iframes sin tener que recurrir al uso de scripts y conseguirlo sólamente con HTML.
Anteriormente ya redacté otro post para el lazy load de imágenes, otros post interesantes sobre WPO:
- 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?
Trata de retrasar la carga de los iframes hasta el momento de su visualización.
De esta manera no se cargan los iframes a no ser que el usuario los vaya a ver. La web cargará mucho más rápido con un considerable ahorro de ancho de banda.
Sintaxis y ejemplo del código HTML necesario para el lazy load de iframes
Veamos con este ejemplo la funcionalidad del lazy load en los iframes, más info en la web oficial:
|
1 |
<iframe src="URL-IFRAME" loading="lazy" width="200" height="50"></iframe> |
Tal y como vemos en el ejemplo superior solo debemos añadir el atributo loading con el valor ‘lazy’ –> loading=’lazy’.
La evolución de la compatibilidad de navegadores la podéis ver en la web de caniuse.com.
