Velocidad web y Core Web Vitals: guía práctica para sitios empresariales
Qué significan LCP, INP y CLS, cómo medirlos correctamente y qué ajustes de servidor, imágenes y código hacen que un sitio empresarial cargue más rápido.
Los Core Web Vitals son las tres métricas de experiencia de usuario de Google: Largest Contentful Paint (LCP) mide la carga, Interaction to Next Paint (INP) mide la capacidad de respuesta y Cumulative Layout Shift (CLS) mide la estabilidad visual. Para aprobar, una página debe lograr un LCP de 2.5 segundos o menos, un INP de 200 milisegundos o menos y un CLS de 0.1 o menos, medidos en el percentil 75 de las visitas reales. La mayoría de los sitios empresariales mejora más rápido corrigiendo el tiempo de respuesta del servidor, optimizando imágenes, reduciendo JavaScript y reservando espacio para el contenido que carga tarde.
Por qué la velocidad importa en un sitio empresarial
Un sitio lento frustra a los visitantes, sobre todo en conexiones móviles. Google utiliza señales de experiencia de página, incluidos los Core Web Vitals, como parte de sus sistemas de clasificación, aunque el contenido relevante y útil sigue siendo lo más importante. En la práctica, un sitio rápido favorece ambas cosas: las personas permanecen más tiempo y los buscadores pueden rastrearlo con eficiencia.
Las tres métricas explicadas
| Métrica | Qué mide | Bueno | Necesita mejorar | Deficiente |
|---|---|---|---|---|
| LCP | Tiempo hasta que se muestra el elemento visible más grande | 2.5 s o menos | Hasta 4.0 s | Más de 4.0 s |
| INP | Demora entre una interacción del usuario y la siguiente actualización visual | 200 ms o menos | Hasta 500 ms | Más de 500 ms |
| CLS | Cuánto se desplaza inesperadamente el diseño | 0.1 o menos | Hasta 0.25 | Más de 0.25 |
INP reemplazó a First Input Delay (FID) como Core Web Vital en 2024, por lo que los informes antiguos que mencionan FID están desactualizados.
Mida antes de cambiar algo
Existen dos tipos de datos:
- Datos de campo: provienen de usuarios reales de Chrome y son los que Google evalúa. Puede verlos en el informe de Core Web Vitals de Google Search Console y en PageSpeed Insights cuando hay suficiente tráfico.
- Datos de laboratorio: provienen de una prueba simulada, como Lighthouse en Chrome DevTools. Son excelentes para diagnosticar problemas, pero no reemplazan a los datos de campo.
Pruebe las plantillas clave, como la página de inicio, una página de servicio y la de contacto, en móvil, que suele ser el objetivo más difícil.
Cómo mejorar el LCP: servidor e imágenes
El LCP suele estar limitado por dos factores: una respuesta lenta del servidor (Time to First Byte) y una imagen principal pesada.
Mejoras del lado del servidor:
- Use caché de páginas y caché de objetos cuando su plataforma lo permita.
- Active HTTP/2 o HTTP/3 y compresión Brotli o gzip.
- Coloque una CDN como Cloudflare delante del sitio para servir archivos estáticos cerca de los visitantes.
- Ajuste la base de datos: las consultas lentas en MySQL, MariaDB o PostgreSQL suelen esconderse detrás de páginas lentas.
Mejoras en las imágenes:
- Sirva formatos modernos como WebP o AVIF en tamaños razonables, con
srcsetpara distintas pantallas. - No aplique carga diferida (lazy loading) a la imagen principal; priorícela.
<link rel="preload" as="image" href="/img/hero-1600.webp" fetchpriority="high">
<img src="/img/hero-1600.webp" width="1600" height="900"
alt="Equipo de oficina trabajando" fetchpriority="high">
Cómo mejorar el INP: menos JavaScript en el hilo principal
Un INP deficiente suele indicar que el navegador está ocupado ejecutando scripts cuando alguien toca o hace clic. Soluciones comunes:
- Elimine librerías, plugins y etiquetas de seguimiento que no se usan.
- Cargue los scripts no críticos con
defero después de la interacción del usuario. - Divida las tareas largas en partes más pequeñas para que el navegador pueda responder entre ellas.
- Revise los widgets de terceros, como chat, mapas y videos incrustados, que son responsables frecuentes.
Cómo mejorar el CLS: reserve espacio
El desplazamiento del diseño ocurre cuando aparece contenido que empuja a otros elementos. Para evitarlo:
- Defina siempre
widthyheight(oaspect-ratioen CSS) en imágenes y videos. - Reserve espacio para banners, anuncios y contenido incrustado antes de que carguen.
- Use
font-display: swapcon fuentes alternativas similares, o precargue las fuentes clave.
Un orden de trabajo práctico
- Revise en Search Console los grupos de URL que no aprueban.
- Corrija el tiempo de respuesta del servidor y la caché.
- Optimice la imagen LCP de las plantillas clave.
- Elimine o difiera el JavaScript innecesario.
- Corrija los desplazamientos de diseño.
- Vuelva a medir; los datos de campo se actualizan en una ventana móvil de 28 días, así que dé tiempo.
Nuestro servicio de optimización de rendimiento aborda servidores, bases de datos y código front-end en conjunto, y nuestros sitios web a medida se programan desde cero teniendo en cuenta estas métricas.
Preguntas frecuentes
¿Por qué PageSpeed Insights muestra puntajes distintos cada vez?
Las pruebas de laboratorio varían según las condiciones de red y del servidor. Concéntrese en la sección de datos de campo y en las tendencias, no en un puntaje aislado.
¿El hosting afecta los Core Web Vitals?
Sí, principalmente a través del tiempo de respuesta del servidor, que influye directamente en el LCP. Un servidor compartido sobrecargado o una base de datos sin ajustar pueden frenar un sitio que por lo demás está bien construido.
¿Es necesario un puntaje perfecto en Lighthouse?
No. El objetivo es aprobar los Core Web Vitals con usuarios reales y ofrecer una experiencia rápida y cómoda. Perseguir un puntaje de laboratorio perfecto rara vez compensa.
Solicite una revisión de rendimiento
Si su sitio se siente lento o Search Console reporta páginas que no aprueban, solicite una evaluación de TI gratuita e identificaremos qué lo está frenando.
