Mira datos reales, no solo una nota verde
Si Lighthouse muestra 95 pero la gente dice que el sitio es lento, no confío en una sola nota verde. Primero miro grupos reales de URL en Search Console y luego busco el culpable en PageSpeed y DevTools.
El error que eliminaría primero: Cargar con lazy-load la imagen hero.
Qué preparar y qué resultado esperar
- Resultado: Sabes qué recurso o script ralentiza la página y puedes verificar la corrección con datos de campo, no solo con una prueba de laboratorio.
- Abre Search Console → Core Web Vitals y separa Mobile/Desktop. Para la URL problemática, ejecuta PageSpeed Insights.
- Mantén los datos de origen y los permisos de acceso separados del resultado para poder verificar qué hizo realmente el trabajo de velocidad y Core Web Vitals.
- Objetivos de buen resultado: LCP por debajo de 2,5 s, INP por debajo de 200 ms y CLS por debajo de 0,1. Tras la corrección, pulsa start validation en Search Console.
Encuentra el problema principal y corrígelo de uno en uno
- Encuentra la URL problemática
En Search Console abre el grupo del problema y luego la URL concreta. Pégala en PageSpeed Insights y mira cuál es el elemento LCP.
Проверьте: Queda claro qué es lo que más espera el usuario.
Если не сработало: Revisa la página en Chrome DevTools Performance con un perfil móvil.
- Corrige la primera pantalla
Comprime la imagen hero, define dimensiones y no apliques lazy-load al visual principal. Aplaza widgets secundarios y scripts de terceros.
<img src="/hero.webp" width="1200" height="700" fetchpriority="high" alt="Técnico reparando un aire acondicionado">Проверьте: El visual principal aparece sin esperar JS pesado.
Если не сработало: Sustituye vídeo/animación por un primer fotograma estático para la prueba.
- Elimina saltos y tareas largas
Define width/height para imágenes e iframes, reserva espacio para banners, recorta JavaScript pesado y divide las tareas largas.
Проверьте: En una pantalla móvil, los elementos no saltan durante la carga.
Если не сработало: Desactiva los widgets de terceros uno a uno y encuentra el culpable.
- Prueba un escenario real
En DevTools activa una CPU lenta y red móvil, recarga la página y graba Performance. Compara antes y después en la misma URL.
Проверьте: La corrección mejoró la métrica necesaria, no solo la puntuación general.
Если не сработало: Revierte el último cambio y pruébalo de forma aislada.
Primero corrijo el elemento LCP
Objetivos de buen resultado: LCP ≤ 2,5 s, INP < 200 ms, CLS < 0,1. Si el LCP es la imagen hero, no pongas `loading=lazy`: define dimensiones, un formato moderno y `fetchpriority=high`. Las imágenes por debajo de la primera pantalla, en cambio, sí deben cargarse de forma diferida.
Para CLS, reserva espacio para imágenes, vídeo, iframes, chat y el banner de cookies. Para INP, abre DevTools → Performance y busca tareas largas: chats, mapas, sliders y varios widgets de analítica a la vez.
<img src="/assets/hero.avif" width="1440" height="900" fetchpriority="high" alt="Equipo trabajando en un proceso">No confundas el laboratorio con usuarios reales
Registra URL, dispositivo, fuente de datos, LCP, INP y CLS antes del cambio. Tras la corrección, vuelve a comprobar PageSpeed y DevTools en la misma URL y espera a que se actualicen los datos de campo de Search Console. Si solo arreglas la puntuación pero dejas un formulario lento o un botón que salta, el usuario no tendrá una mejor experiencia.
- Desactiva primero los widgets de terceros uno a uno.
- No apliques lazy-load al visual principal.
- No trates los datos móvil y escritorio como una sola métrica.
Una prueba: un culpable
Primero desactiva un widget de terceros, mide de nuevo y registra el resultado. Luego restáuralo y revisa el siguiente. No reescribas todo el frontend de golpe: si no, vuelves a la versión anterior y sigues sin conocer la causa.
Para cada grupo de URL guarda `metric`, `device`, `source`, `before`, `after`, `change`, `owner` y `date`. Si el problema principal es un hero pesado, optimízalo; si es INP, recorta JavaScript. No corrijas CLS cambiando una fuente si el salto lo provoca un espacio publicitario.
LCP, INP y CLS: qué comprobar exactamente
| Criterio | Pregunta | Buena señal |
|---|---|---|
| Entrada | ¿Qué entra exactamente en el trabajo de velocidad y Core Web Vitals? | Abre Search Console → Core Web Vitals y separa Mobile/Desktop. Para la URL problemática, ejecuta PageSpeed Insights. |
| Acción | ¿Qué puede hacer el sistema por su cuenta? | Solo acciones predefinidas, sin acceso a toda la cuenta |
| Verificación | ¿Cómo sabes que el resultado se puede aceptar? | Objetivos de buen resultado: LCP por debajo de 2,5 s, INP por debajo de 200 ms y CLS por debajo de 0,1. Tras la corrección, pulsa start validation en Search Console. |
| Fallo | ¿Adónde va un caso poco claro? | Compara Field data y Lab data, y luego corrige el único recurso más pesado; no cambies CDN, fuente y todo el JavaScript a la vez. |
Qué debe cambiar después de la configuración
Sabes qué recurso o script ralentiza la página y puedes verificar la corrección con datos de campo, no solo con una prueba de laboratorio.
Qué aceleraciones dañan por accidente la primera pantalla
Cargar con lazy-load la imagen hero.
Corregir solo la nota de laboratorio e ignorar los datos reales.
Olvidar las dimensiones de imágenes e iframes.
Añadir otro widget cuando la primera pantalla ya está sobrecargada.
Cuándo la velocidad exige trabajo de arquitectura
Necesitas un especialista si los puntos lentos implican el CMS, el renderizado en servidor, un bundle JS grande o varios sistemas externos.
Qué revisar tras la optimización
¿Por qué PageSpeed y Search Console muestran cifras distintas?
PageSpeed combina una prueba de laboratorio con los datos de campo disponibles, mientras que Search Console usa visitas reales agregadas en un periodo.
¿Hace falta una puntuación de 100?
No. Importan más un rendimiento estable de las páginas clave y buenas métricas reales en los dispositivos de los clientes.
¿Qué deberías corregir primero?
Lo que afecta al contenido principal y a la primera pantalla; luego los saltos de diseño y las tareas interactivas largas.
¿Cuándo se verá el resultado en Search Console?
Los datos de campo no se actualizan al instante. Una prueba de laboratorio comprueba el cambio de inmediato; el informe real necesita acumular nuevas visitas.
