Implementar la carga lenta de vídeos
Senior SEO-specialist
Los vídeos enriquecen tu contenido, pero también son pesados. Las incrustaciones estándar se cargan inmediatamente después de visitar la página, lo que ralentiza el tiempo de carga y afecta negativamente a tus Core Web Vitals. La solución: carga lenta. En este artículo, te muestro cómo cargar los vídeos sólo en cuanto se ven, sin plug-ins externos ni problemas de rendimiento.
1. ¿Por qué carga lenta para vídeo?
Una incrustación estándar de YouTube o Vimeo carga automáticamente múltiples scripts externos, miniaturas y recursos iframe en las visitas a la página.
Desventajas:
- LCP lento (Pintura de mayor contenido)
- Puntuación PageSpeed más baja
- Menor rendimiento móvil
- Consumo innecesario de datos con los vídeos al final de la página
La carga lenta garantiza que el vídeo sólo se carga cuando el visitante se desplaza hasta él.
2. Funcionamiento: de imagen a iframe en scroll
La técnica de carga diferida funciona del siguiente modo:
- Muestras una miniatura estática (por ejemplo, JPG o WebP)
- Al desplazarte (a través de la API del Observador de Intersección), sustituye esta miniatura por el iframe real <>
- Resultado: carga más rápida, sin scripts que bloqueen la renderización, mejor experiencia de usuario
3. Ejemplo HTML + JavaScript (YouTube)
HTML:
html
<div class="video-wrapper" data-video-id="dQw4w9WgXcQ">
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video preview" loading="lazy">
<button class="play-button" aria-label="Video afspelen">▶</button>
</div>
CSS (opcional):
css
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.video-wrapper img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: none;
border: none;
color: white;
}
JavaScript (Observador de intersecciones):
html
<script>
document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.video-wrapper');
const loadIframe = (el) => {
const videoId = el.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '100%';
iframe.style.height = '100%';
el.innerHTML = '';
el.appendChild(iframe);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadIframe(entry.target);
observer.unobserve(entry.target);
}
});
});
videos.forEach(video => {
observer.observe(video);
});
});
</script>
Aan de slag met SEO? Neem gerust contact op.
4. Alternativa: carga lenta con plugins (con CMS)
Para sitios WordPress:
- WP Rocket – Carga perezosa para imágenes y vídeos
- Lazy Load for Videos – Plugin específico para vídeo
- LiteSpeed Cache – Optimización todo en uno, incluida la carga lenta de vídeo
Nota: comprueba visualmente que los vídeos incrustados se siguen cargando correctamente después de la instalación.
5. Optimización adicional: comprimir miniaturas
La mayoría de las miniaturas de vídeo tienen 480px o más. Optimízalas con:
- Formato WebP (más pequeño, misma calidad)
- Compresión mediante Squoosh
- loading=»lazy» en <img>
Utiliza también un texto alternativo por contexto + SEO.
En conclusión
La carga perezosa para vídeos es una obviedad: mejor tiempo de carga, mejor UX y mejores puntuaciones en Lighthouse/PageSpeed. Mediante una sencilla combinación de HTML, CSS y JS, cargas los vídeos sólo cuando es necesario, y evitas retrasos innecesarios en las visitas iniciales.
