medir --lcp --movil
De 16,4 s a 2,25 s de carga en móvil con una sola corrección
La home de la tienda tardaba 16,4 segundos en mostrar su contenido principal en móvil. El problema no era el servidor, era una imagen.
2,25s
LCP en móvil, desde 16,4 s
Dato de campo CrUX p75, una semana después del cambio
El punto de partida
La home de la tienda sacaba un 13 sobre 100 en PageSpeed móvil. El dato que importaba de verdad era otro: el LCP (lo que tarda en verse el contenido principal) estaba en 16,4 segundos. Un cliente con el móvil se va mucho antes.
La primera tentación era culpar al hosting. Antes de tocar nada medí dónde se iba el tiempo:
- El elemento LCP era la primera foto de producto del carrusel de la home.
- Esa foto tenía
loading="lazy": el navegador la dejaba para el final a propósito. - El 45 % del tiempo de LCP era espera antes de empezar a descargarla y otro 50 % era renderizado. El servidor solo explicaba un 4 %.
Qué hice
Un cambio de pocas líneas en la plantilla de la miniatura de producto: solo la primera imagen del primer carrusel se carga con prioridad alta (fetchpriority="high") y sin lazy. Las otras 107 imágenes de la home siguen en lazy, como deben.
Lo validé en local, lo subí y comprobé en producción que solo había una imagen marcada así, y que no se colaba en categorías, fichas ni búsqueda.
El resultado
| métrica | antes | después |
|---|---|---|
| LCP móvil (datos reales, CrUX p75) | 16,4 s | 2,25 s |
| Umbral «bueno» de Google | < 2,5 s | ✓ |
Lo que aprendí (otra vez): antes de cambiar de servidor, mide. A veces la mejora más grande es la más barata.
El trabajo siguió con el CLS, que seguía mal, dentro de un plan por fases en el que cada punto tiene su verificación y su marcha atrás.