En esta lección del curso de optimización WordPress vamos a aprender a optimizar vídeos para WordPress.
Los vídeos son muy útiles para transmitir información y ayudan a conectar con el público. Pero por muchas ventajas que tengan los vídeos pesan mucho y si no optimizamos correctamente los vídeos para WordPress pueden perjudicarnos mucho.
A continuación voy a explicarte paso por paso cómo optimizar vídeos y evitar que nos penalicen en las notas de PageSpeed:
Usar formato MP4
MP4, AVI, MKT, MPEG… Son muchos los formatos de vídeos que existen.
¿Pero cuál es el formato recomendado para usar en nuestras webs y que nos perjudiquen lo mínimo posible en la velocidad de carga?
El formato MP4, en la actualidad, es el mejor formato para usar en webs.
Es el más ligero y con mejor calidad.
Así que si queremos usar vídeos en nuestra web deben ser en formato MP4.
Podemos usar muchos conversores online y gratuitos para pasar los vídeos de cualquier formato a MP4 como:
Alojar vídeos localmente, no uses YouTube
Si vas a usar vídeos es mejor evitar el uso de vídeos de YouTube, ya que añaden muchas peticiones extra y además externas (y ya sabemos que las peticiones externas son uno de nuestros peores enemigos).
Es preferible alojar localmente el vídeo y optimizar todos sus aspectos previamente que te explico a lo largo de esta lección.
Para cargar 1 único bloque de vídeo de YouTube la web tiene que cargar 11 archivos, que además no están alojados en nuestro servidor, tal y como te muestro en la siguiente imagen:
Usa la resolución correcta
Lo mismo que hacemos con las imágenes con los vídeos también: subirlos en el tamaño adecuado.
Si nuestra caja de contenido tiene un ancho de 920 píxeles, ¿por qué íbamos a subir un vídeo en FULL HD (1920 x 1080 píxeles)?
Es muy importante modificar la resolución del vídeo para que tenga el tamaño exacto que se mostrará en la web.
Además si bajamos la resolución del vídeo reduciremos su peso y también haremos que la web cargue más rápido. Todo ventajas.
Reduce el peso del vídeo
Después de adaptar la resolución a las necesidades de la web el peso de tu vídeo habrá disminuido bastante, pero nunca es suficiente cuando se trata de buscar la velocidad más rápida de carga.
Puedes usar la siguiente herramienta online gratuita para reducir de forma sencilla los vídeos antes de subirlos a la web:
https://www.videosmaller.com/es/
Y recuerda: un vídeo no debe pesar nunca más de 1MB
Limita el uso de vídeos por página
Lo recomendable es no excederse y usar un máximo de 2 vídeos por página.
No uses vídeos en el ATF
Nunca debemos usar vídeos en el ATF.
Todo lo que aparezca en el ATF no se podrá posponer su carga y el vídeo tendrá que cargarse al 100%, haciendo bajar en picado las notas de Page Speed y aumentando significativamente la velocidad de carga de nuestra web.
Si vas a usar vídeos que sea debajo del ATF.
*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.
No uses 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!
- Los vídeos de fondo no se les puede aplicar Lazy Load
- Los vídeos de fondo siempre deberán ser en FULL HD (o incluso 2K) para que no se vean borrosos en el diseño, aumentando el peso de éste y su velocidad de carga
- Si, además, lo usas en el ATF Google te penalizará seriamente
- Distraen la atención del usuario. Nuestro objetivo es tener un call to action claro y que el usuario interactúe con él
Debemos evitar a toda costa aquellas secciones a tamaño completo en el inicio de la web con un vídeo de fondo en bucle.
¿Os acordáis lo de moda que se pusieron? Pues son tan o más perjudiciales que los famosos sliders en el ATF.
Sin auto reproducción
Los vídeos nunca se deben auto reproducir.
Esta opción, a parte de ser una molestia a nivel de experiencia de usuario, añade más peticiones y peso a nuestra web.
Cuando el usuario quiera ver el vídeo él mismo le dará a reproducir.
Activa 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.
Para ellos podemos activarlo tanto en WP Rocket como en Perfmatters.
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 las lecciones de WP Rocket en el curso de optimización WordPress, donde te explico como configurarlo al 100%
Activar Lazy Load para vídeo en Perfmatters
Para 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ñade 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.
Si tu web va a centrarse en los vídeos usa Vimeo o un CDN
Si tu caso es hacer un uso constante de vídeos, como en una academia, sería recomendable que estudies la posibilidad de hacer uso de Vimeo para alojar tus vídeos o usar un CDN (como hago yo con los vídeos de este curso).
Cómo alojar vídeos en un CDN
Alojar vídeo en una CDN es más sencillo de lo que crees y para ello usaremos Bunny.net.
Tienes una lección donde explico qué es un CDN y cómo configurarlo de forma sencilla en tu web.
Este contenido es visible solo para alumnos del curso de Optimización WordPress de Anaislab.
Para ver el contenido del curso, trucos y snippets para mejorar la velocidad de tu WordPress identifícate o únete
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 con menos de 1 MB de peso
- 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