Un embed de YouTube trae consigo los propios scripts del reproductor y una miniatura de vista previa en el momento en que se carga, y en una página con varios vídeos eso se acumula rápidamente. Aquí está cómo mantener la velocidad sin renunciar al vídeo insertado.
Por qué los embeds afectan la velocidad de la página
Incluso antes de que un visitante pulse play, un iframe insertado solicita los recursos del reproductor de YouTube y una imagen en miniatura. En una página de reseñas con cinco vídeos insertados, por ejemplo, eso significa cinco conjuntos de solicitudes disparándose a la vez al cargar la página, compitiendo con los recursos de tu propio sitio por ancho de banda y tiempo de renderizado.
Solución 1: carga diferida nativa
La solución más sencilla es un único atributo HTML. Añadir loading=”lazy” a un <iframe> le indica al navegador que retrase su carga hasta que esté a punto de entrar en la vista:
<iframe src="..." loading="lazy" ...></iframe>Esto es compatible con todos los navegadores modernos, no requiere JavaScript, y es el cambio de mayor valor para una página con vídeo insertado por debajo del pliegue.
Solución 2: clic para cargar
Para páginas con muchos embeds, una opción aún más agresiva es no cargar ningún iframe en absoluto hasta que el visitante hace clic en él. Muestra una imagen de miniatura estática, obtenida de las URL públicas de miniaturas de YouTube (consulta nuestro visor de miniaturas), con un botón de reproducción superpuesto, y sustitúyela por el iframe real solo al hacer clic. Esto significa que no se produce ninguna solicitud a YouTube para los vídeos que un visitante nunca llega a reproducir.
Solución 3: usa autoplay solo donde sea necesario
Reproducir vídeo automáticamente añade trabajo real en el momento en que se carga la página: el reproductor tiene que almacenar en búfer de inmediato en lugar de esperar la intención del usuario. Reserva el autoplay para los embeds realmente importantes, y confía en la carga diferida junto con un botón de reproducción visible para el resto.
Medir el impacto
Herramientas como Google PageSpeed Insights o el propio panel Lighthouse de tu navegador señalarán directamente los embeds de terceros no optimizados, y te permitirán comparar los tiempos de carga antes y después de aplicar la carga diferida. En páginas con varios vídeos, la diferencia suele ser fácil de percibir tanto en los números como en la sensación de carga.
Integrado por defecto
Nuestro generador de código de embed incluye loading=”lazy” de forma predeterminada en cada embed generado, así que esta optimización ya está resuelta en el momento en que copias el código.