Contenido
¿Quieres aprender cómo optimizar vídeos en WordPress para que tu sitio cargue rápido y se posicione en los buscadores? No te preocupes, ¡estás en el lugar correcto! En esta entrada te mostraré los pasos clave para comprimir y optimizar vídeos para WordPress. ¡Prepárate para hacer que tus vídeos destaquen sin ralentizar tu sitio!
En primer lugar, descubrirás el formato ideal para tus vídeos en WordPress y cómo convertirlos fácilmente. También aprenderás cómo y dónde alojar los vídeos en lugar de depender de YouTube, lo cual mejorará la velocidad de carga. Y eso no es todo, te enseñaré cómo ajustar la resolución y reducir el tamaño del vídeo, utilizando herramientas gratuitas en línea.
Además, descubrirás consejos para evitar errores comunes cuando añadimos vídeos a nuestra web, como utilizar vídeos en el área visible sin hacer scroll y limitar el número de vídeos por página. ¡Y no olvides activar la función de Lazy Load para optimizar aún más la carga de tus vídeos!
Entonces, ¿estás listo para dominar el arte de optimizar vídeos en WordPress? ¡Vamos a ello!
Usar formato MP4
Seguro has escuchado hablar de MP4, AVI, MKT, MPEG y otros formatos de vídeo. Pero, ¿cuál es el mejor para usar en tu sitio web sin comprometer la velocidad de carga? El formato MP4.
El MP4 es el formato más ligero y ofrece una calidad excelente. Así que, si deseas agregar vídeos a tu web, asegúrate de que estén en formato MP4. ¿Pero qué hacer si tienes vídeos en otros formatos? ¡No te preocupes!
Existen muchos conversores online y gratuitos que te permitirán convertir tus vídeos a MP4 fácilmente:
Recuerda que optimizar tus vídeos en WordPress es clave para mantener una carga rápida y brindar una experiencia de primera a tus usuarios. ¡No te quedes atrás! Sigue estos consejos y convierte tus vídeos al formato MP4. ¡Tu web lo agradecerá!
Alojar vídeos localmente, no uses YouTube
Si estás pensando en añadir vídeos a WordPress te recomiendo que evites el uso de vídeos de YouTube. ¿Por qué? Porque esos vídeos añaden un montón de solicitudes extra, ¡y eso es como un enemigo invisible que ralentiza tu sitio!
Para cargar un solo bloque de vídeo de YouTube tu web tiene que cargar ¡11 archivos diferentes!
¡Y lo peor es que esos archivos ni siquiera están alojados en tu propio servidor!
Esta imagen muestra todos los scripts que la web tienen que cargar para visualizar un bloque de YouTube:
¡Eso es un auténtico caos! Así que siempre aloja tus vídeos localmente en tu propio servidor y optimízalos siguiendo los consejos que te doy en esta guía.
Usar la resolución correcta
¡Asegúrate de usar la resolución correcta para tus vídeos en WordPress y verás cómo tu sitio web se carga a toda velocidad! Es tan importante como ajustar las imágenes a medida tan y como te enseñé anteriormente. Piénsalo, si el ancho de tu contenido es de 780 píxeles, ¿por qué subir un vídeo en alta definición (1920 x 1080 píxeles)? No tiene sentido, ¿verdad?
Aquí viene lo bueno: al modificar la resolución del vídeo para que se ajuste perfectamente al tamaño de tu web, no solo reducirás el peso del archivo, sino que conseguirás que el vídeo se cargue mucho más rápido. ¡Es una doble victoria!
Así que ya sabes, la próxima vez que subas un vídeo a tu sitio WordPress, asegúrate de adaptar su resolución al tamaño exacto en el que se mostrará.
Reducir el peso del vídeo
Después de ajustar la resolución de tu vídeo para que se adapte perfectamente a las necesidades de tu web, es probable que su peso ya haya disminuido bastante. ¡Pero no te relajes! Cuando se trata de alcanzar la máxima velocidad de carga, nunca es suficiente.
Aquí viene al rescate una herramienta online gratuita que te facilitará la vida:
Con esta herramienta podrás comprimir vídeos de forma sencilla antes de subirlos a WordPress.
Recuerda, uno de los secretos para un sitio web veloz y ágil es asegurarse de que tus vídeos no pesen nunca más de 1 MB. Así que no te excedas, haz que tus vídeos sean ligeros como una pluma.
Limitar el uso de vídeos por página
Vale, seguro que tienes una gran cantidad de vídeos increíbles para compartir en tu web, pero recuerda que menos es más. Para lograr una experiencia de carga veloz y optimizada, lo recomendable es no excederse y utilizar un máximo de 2 vídeos por página.
No usar vídeos en el ATF (Above the fold)
Todo lo que se encuentre en esa parte visible de tu sitio sin necesidad de hacer scroll (ATF), se cargará al instante, ¡y eso incluye los vídeos! Esto puede tener consecuencias desastrosas para el rendimiento de tu página.
*ATF: Above the fold, la parte visible de tu web sin tener que hacer scroll.
El ATF es lo que te señalo con la flecha en la siguiente imagen.
Imagina que tienes un vídeo en el ATF, eso significa que cuando alguien visite tu página, ese vídeo se cargará automáticamente, sin darle la opción al usuario de postergar su reproducción. ¿Y sabes qué pasa entonces? Las notas de PageSpeed se desploman como un castillo de naipes.
Entonces, ¿qué podemos hacer si queremos utilizar vídeos en nuestra web? La solución es simple: coloca los vídeos debajo del ATF. Es decir, muéstralos un poquito más abajo en la página, después de la parte visible inicial. De esta manera, podrás postergar su carga y mejorarás el rendimiento de tu sitio.
Recuerda que en la guía de WP Rocket te explico paso a paso cómo postergar la carga de imágenes y vídeos en WordPress.
Evitar utilizar vídeos de fondo
Google le ha declarado la guerra a los vídeos de fondo que se pusieron tan de moda. ¡Y con razón!
¿Sabías que los vídeos de fondo no se les puede aplicar Lazy Load? Eso significa que se cargan de inmediato, ralentizando la velocidad de tu sitio web. Además, estos vídeos siempre deben ser en resolución Full HD (¡o incluso 2K!) para que no se vean borrosos en el diseño, lo cual aumenta el peso del sitio y su velocidad de carga.
Pero eso no es todo. Si utilizas vídeos de fondo en la parte superior de tu página (es decir, en el ATF), Google te penalizará seriamente. Además, estos vídeos distraen la atención del usuario, ¡y eso no es lo que queremos! Nuestro objetivo es tener un call to action claro y lograr que el usuario interactúe con él.
Así que, evitemos a toda costa esas secciones a tamaño completo en el inicio de nuestra web con un vídeo de fondo en bucle. ¿Te acuerdas de lo de moda que se pusieron? Pues déjame decirte que son tan o más perjudiciales que los famosos sliders en el ATF.
En resumen:
- Los vídeos de fondo no se les puede aplicar Lazy Load
- Los vídeos de fondo siempre tienen una mayor resolución
- Si además lo usas en el ATF Google te penalizará seriamente
- Distraen la atención del usuario
Evitar la reproducción automática
Ahora vamos a hablar de algo importante: la reproducción automática de vídeos en WordPress. Es algo que debes evitar por completo. ¿Por qué? Pues, aparte de ser un fastidio para la experiencia de usuario, también genera más solicitudes y carga adicional en nuestra web. ¡Nada bueno!
¿A quién le gusta que le interrumpan sin previo aviso? A nadie, ¿verdad? Pues lo mismo ocurre con los vídeos en tu sitio. Queremos que los usuarios tengan el poder de decidir cuándo reproducir un vídeo. Por eso, siempre es mejor esperar a que el usuario haga clic en “reproducir”.
Además, ten en cuenta que cada vez que se reproduce un vídeo automáticamente se realizan más solicitudes y eso aumenta el tiempo de carga de la web.
Así que recuerda, ¡no permitas la reproducción automática de vídeos! Deja que sea el usuario quien decida cuándo darle al play.
Activar el Lazy Load para vídeos
De la misma manera que aplazamos la carga de las imágenes que el usuario no está viendo en pantalla en ese mismo momento, podemos hacer lo mismo con los vídeos.
Tienes dos opciones para activar el Lazy Load: WP Rocket y Perfmatters. Ambos plugins te permitirán posponer la carga de tus vídeos hasta que realmente sean visibles en pantalla
No actives el Lazy Load con varias herramientas. Elige solo 1 plugin con el que activar Lazy Load, tanto para vídeos como para imágenes.
Activar Lazy Load para vídeo en WP Rocket
Para ello nos vamos a WP Rocket > Medios y activamos las opciones Habilitar para iframes y vídeos y Reemplaza el iframe de Youtube con una imagen en vista previa.
Tienes disponible la guía de WP Rocket en el curso de optimización WordPress
Activar Lazy Load para vídeo en Perfmatters
ara ellos nos vamos a Perfmatters > Lazy Loading y activamos las opciones Images, iFrames and Videos y Youtube Preview Thumbnails.
Tienes disponible la lección de Perfmatters en el curso de optimización WordPress, donde te explico como configurarlo al 100%
Añadir siempre una “carátula”
Aunque hayamos establecido que se sustituya el iframe del vídeo por una vista previa, nunca está de más añadir nuestra propia carátula en formato imagen para ayudar a aplazar la carga del vídeo.
Por ejemplo, en Elementor tenemos la opción de poner una “carátula”.
Esto lo que hará es poner una imagen “por encima” del vídeo y éste no se reproducirá hasta que el usuario no haga click encima.
Lo recomendable es sacar una captura de pantalla del vídeo y añadirlo como “carátula”.
Recuerda usar JPG y evitar el uso de PNG.
Alojar vídeos en Bunny.net, alternativa a Vimeo
Si estás buscando una forma eficiente de alojar y optimizar vídeos en tu sitio web, te recomiendo considerar Bunny.net como una excelente alternativa a Vimeo. Tanto si necesitas compartir vídeos constantemente, como en el caso de una academia online, o si simplemente quieres mejorar el rendimiento de tus vídeos, Bunny.net puede ser la solución que estás buscando.
Tienes una lección donde explico qué es un CDN y cómo configurarlo de forma sencilla en tu web.
Cómo alojar vídeos en el CDN Bunny.net
Alojar tus vídeos en una CDN (Red de Distribución de Contenido) es más sencillo de lo que puedes imaginar, y Bunny.net hace que este proceso sea especialmente fácil. Aquí te explico cómo hacerlo:
Recuerda haber optimizado previamente los vídeos para WordPress como te he enseñado en esta lección.
- Vídeo en formato MP4
- Vídeo más ligero posible
- Usar resolución adecuada
- No usar Youtube
- No auto reproducir los vídeos
- No usar vídeos de fondo
- No usar vídeos en el ATF
- No usar más de 2 vídeos por página
- Añadir una carátula a los vídeos
- Activar el Lazy Load para los vídeos
- Usar un CDN para alojar los vídeos
Conclusión
En conclusión, si deseas optimizar vídeos en WordPress para garantizar una carga rápida y un buen posicionamiento en los buscadores, aquí tienes los pasos clave. En primer lugar, asegúrate de utilizar el formato MP4, que es ligero y ofrece una excelente calidad. Si tienes vídeos en otros formatos, puedes utilizar conversores online gratuitos para convertirlos fácilmente.
En lugar de depender de YouTube, te recomiendo alojar los vídeos localmente en tu propio servidor. Esto evitará cargas adicionales y solicitudes innecesarias en tu sitio. Además, ajusta la resolución de los vídeos para que se adapten al tamaño de tu sitio web, reduciendo así su peso y mejorando la velocidad de carga.
Limita la cantidad de vídeos por página y evita utilizar vídeos en el área visible sin hacer scroll (ATF). Además, evita el uso de vídeos de fondo, ya que ralentizan la carga y pueden distraer a los usuarios. No permitas la reproducción automática de vídeos y activa la función de Lazy Load para posponer la carga de los vídeos hasta que sean visibles en pantalla.
Finalmente, considera alojar tus vídeos en Bunny.net, una alternativa a Vimeo que ofrece una forma eficiente de alojar y optimizar vídeos en tu sitio web. Utilizar un CDN como Bunny.net puede mejorar aún más la velocidad de carga de tus vídeos.
Siguiendo estos consejos y optimizando tus vídeos para WordPress, podrás garantizar una experiencia de usuario óptima y mejorar el rendimiento de tu sitio web en los motores de búsqueda.
