Background

Documentación Woocommerce

Manejando videos en nuestro sitio web con Woocommerce

VOLVER

Si estamos pensando subir videos, ya sea para un producto, página o entrada de blog, lo importante es entender las repercusiones en términos de optimización.

  • Video en la portada de la web

Esto podría ser perjudicial para las visitas directas a nuestra página de inicio, ya que por lo general los videos son de alto peso en comparación con las imágenes. Este tipo de práctica no está recomendada, sobre todo si le sumamos el uso del deslizador de fotos con Slider Revolution, el que ya agrega una carga extra a la portada.

De requerir usar un video para la portada, se recomienda crear una imagen con un botón de reproducción que abra un popup para ver el video (esto reduce muchos recursos). Si esto no está dentro del requerimiento y se necesita una auto reproducción del video dentro del sitio, lo óptimo sería cargar éste en Youtube o Vimeo y hacer un enlace desde el reproductor que nos dispone WPBakery o Elementor (este editor depende del theme instalado). Debemos entender que en este caso en particular, si bien no estaremos utilizando recursos internos (propios del servidor), nuestra web tardará en cargar un poco más, debido a que igual genera una solicitud externa que toma tiempo y eso se verá reflejado en el tiempo de carga total del sitio web.

Importante que antes de su carga, optimicemos el video, y para ello, podemos utilizar un programa gratuito como HandBrake (disponible para MAC y Windows). Su uso es muy sencillo, básicamente arrastramos el video, seleccionamos algún preset (método rápido) o hacemos ajuste manual en la pestaña Video (Calidad y Dimensiones si nuestro video es muy grande). Por defecto la calidad aparece en 22, pero si lo queremos ajustar para reducir aún más el peso del video, la recomendación es subirlo como máximo a 30.

 

  • Video en el resto del sitio

Si bien puede ser una alternativa tenerlo interno en alguna página que no reciba todo el flujo de usuarios de golpe, se recomienda la carga del video de forma externa (también optimizado) por lo que se define en el punto 8.3 de Seguridad.

 

  • Seguridad

Trabajar con contenido multimedia, específicamente fotos y videos, es una manera muy simple de quedar expuesto a ataques que involucran el consumo de ancho de banda o transferencia mensual asignada a una cuenta de hosting.

¿cómo funciona este tipo de ataque?

Supongamos que tenemos un video que presentamos a través de nuestro blog o producto, que está cargado internamente (dentro de nuestra biblioteca multimedia de Wordpress) y que pesa 15 MB (es un peso bien bajo para un video). Un tercero decide linkear la URL de ese video en su propio sitio web o un foro de alto flujo, cuya dirección puede ser algo como esto: https://www.nuestraweb.cl/wp-content/uploads/2021/03/video-corto.mp4

Este tercero obtiene esa url y genera un reproductor en este otro sitio o foro externo que recibe 100.000 visitas diarias. La persona se asegura de dejar el video con la función auto-reproducir. Cada una de esas 100.000 visitas estará solicitando el video desde la URL original (https://www.nuestraweb.cl/wp-content/uploads/2021/03/video-corto.mp4), es decir, estará consumiendo el ancho de banda de nuestro sitio web.

 

¿Cuánto estará consumiendo?

Si el video pesa 15 MB, multiplicamos 100.000 solicitudes a esos 15 MB (100.000 x 15) = 1.500 GB (1.5 TB). En menos de 6 horas dejaríamos el sitio abajo por sobre consumo de ancho de banda (Error 509: Bandwidth Limit Exceeded).

Por suerte para los clientes de Segurihost, cuando se alcanzan umbrales altos y extraños de ancho de banda en un sitio web, se realiza una auditoría para determinar si puede ser un ataque y así tomar acciones correctivas.

Por otro lado, si tenemos una campaña de marketing muy exitosa y tenemos 10.000 entradas diarias y cada una de ellas carga un video de 15 MB, tendremos un consumo de 150 GB en un día (a esto hay que sumarle los otros recursos del sitio web: fotos, hojas de estilo, archivos javascript, etc). Aquí la importancia de optimizar nuestras fotos para disminuir su peso y externalizar recursos como los videos, así el ancho de banda se consume en Vimeo o Youtuve.

Esto mismo aplica para las imágenes. El tercero solo obtiene la foto más pesada de nuestro sitio web (https://www.nuestraweb.cl/wp-content/uploads/2021/03/foto-banner.png) cuyo peso podría ser de 2 MB (demasiado peso para una foto, incluso si ésta es grande) y la incrusta en su sitio web o foto de forma oculta (<img src=”https://www.nuestraweb.cl/wp-content/uploads/2021/03/foto-banner.png” width=”0” height=”0”>). Tenemos las mismas 100.000 entradas x 2 MB = 200 GB de consumo, por lo que nos dejan el sitio web abajo nuevamente en menos de 24 horas.

Hablando de la misma campaña de marketing exitosa, que nos trae 10.000 entradas diarias y que cargan esa imagen localmente (localmente, porque no existe intervención de un tercero y somos nosotros responsables aquí), tendríamos un resultado de 10.000 entradas x 2 MB = 20 GB (consumo diario). Podría ser que para planes Emprende, la web quede abajo en menos de 1 semana.

Ahora bien, Segurihost utiliza distintos mecanismos automáticos de optimización y almacenamiento en caché, por lo cual es difícil ver este tipo de consumos a menos que manejemos una web con más de 200 productos y un total de más de 1.000 imágenes no optimizadas. A esto se suma el uso de Cloudflare CDN para aquellos que lo han solicitado para aumentar la velocidad de su sitio web, donde ayuda a reducir también el consumo de ancho de banda.

En resumidas palabras, es por esto que se recomienda a veces en el caso de multimedia, activar la función HOTLINK (Solicitar a Segurishop si sospecha una carga externa de sus fotos) o cargar específicamente los videos en una fuente externa como Youtube o Vimeo.

Importante: La función HOTLINK puede bloquear la visualización de fotos en algunas redes sociales, motivo por el cual no se encuentra activo por defecto, incluso puede generar problemas en la carga de catálogos en Facebook Business.