Al optimizar los sitios web de los clientes, a menudo encontramos que los videos incrustados son una causa importante de los lentos tiempos de carga de las páginas. El problema es que los navegadores cargan todo el reproductor de video de inmediato, incluso si un visitante nunca hace clic en el botón de reproducir, lo que puede afectar negativamente el rendimiento de su sitio.
La solución es la carga diferida de videos. Esta técnica simple reemplaza los incrustados de video pesados con una imagen de vista previa ligera. Hemos descubierto que esto puede mejorar los tiempos de carga de la página hasta en un 30% en páginas con muchos videos.
Si desea acelerar su sitio de WordPress sin eliminar su contenido de video, está en el lugar correcto. Le mostraremos las formas más fáciles y efectivas de agregar carga diferida para sus videos.
¿Qué es la carga diferida para videos y cómo funciona?
La carga diferida es una técnica que mejora el rendimiento y retrasa la carga de partes no esenciales de una página web hasta que realmente se necesiten.
Normalmente, cuando incrusta un video de un sitio como YouTube o Vimeo, su navegador tiene que cargar todo el reproductor de video y todos sus scripts asociados. Esto agrega peso adicional a su página y realmente puede ralentizar el rendimiento de su sitio web.
La carga diferida de videos resuelve este problema reemplazando el pesado reproductor de video con una imagen de vista previa ligera y clickeable (una miniatura). El reproductor de video completo solo se carga después de que un visitante hace clic en el botón de reproducción en la imagen.
Dado que las imágenes son mucho más pequeñas que los videos, la técnica de carga diferida mejora significativamente la velocidad de la página.
Ahora que conoces las ventajas, veamos cómo cargar diferidamente videos de YouTube y Vimeo en WordPress.
Tutorial en video
Si prefieres instrucciones escritas, continúa leyendo.
Cómo agregar carga diferida para videos en WordPress
Para agregar carga diferida para videos, lo primero que debes hacer es instalar y activar el plugin Lazy Load for Videos.
Este plugin funciona directamente, y no tendrás que tocar una sola línea de código.
Y para ver si tu carga diferida está funcionando, todo lo que necesitas hacer es ver una publicación o página que contenga un video de YouTube o Vimeo. Notarás que una miniatura de video y un botón de reproducción reemplazan a los reproductores predeterminados.
Cuando haces clic en la imagen, se cargará el video y se reproducirá.
Es posible que notes un segundo de retraso rápido cuando el video se carga, pero eso es totalmente normal. No te preocupes; la carga diferida está funcionando perfectamente.
Ahora, ten en cuenta que aunque este plugin funciona directamente, todavía hay configuraciones que puedes ajustar según tus necesidades. En la pantalla del editor de publicaciones, puedes elegir la calidad de las miniaturas para las incrustaciones de videos de YouTube.
Además de la calidad de las miniaturas, hay más opciones de personalización disponibles.
Puedes ir a Configuración » Lazy Load for Videos para revisar y reajustar estas opciones.
En la pestaña ‘General/Estilo’, puedes personalizar la apariencia de las miniaturas de video. Puedes habilitar el modo adaptable, elegir el estilo del botón de reproducción, usar CSS personalizado e incluso habilitar el marcado schema.org.
Este plugin es compatible tanto con YouTube como con Vimeo. Puedes encontrar configuraciones específicas del proveedor haciendo clic en las pestañas correspondientes.
En la pestaña ‘YouTube’, puedes elegir un color para la barra de progreso, deshabilitar las cookies, ocultar anotaciones y más. Incluso puedes deshabilitar la carga diferida para videos de YouTube.
De manera similar, en la pestaña de configuración de Vimeo puedes elegir los colores de control, ocultar o mostrar el título del video y deshabilitar la carga diferida para videos de Vimeo.
Si realizaste algún cambio en estas configuraciones, no olvides hacer clic en el botón 'Guardar Cambios' en la parte inferior para no perder tu progreso.
¿Tiene WordPress carga diferida integrada para videos?
Quizás te preguntes si necesitas un plugin para esto, y esa es una excelente pregunta. Desde la versión 5.5, WordPress agrega automáticamente una forma básica de carga diferida a los videos. Le indica al navegador web que espere hasta que el video esté cerca de la pantalla antes de cargarlo.
Sin embargo, el método del plugin sigue siendo mucho más efectivo para la velocidad. El plugin evita que el pesado reproductor de video se cargue por completo hasta que un visitante realmente haga clic en el botón de reproducir. El método integrado de WordPress todavía carga todo el reproductor, solo que un poco más tarde.
Para obtener el mayor impulso de velocidad, usar un plugin que reemplace el video con una miniatura de vista previa es el mejor enfoque. 👍
Extra: Siempre incrusta videos, nunca los subas
Antes de profundizar en por qué deberías evitar subir videos a tu sitio de WordPress, aclaremos la diferencia entre subidas e incrustaciones.
Subir un video significa almacenar los archivos de video directamente en tu sitio, de manera similar a cómo almacenas imágenes en la biblioteca de medios de WordPress. Desaconsejamos encarecidamente esto.
Por otro lado, incrustar un video implica subirlo primero a un sitio de terceros como YouTube. Luego, incrustas el video en tu blog, lo que permite que se vea en tu sitio web mientras se almacena en otro lugar. Recomendamos encarecidamente incrustar videos siempre que sea posible.
Para obtener más información sobre los beneficios de incrustar videos en lugar de subirlos a WordPress, puedes consultar nuestra guía sobre por qué nunca debes subir un video a WordPress.
Preguntas frecuentes sobre la carga diferida de videos
Aquí están algunas de las preguntas más comunes que nuestros lectores tienen sobre cómo agregar carga diferida para videos en WordPress.
1. ¿WordPress carga videos de forma diferida por defecto?
Sí, desde la versión 5.5, WordPress incluye carga diferida nativa para videos. Sin embargo, solo espera a cargar el reproductor de video hasta que esté cerca de la pantalla. Usar un plugin que reemplace el video con una miniatura es mucho más efectivo para mejorar la velocidad.
2. ¿La carga diferida es buena para el SEO?
Sí, la carga diferida es excelente para el SEO. La velocidad del sitio es un factor clave de clasificación de Google. Al acelerar tus páginas, la carga diferida ayuda a mejorar tus puntuaciones de Core Web Vitals, lo que puede conducir a mejores clasificaciones en los motores de búsqueda.
3. ¿La carga diferida de videos afectará mis vistas de YouTube o Vimeo?
No, no afectará tus recuentos de vistas. Cuando un visitante hace clic en el botón de reproducción en la imagen de vista previa, se carga el reproductor de video oficial. La vista es contada por YouTube o Vimeo como lo haría normalmente.
4. ¿Cuál es el mejor plugin para la carga diferida de videos?
Recomendamos el plugin 'Lazy Load for Videos' por su simplicidad y efectividad. Muchos plugins de rendimiento populares, como WP Rocket, también incluyen excelentes funciones de carga diferida de videos como parte de sus herramientas de optimización de rendimiento.
Recursos adicionales para acelerar tu sitio
Esperamos que este artículo te haya ayudado a agregar la carga diferida (lazy loading) para videos en WordPress. Si deseas aprender más formas de hacer tu sitio web más rápido, te recomendamos consultar estas guías:
- La Guía Definitiva para Acelerar y Optimizar WordPress – Esta guía completa cubre todo lo que necesitas saber sobre la optimización de la velocidad de tu sitio, desde el caché hasta la compresión de imágenes.
- Cómo Configurar Correctamente una CDN de WordPress – Aprende cómo una Red de Entrega de Contenido (CDN) puede mejorar drásticamente los tiempos de carga de tu sitio para visitantes de todo el mundo.
- Por Qué Nunca Deberías Subir un Video a WordPress – Un análisis más profundo de las razones por las que incrustar videos siempre es mejor para el rendimiento de tu sitio y la experiencia del usuario.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Matt
Please update this article! I’m having a lot of trouble finding up to date information on how to achieve this
Soporte de WPBeginner
Ciertamente echaremos un vistazo a la actualización del artículo
Administrador
Mike
¿Qué sucede si quieres que tus videos de YouTube se reproduzcan en ventanas emergentes en lugar de en la página misma? ¿Aún puedes usar este plugin?
Hurón del caos
Estoy ejecutando Chrome con el plugin de Pinterest en Linux y el video no se reproduce. Incluso cargar la imagen en una segunda pestaña no funciona. Voy a deshabilitar el plugin y ver si el video funciona. Y negativo, el video todavía no se reproduce.
Rabino Khan
Hola, tengo una pregunta sobre la etiqueta condicional de WordPress. en mi plantilla se muestran las etiquetas en el pie de página de las publicaciones en la página de inicio de WordPress. Entonces, ¿cómo ocultar las etiquetas en la página de inicio? Y mostrarlas solo en la página de publicación. Gracias de antemano.
John
Tengo un problema con este plugin. Cuando hago clic en la imagen, el video comienza a reproducirse en miniatura y también debajo de la miniatura.
DebG.
¿Entonces este plugin es adaptable? ¿Funciona con temas adaptables?