Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir fácilmente carga diferida para vídeos en WordPress

Los vídeos son fantásticos para aumentar la participación de los usuarios en tu sitio web. Pero incrustarlos puede hacer que tu sitio cargue más despacio, lo que no es bueno para los visitantes.

Una forma de corregirlo es utilizar la carga diferida para los vídeos.

La carga diferida ayuda a que su sitio se cargue más rápido, ya que solo carga los vídeos cuando están a la vista. De este modo, la página no se atasca al cargar todos los vídeos a la vez. Es un truco sencillo que puede mejorar el rendimiento de tu sitio.

En esta guía, le mostraremos cómo añadir fácilmente la carga diferida para vídeos en WordPress.

Adding lazy loading for videos in WordPress

¿Qué es la carga diferida y cómo funciona?

La carga diferida es una técnica que retrasa la carga de los elementos no esenciales de una página web hasta que se necesitan. En el caso de los vídeos, esto significa que solo se cargan cuando se ven.

Cuando incrusta un vídeo en su sitio, es necesario cargar secuencias de comandos y archivos externos adicionales. Esta carga adicional puede afectar negativamente al rendimiento de su sitio web.

Ayuda a la carga diferida de vídeos sustituyendo los vídeos incrustados de YouTube y Vimeo por una imagen de vista previa en la que se puede hacer clic. Cuando los visitantes hacen clic en la imagen, el vídeo se carga y se reproduce.

Como las imágenes son mucho más pequeñas que los vídeos, la técnica de carga diferida mejora notablemente la velocidad de la página.

Consejo de experto: ¿Quiere acelerar su sitio web, pero no está seguro de cómo? Nuestro equipo de expertos puede encargarse de todo, desde auditorías completas de rendimiento hasta configuraciones de caché, establecer una CDN y mucho más. Marque / compruebe nuestros servicios de optimización de la velocidad del sitio hoy mismo.

Ahora que ya conoces las ventajas, veamos cómo hacer lazy load de vídeos de YouTube y Vimeo en WordPress.

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere las instrucciones escritas, siga leyendo.

Cómo añadir carga diferida para vídeos en WordPress

Para añadir carga difer ida para vídeos, lo primero que tienes que hacer es instalar y activar el plugin Lazy Load for Videos.

Lazy Loading for Videos' banner

Este plugin funciona de forma inmediata y no es necesario editar ningún código o script jQuery de carga diferida.

Para comprobar si la carga diferida funciona, basta con ver una entrada o página que contenga un vídeo de YouTube o Vimeo. Observará que la miniatura del vídeo y el botón de reproducción sustituyen a los reproductores por defecto.

A lazy load video with thumbnail and play button

Al hacer clic en la imagen, se cargará el vídeo y se reproducirá.

Es posible que notes un rápido segundo de retraso cuando se carga el vídeo, pero es totalmente normal. No te preocupes, la carga diferida funciona perfectamente.

Ahora, tenga en cuenta que a pesar de que este plugin funciona fuera de la caja, todavía hay ajustes que se pueden configurar en función de sus necesidades. En la pantalla del editor de entradas, puedes elegir la calidad de la miniatura para incrustar vídeos de YouTube.

Controlling YouTube thumbnail  quality for posts and pages

Además de la calidad de las miniaturas, existen otras opciones de personalización.

Puede dirigirse a Ajustes ” Carga diferida para vídeos para marcar / reajustar estas opciones.

Settings page for lazy load for videos WordPress plugin

En la pestaña “General/Styling”, puedes personalizar el aspecto de las miniaturas de los vídeos. Puedes activar el modo adaptable, elegir el estilo del botón de reproducción, utilizar CSS personalizado e incluso activar el marcado schema.org.

Este plugin es compatible con YouTube y Vimeo. Puede encontrar ajustes específicos del proveedor al hacer clic en las respectivas pestañas.

En la pestaña “YouTube”, puedes elegir el color de la barra de progreso, desactivar las cookies, ocultar las anotaciones, etc. Incluso puedes desactivar la carga diferida de los vídeos de YouTube.

Lazy load for YouTube settings

Del mismo modo, en la pestaña de ajustes de Vimeo puedes elegir colores de control, ocultar o mostrar el título del vídeo y desactivar la carga diferida para los vídeos de Vimeo.

Si has hecho algún cambio en estos ajustes, no olvides hacer clic en el botón “Guardar cambios” de la parte inferior para no perder tus progresos.

Consejo extra: Nunca subas vídeos a WordPress

Antes de entrar en las razones por las que debe evitar subir vídeos a su sitio de WordPress, aclaremos la diferencia entre subidos e incrustados.

Subir un vídeo significa almacenar los archivos de vídeo directamente en su sitio, de forma similar a como se almacenan las imágenes en la biblioteca de medios de WordPress. Le recomendamos encarecidamente que no lo haga.

En cambio, para incrustar un vídeo hay que subirlo primero a un sitio de terceros como YouTube. A continuación, incrustas el vídeo en tu blog, lo que permite verlo en tu sitio web mientras está almacenado en otro lugar. Recomendamos incrustar vídeos siempre que sea posible.

Embedding a YouTube video in WordPress

Para saber más acerca de las ventajas de incrustar vídeos en lugar de subirlos a WordPress, puede consultar nuestra guía sobre por qué nunca debería subir un vídeo a WordPress.

Esperamos que este artículo te haya ayudado a añadir la carga diferida para vídeos en WordPress. A continuación, quizá quieras comprobar nuestra guía definitiva sobre velocidad y rendimiento en WordPress o cómo establecer una solución CDN en WordPress para aumentar la velocidad de tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

7 comentariosDeja una respuesta

  1. Matt

    Please update this article! I’m having a lot of trouble finding up to date information on how to achieve this :(

    • WPBeginner Support

      We will certainly take a look at updating the article

      Administrador

  2. Mike

    What happens if you want to be playing your youtube videos in popups instead of on the page itself. Can you still use this plugin?

  3. Ferret of chaos

    I am running chrome with the pintrest plugin under linux and the video will not play. Even loading the image into a 2nd tab will not work. I am going to disable the plugin and see if the video will work. And negative, the video will still not play.

  4. Rabbi Khan

    Hi there I have a question about WordPress conditional tag. in my template displaying tags in post footer on WordPress homepage. So How to hide tags on home page. And display only on post page. Thanks in advance.

  5. John

    I have problem with this plugin. When I click on the image video starts play in thumbnail and under thumbnail too.

  6. DebG.

    So this plugin is responsive? It works with responsive themes?

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.