Deja de matar la velocidad de tu página con videos de fondo pesados y no optimizados
Agregar video a un sitio web generalmente fuerza un compromiso: se ve genial, pero destruye tu tiempo de carga. Un archivo de video estándar de 1080p puede fácilmente ser de 20MB+, lo cual es una sentencia de muerte para usuarios móviles en redes 4G.
SlingSite resuelve el problema del "Video Bloat".
No solo encogemos tu video; creamos un Suite de Streaming HTML5 completo. Para cada video que subes, generamos 18 activos especializados cubriendo cada tamaño de dispositivo, preferencia de navegador y velocidad de conexión.
La estrategia 'Triple-Codec': ¿Por qué un MP4 no es suficiente?
Los navegadores están luchando una guerra sobre formatos de video. Apple prefiere HEVC, Google prefiere VP9, y dispositivos más antiguos solo conocen AVC. Si solo proporcionas un formato, estás sirviendo video de baja calidad o bloqueando usuarios por completo.
Transcodificamos automáticamente tu video en los tres formatos críticos requeridos para una experiencia web moderna y a prueba de balas:
- WebM (codec VP9): El Estándar de Google. Altamente comprimido y cristalino. Preferido por Chrome, Android y Firefox. Usualmente 30-50% más pequeño que MP4 estándar
- MP4 (codec HEVC aka H.265): El Estándar de Apple. La única forma de obtener video de alta eficiencia en iPhones, iPads y Safari (macOS).
- MP4 (codec AVC aka H.264): El Fallback Universal. La "red de seguridad" que funciona en prácticamente todos los dispositivos creados en los últimos 15 años.
No olvides el Poster: ¿Cuál es el secreto para pasar Core Web Vitals?
Un archivo de video toma tiempo para cargar. Mientras se almacena en búfer, tu usuario ve un espacio en blanco—o peor, un cambio de layout. Esto daña tus puntuaciones de Cumulative Layout Shift (CLS) y Largest Contentful Paint (LCP).
Para arreglar esto, necesitas una "Imagen Poster" ligera que cargue instantáneamente.
Para cada tamaño de video (Móvil, Tablet, Escritorio), extraemos el primer frame y lo convertimos en 3 formatos de imagen optimizados: JPG, WebP y AVIF. Esto asegura que incluso antes de que el video comience a reproducirse, tu sitio se vea instantáneo, profesional y visualmente estable.
Preguntas Frecuentes
¿Por qué necesito 6 archivos solo para móvil?
Necesitas 3 formatos de video para asegurar que el navegador pueda elegir el que soporta nativamente (ahorrando batería y datos), y necesitas 3 formatos de imagen para que el navegador pueda cargar la "vista previa" de imagen más ligera posible inmediatamente. Parece muchos archivos, pero el navegador del usuario solo descargará un video y una imagen.
¿Cómo ayuda esto con dispositivos Apple?
Los iPhones y Macs están optimizados para HEVC (H.265). Si les sirves un MP4 estándar, tienen que trabajar más duro para decodificarlo. Si les sirves un WebM VP9, podrían no reproducirlo en absoluto. Al proporcionar una versión HEVC, aseguras que los usuarios de Apple obtengan la calidad más alta con el menor consumo de batería.
¿Cómo lo codifico en mi sitio?
Implementar video responsivo en React puede ser complicado porque las etiquetas HTML <video> estándar no soportan consultas de medios para fuentes como las etiquetas <picture>.
Recomendamos usar la librería open-source @damiarita/react-responsive-video. Maneja automáticamente la lógica compleja de intercambiar fuentes de video e imágenes poster basadas en el dispositivo del usuario, asegurando que solo descarguen exactamente lo que necesitan.
Aquí está lo fácil que es usarlo con los activos que SlingSite genera:
import ReactResponsiveVideo from '@damiarita/react-responsive-video';
<ReactResponsiveVideo
sizes={[
{
width: 1920,
height: 1080,
mediaQuery: '(min-width: 1200px)', // Escritorio
videoSources: [
{ url: 'desktop.webm', format: 'video/webm' }, // VP9
{ url: 'desktop-hevc.mp4', format: 'video/mp4' }, // HEVC
{ url: 'desktop.mp4', format: 'video/mp4' } // AVC
],
posterSources: [
{ url: 'desktop-poster.avif', format: 'image/avif' },
{ url: 'desktop-poster.webp', format: 'image/webp' },
{ url: 'desktop-poster.jpg', format: 'image/jpeg' }
],
},
{
width: 450,
height: 800,
mediaQuery: '(max-width: 768px)', // Móvil
videoSources: [
{ url: 'mobile.webm', format: 'video/webm' },
{ url: 'mobile-hevc.mp4', format: 'video/mp4' },
{ url: 'mobile.mp4', format: 'video/mp4' }
],
posterSources: [
{ url: 'mobile-poster.avif', format: 'image/avif' },
{ url: 'mobile-poster.webp', format: 'image/webp' },
{ url: 'mobile-poster.jpg', format: 'image/jpeg' }
],
},
]}
/>