Perfil
Panel
Cerrar sesión
Índice
En pocas palabras
- Un vídeo pesado que se reproduce automáticamente puede perjudicar las métricas principales de rendimiento. El efecto real debe medirse en la página concreta.
- Una burbuja de vídeo puede cargarse sin bloquear la primera visualización, pero eso no garantiza que los Core Web Vitals permanezcan sin cambios.
- Prepara un mensaje breve que explique quién eres, cómo ayudas y qué puede hacer el visitante a continuación.
¿El vídeo puede ralentizar tu sitio web?
Depende de cómo se cargue y se muestre.
Un vídeo de fondo pesado que empieza solo puede afectar a los Core Web Vitals y consumir muchos datos. Una burbuja de vídeo puede cargarse después del contenido esencial. El tamaño exacto y el efecto dependen de la integración, el archivo de vídeo y el dispositivo utilizado.
La diferencia está sobre todo en la implementación.
Pueden aparecer problemas de rendimiento cuando un vídeo o un script bloquea la visualización, ocupa el hilo principal o desplaza el contenido después de mostrarse. Los atributos async y defer pueden reducir el bloqueo durante la carga, pero solo son una parte de la solución. La prioridad de los recursos, la respuesta del servidor, el tamaño de los archivos, los espacios reservados y el código de terceros también influyen en el LCP, el INP y el CLS. Mide la página terminada en condiciones reales.
Las mediciones son más útiles que las afirmaciones generales.
No existe una cifra universal documentada que indique cuántos milisegundos añade un widget de vídeo en ordenador o móvil. El efecto puede ser pequeño con un script ligero y un vídeo que se carga más tarde, pero mayor en un dispositivo modesto o con una conexión lenta. Los reproductores integrados también pueden cargar scripts y seguimiento adicionales. Compara la página antes y después en las mismas condiciones.
El tamaño del archivo de vídeo sigue siendo importante.
Comprime el vídeo según sus dimensiones reales de visualización y utiliza formatos compatibles con los navegadores de tu público. Una resolución muy alta rara vez aporta algo en una burbuja pequeña. No existe un límite universal de cinco megabytes ni una única resolución ideal. Ajusta la calidad, la duración y la frecuencia de imágenes al público, y prueba sobre todo en móvil y con una conexión más lenta.
¿El widget afecta realmente a la velocidad de la página?
Una burbuja de vídeo puede diseñarse para no bloquear la primera visualización. Eso no significa que su efecto sobre los Core Web Vitals sea siempre nulo.
CompleteGreet puede cargarse con async y defer para que el navegador siga procesando la página mientras descarga el script. Aun así, hay que evaluar los demás recursos y el momento de la inicialización.
El resultado debe medirse para el LCP, el INP y el CLS en la página real y en los dispositivos relevantes.
Las recomendaciones de Google sobre Web Vitals aconsejan evitar que el código de terceros bloquee el contenido esencial, pero no describen ninguna solución que garantice un rendimiento idéntico.
Un archivo de vídeo puede ocupar varios megabytes, mientras que el script suele ser mucho más ligero. El tamaño exacto de los recursos de CompleteGreet debe comprobarse en la pestaña Red del navegador. Carga el vídeo solo cuando sea necesario y compara su peso con el de otros elementos multimedia pesados de la página.
Las mediciones en móvil pueden ser muy distintas de las obtenidas en ordenador por el procesador, la red y el tamaño de la pantalla. Prueba ambos antes de publicar.
Algunas plataformas colocan los scripts en la parte superior de la página, otras al final del documento o dentro de una integración gestionada. No muevas el código sin seguir el proceso de instalación correspondiente. Comprueba si el script bloquea el análisis del documento y si su ubicación afecta al funcionamiento.
#cg-ig-E5 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-E5::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-E5 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 8px 0 20px 0;
text-align: center;
line-height: 1.3;
}
#cg-ig-E5 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
text-align: center;
margin-bottom: 24px;
}
#cg-ig-E5 .cg-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
#cg-ig-E5 .cg-scenario {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-E5 .cg-scenario-label {
font-size: 12px;
font-weight: 600;
color: #4a4a68;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
text-align: center;
}
#cg-ig-E5 .cg-timeline {
display: flex;
flex-direction: column;
gap: 8px;
}
#cg-ig-E5 .cg-timeline-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
#cg-ig-E5 .cg-bar {
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
padding-left: 8px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
}
#cg-ig-E5 .cg-bar-html {
background: #3D5ACE;
width: 40%;
}
#cg-ig-E5 .cg-bar-css {
background: #5a7ae0;
width: 30%;
}
#cg-ig-E5 .cg-bar-js {
background: #7a9af0;
width: 25%;
}
#cg-ig-E5 .cg-bar-widget {
background: #E48333;
width: 20%;
margin-left: auto;
}
#cg-ig-E5 .cg-bar-async {
background: repeating-linear-gradient(45deg, #E48333, #E48333 4px, #f0954a 4px, #f0954a 8px);
width: 20%;
margin-left: auto;
opacity: 0.8;
}
#cg-ig-E5 .cg-time-label {
font-size: 11px;
color: #7a7a96;
min-width: 45px;
}
#cg-ig-E5 .cg-result-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 12px 16px;
text-align: center;
margin-top: 12px;
}
#cg-ig-E5 .cg-result-text {
font-size: 13px;
color: #4a4a68;
font-weight: 600;
}
#cg-ig-E5 .cg-result-highlight {
color: #3D5ACE;
}
#cg-ig-E5 .cg-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}
#cg-ig-E5 .cg-feature {
text-align: center;
padding: 12px 8px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #e2e2ea;
}
#cg-ig-E5 .cg-feature-icon {
width: 32px;
height: 32px;
background: #3D5ACE;
border-radius: 50%;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
#cg-ig-E5 .cg-feature-label {
font-size: 12px;
color: #4a4a68;
font-weight: 600;
line-height: 1.3;
}
#cg-ig-E5 .cg-cta {
text-align: center;
margin-top: 16px;
}
#cg-ig-E5 .cg-cta-link {
display: inline-block;
font-size: 14px;
color: #3D5ACE;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: background 0.2s;
}
#cg-ig-E5 .cg-cta-link:hover {
background: rgba(61, 90, 206, 0.08);
}
#cg-ig-E5 .cg-source {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-E5 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-E5 {
padding: 16px;
}
#cg-ig-E5 .cg-title {
font-size: 18px;
}
#cg-ig-E5 .cg-comparison {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-features {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-bar {
font-size: 10px;
}
}
Ejemplo de carga de CompleteGreet
La página puede mostrarse primero y el widget de vídeo cargarse después
Fuente: recomendaciones generales sobre rendimiento web. Los tiempos de la ilustración son ejemplos.
Consulta los datos HTML estáticos anteriores para ver todos los detalles.
Cómo preparar tu primera presentación en vídeo
Empieza por el mensaje. Escribe unas frases breves para decir quién eres, cómo ayudas y qué puede hacer el visitante después. La duración debe depender de la pregunta y de la página, no de una regla fija de veinte segundos.
Graba con un dispositivo que ofrezca una imagen nítida y un sonido claro. La luz natural puede servir, pero lo más importante es que se vea el rostro y se entienda la voz. Mira al objetivo cuando quieras dirigirte directamente al espectador.
Sube el archivo y utiliza la integración recomendada para tu plataforma. Una burbuja de vídeo debe colocarse donde resulte útil, sin tapar la navegación, el consentimiento, los formularios ni los botones de compra. Si no aparece, revisa la integración y los ajustes de publicación. No des por hecho que todos los sistemas aceptan el mismo script en el mismo lugar.
La ubicación debe elegirse según la página y la tarea.
Las páginas de precios, contacto y reserva pueden ser buenos lugares para probar porque muestran una intención más clara. Eso no significa que siempre conviertan mejor. La página de inicio puede recibir más tráfico y cumplir otro objetivo. Empieza por una página, define una acción esperada y compara los resultados antes de ampliar la solución.
Mide, entre otras cosas, la tasa de reproducción y la realización de la acción esperada. La primera puede decirte algo sobre la miniatura y la ubicación, mientras que los formularios, las compras o las reservas muestran si la acción se completa. Las visualizaciones por sí solas no bastan, pero tampoco un porcentaje de conversión aislado sin una muestra suficiente ni tráfico comparable.
No existe un umbral fijo de quinientos visitantes ni una duración de una semana que garantice datos fiables. El periodo debe incluir suficiente tráfico y acciones para limitar las variaciones aleatorias. Cambia el mensaje, la ubicación o las reglas de visualización de uno en uno y registra con precisión cada cambio.
Muchos propietarios dudan antes de añadir vídeo por miedo a ralentizar la carga y empeorar la experiencia.
Los siguientes apartados explican cómo una solución de vídeo moderna puede influir en los Core Web Vitals y por qué la página final debe medirse en la práctica.
CompleteGreet puede integrarse con carga asíncrona y diferida para que el navegador siga mostrando la página mientras descarga el script. Esto reduce el riesgo de bloqueo, pero no garantiza que el LCP, el INP o el CLS permanezcan sin cambios. También hay que evaluar el espacio reservado para el widget, su inicialización, los recursos de vídeo y las interacciones con otros códigos de terceros.
Entender los límites técnicos
Las integraciones de vídeo clásicas pueden cargar el hilo principal o descargar recursos grandes demasiado pronto. Una solución que espera a que el documento esté listo puede reducir esa carga durante la primera visualización. Aun así, no es posible prometer de forma general una respuesta inferior a cien milisegundos, porque el resultado depende del dispositivo, la red y el resto de la página.
Las cifras de solicitudes no dicen nada directamente sobre la carga del servidor o el ancho de banda. Mide por separado los resultados comerciales y el rendimiento técnico. Cargar el vídeo después de una interacción puede reducir la transferencia inicial, pero el tráfico de red real debe comprobarse en la solución final.
Los widgets de vídeo no tienen por qué ralentizar un sitio, pero la carga diferida tampoco garantiza resultados idénticos. Utiliza datos de campo y pruebas controladas antes y después. Después valora si los resultados comerciales compensan un posible coste técnico.
Los precios y las condiciones actuales aparecen en la página de precios. No se puede prometer que un widget añada exactamente cero milisegundos a la carga inicial.
Preguntas frecuentes
¿Un widget de vídeo puede perjudicar los Core Web Vitals?
Depende de la integración, el archivo, la inicialización y el resto de la página. Async y defer pueden reducir el bloqueo del análisis, pero no garantizan que el LCP, el INP o el CLS permanezcan iguales. Prueba la página final con PageSpeed Insights, Lighthouse y, si es posible, datos de campo antes y después del cambio.
¿Qué tamaño tiene una presentación en vídeo en comparación con una integración de YouTube?
El tamaño varía según la duración, la resolución, el códec y la compresión. Una integración de YouTube puede descargar el reproductor, seguimiento y otros recursos, mientras que una solución alojada por tu cuenta tiene otros costes. Compara las solicitudes de red y los volúmenes reales de tu página en lugar de usar tamaños fijos.
¿Una burbuja de vídeo puede ralentizar el sitio en móvil?
Puede influir en el rendimiento móvil si el script, el vídeo o el espacio reservado son pesados. La carga diferida, los archivos adaptados y un espacio estable pueden reducir ese efecto. Prueba en dispositivos móviles reales y conexiones más lentas, no solo en un ordenador rápido.
¿El vídeo ayuda o perjudica al posicionamiento en Google?
El vídeo puede hacer que una página resulte más útil si responde a una pregunta real, pero no es un atajo hacia una mejor posición. Incluye un texto claro, datos de vídeo adecuados, buena accesibilidad y una carga rápida. La visibilidad depende de la calidad general y de la implementación técnica.
¿Cómo puedo comprobar rápidamente el efecto del widget sobre la velocidad?
Prueba la misma dirección con PageSpeed Insights o Lighthouse antes y después, en condiciones idénticas. Revisa el LCP, el INP y el CLS, además de las solicitudes de red, el trabajo del hilo principal y los recursos que bloquean la visualización. Completa las pruebas de laboratorio con datos de campo cuando sea posible.
¿Pueden funcionar varios widgets de vídeo en la misma página sin causar grandes problemas de rendimiento?
Pueden funcionar varios widgets, pero el efecto depende de si comparten el script, del momento en que se carga cada vídeo y del tamaño de los archivos. No uses un límite total fijo sin medir. Prueba una burbuja y después varias en los dispositivos previstos, y descarga los vídeos solo cuando sean necesarios.
¿Por qué baja mi puntuación de PageSpeed después de añadir un vídeo?
La causa puede ser un archivo grande, una transferencia de red demasiado temprana, demasiado JavaScript, espacios reservados inestables o una carga síncrona. Utiliza los datos concretos del informe para comprimir los recursos adecuados, aplazar lo que pueda esperar y reservar espacio en el diseño. Vuelve a medir después de cada cambio en lugar de suponer que una sola técnica lo resuelve todo.
