Optimización de imágenes con Intersection Observer API

Introducción Cargar todas las imágenes de una página larga al inicio desperdicia ancho de banda y aumenta el Largest Contentful Paint (LCP). Esto perjudica tu posicionamiento en Google y desespera a los usuarios con conexiones lentas. La solución profesional es usar Intersection Observer API, que permite cargar el contenido solo cuando el usuario está a punto de verlo en pantalla.

Solución Rápida (Código)

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img); // Dejar de observar tras cargar
        }
    });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Explicación técnica Intersection Observer es una API nativa que detecta de forma asíncrona cuándo un elemento entra o sale del viewport. A diferencia de escuchar el evento scroll, esta API no satura el hilo principal (Main Thread), lo que garantiza una navegación fluida sin importar cuántos elementos estés observando.

Al usar esta técnica junto con atributos data-src, evitas que el navegador descargue megabytes de imágenes que el usuario quizás nunca llegue a ver. Esto mejora drásticamente el Time to Interactive (TTI) y es una recomendación clave para cumplir con los Core Web Vitals. Además de imágenes, puedes usar este patrón para activar animaciones, cargar comentarios de forma diferida o pausar videos automáticamente cuando no son visibles, optimizando al máximo los recursos del dispositivo.

Conclusión La optimización de recursos es vital para el SEO moderno. Si quieres ir más allá, revisa nuestro artículo sobre Formatos de imagen de próxima generación (WebP y AVIF).