Optimizar vídeos para WordPress

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.

qué es el ATF

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¬† 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