¿Incrustar vídeos en mi sitio web lo ralentiza?

SÍ, cualquier elemento añadido a su sitio web tiende a tener un impacto en el tiempo de carga de sus páginas. Así que la pregunta es más, cuando se añade vídeos a su sitio web, ¿cuáles son los problemas asociados a la optimización de las páginas web y cómo puede combatirlos? En este artículo, examinaremos en detalle los factores que influyen en los tiempos de carga y veremos cómo solucionar estos problemas en 6 pasos sencillos.

‍

Factores que contribuyen a la rapidez de carga de un sitio web

Echemos un vistazo más detallado a los cuatro factores clave que pueden dificultar la velocidad de carga de tus páginas:

1) Duración del vídeo

Ni que decir tiene que, en comparación con los vídeos de larga duración, sea cual sea la resolución, cuanto más corto sea el contenido (60 segundos o menos), menor será el tamaño del archivo en comparación con el de un vídeo de larga duración. En cualquier caso, tenga en cuenta que los vídeos de entre 20 y 40 segundos consiguen un mayor engagement en las páginas de producto de un sitio comercial.

2) Resolución

El segundo elemento a tener en cuenta es la resolución. Cuanto mayor sea la resolución, mayor será el archivo. Es una buena práctica reducir ligeramente la resolución en los teléfonos móviles, ya que las pantallas son más pequeñas (por lo que se necesitan menos píxeles). Para vídeos cortos, una resolución de 720p será suficiente. Evite la alta definición en móviles, puesto que no se notara la diferencia al nivel visual.

3) Dónde se aloja el archivo de streaming y cómo se carga

Puedes alojar tus vídeos tú mismo en tus propios servidores, pero tus archivos de vídeo siempre serán pesados si no los optimizas. En general, las plataformas de vídeo (ej: YouTube, Vimeo, etc.) están optimizadas para obtener la mejor reproducción: comprimen los archivos de vídeo, los optimizan, etc. El archivo de vídeo está listo para ser «llamado» (es decir, para «aparecer») en una página, pero esto puede llevar algún tiempo en función de los demás elementos que se llamen en dicha página.

4) Audio

Además de la duración del vídeo y su resolución, el sonido asociado al vídeo también influye en la velocidad de la página. Aunque no tiene un impacto significativo, añade un poco de peso a todo el JS que se ejecuta en la página web.

‍

‍

Problemas relacionados con el uso de vídeos «embed»

Cuando se trata de incrustar vídeos en un sitio web, uno de los problemas más comunes es que se añaden nuevos elementos a cargar, además de los ya presentes (imágenes, scripts, texto, chatbot, popups, banners, etc.). Por lo tanto, se requiere cierta pericia técnica para garantizar no solo que los elementos se comporten adecuadamente, sino también que funcionen de manera óptima en los distintos dispositivos. Los vídeos integrados, cuando no están bien optimizados, pueden provocar problemas de retraso acumulativo de página (CLS), que repercuten en la estabilidad visual del sitio web, sobre todo para los visitantes con una conexión débil.

‍

Cómo comprobar la velocidad de una página web

De las investigaciones realizadas se deduce que una buena página web requiere menos de 300 Kib de JavaScript inyectado para que aparezcan los vídeos, que haya 1 o 10 videos en la misma página.
Si se sobrepasa esta cifra, el tiempo de almacenamiento en búfer de los vídeos puede aumentar considerablemente, lo que provocará una mala experiencia para el usuario, que puede verse obligado a abandonar el vídeo inmediatamente.
Google, u otros navegadores, probablemente te penalizarán por ello.

Ejemplos de malas prácticas

A continuación se muestra un ejemplo de reproductor de vídeo que afecta negativamente a la velocidad de las páginas web. Como el JavaScript utilizado por el reproductor de vídeo es de casi 2.000 KiB, el rendimiento global se ve afectado por el contenido de vídeo mostrado en el sitio web y puede tardar mucho más en cargarse.

‍

‍

Pasos para utilizar la herramienta Page Speed Insights de Google

1. Abre PageSpeed Insights (también conocido como Google Lighthouse)
2. Introduzca la URL de su sitio web
3. Haga clic en el botón «Analizar»
4. PageSpeed Insights le proporcionará una puntuación y una serie de recomendaciones para mejorar la velocidad de su sitio web
5. Aplique las recomendaciones de PageSpeed Insights.
6. Vuelva a iniciar PageSpeed Insights para comprobar si la velocidad de su sitio web ha mejorado.

Los resultados deberían parecerse a esto, con JavaScript tardando menos de 100 KiB en cargar el contenido de vídeo, y proporcionando una experiencia agradable a los visitantes.

‍

‍