LCP alto: las cinco causas que veo en casi todas las webs
El elemento más grande de la primera pantalla tarda en verse casi siempre por lo mismo. Las cinco causas, en orden de frecuencia, y cómo se arregla cada una.
El tiempo que tarda en verse el elemento más grande de la primera pantalla se explica casi siempre por cinco causas: una imagen sin optimizar, un servidor lento, hojas de estilo y fuentes que bloquean, la propia imagen principal cargada con retraso, y guiones de terceros. Se identifican en diez minutos y se arreglan por orden.
Es la métrica de carga que más se nombra y la que más se intenta arreglar a ciegas, probando plugins hasta que el número baje.
No hace falta: mejorar el LCP es un diagnóstico ordenado, y en la enorme mayoría de webs la causa está entre cinco sospechosos que se comprueban rápido.
Primero: identifica cuál es tu elemento
Las herramientas de análisis dicen exactamente qué elemento está siendo el más grande en cada página, y con frecuencia no es el que uno cree. A veces es una imagen de fondo, a veces un titular enorme, a veces un bloque de un deslizador que ni siquiera se ve entero.
Sin ese dato se optimiza a ciegas. Con él, el trabajo se reduce a una sola pregunta: qué está impidiendo que ese elemento concreto aparezca antes.
Las cinco causas, por frecuencia
| Causa | Cómo se reconoce | Arreglo |
|---|---|---|
| Imagen sin optimizar | La imagen principal pesa megas | Redimensionar, formato moderno, compresión |
| Servidor lento | Tarda en empezar a responder incluso con página ligera | Caché de página; si persiste, alojamiento |
| Estilos y fuentes que bloquean | La pantalla está en blanco y luego aparece todo de golpe | CSS crítico, fuentes precargadas y con respaldo |
| La imagen principal diferida | Se carga tarde por una optimización mal aplicada | Quitarle la carga diferida y precargarla |
| Guiones de terceros | Chats, mapas, estadísticas y anuncios cargando antes de tiempo | Cargarlos después, o valorar si compensan |
La imagen principal, caso por caso
Si tu elemento más grande es una imagen, hay cuatro cosas que hacer y en este orden: que pese lo que debe pesar, que se sirva en el tamaño de la pantalla, que no esté diferida y que se precargue para que el navegador la pida cuanto antes.
Con esas cuatro, la mayoría de los casos se resuelven sin tocar nada más. Y son cuatro cambios pequeños, no un rediseño.
El servidor, que pone el suelo
Las fuentes, la causa que casi nadie mira
Es la tercera de la tabla y la que menos se revisa, porque la letra no parece un problema de velocidad. Lo es, y en un caso concreto es el problema: cuando el elemento más grande de tu primera pantalla no es una imagen sino un titular, lo que se está midiendo es cuánto tarda en llegar el archivo de tu tipografía.
El navegador tiene el texto desde el principio. Lo que no tiene es la letra con la que pintarlo, y mientras la espera puede hacer dos cosas, las dos malas: dejar el hueco en blanco hasta que llegue, o pintar con una letra del sistema y cambiarla después, que arregla esta métrica y estropea la de la página que baila al cargar.
Para saber si te afecta no hace falta herramienta: carga la portada con la conexión limitada y mira el titular. Si tarda, o aparece con una letra y cambia a otra un instante después, ya sabes de dónde viene.
Los guiones de terceros
Un chat, un mapa incrustado, un banner, dos herramientas de estadísticas y un botón de reseñas: cada uno trae su código y todos compiten por el mismo momento de carga.
No hace falta quitarlos: hace falta que se carguen después de que la página esté vista. Y hace falta preguntarse, de vez en cuando, si cada uno sigue justificando su peso: en más de una web hay guiones de servicios que ya nadie usa.
Lo que no hay que hacer
Qué puedes tocar tú y qué conviene que toque alguien
No todo esto es trabajo de técnico: hay una parte que hace cualquiera con acceso al gestor, y es la que más baja el número.
Lo que conviene dejar en manos de alguien que sepa es lo que toca los cimientos: separar los estilos imprescindibles del resto, cambiar de alojamiento, meterse en las plantillas del tema o reescribir cómo se cargan los archivos. Ahí un cambio a ciegas no ralentiza la web, la rompe, y el fallo no siempre se ve el mismo día.
Y hay un caso intermedio que en WordPress se lleva la mitad de las victorias: la caché bien puesta y los plugins podados. Eso está en cómo acelerar un WordPress lento sin cambiar de tema, que es el camino que recomiendo antes de plantearse nada más caro.
Cómo se mide bien
Mira los datos de usuarios reales
En el informe de experiencia: es lo que cuenta, y agrupa por tipo de página.
Usa el laboratorio para depurar
La herramienta de análisis dice qué elemento es y qué lo está retrasando.
Prueba en móvil con datos
No en la wifi de la oficina: la diferencia es enorme y es donde está tu cliente.
Mide por plantilla
Portada, servicio, artículo y ficha se comportan distinto y se arreglan por separado.
Comprueba después de cada cambio
Y anota qué hiciste: sin ese registro, dentro de dos meses nadie sabrá por qué algo mejoró.
Cuánto se puede esperar
En una web con imágenes sin optimizar y sin caché, pasar de ocho o diez segundos a menos de tres es habitual y no exige rediseñar nada. Bajar de ahí ya depende del servidor y del propio diseño.
Y hay un punto de rendimientos decrecientes: pelear las últimas décimas suele exigir cambios que complican el mantenimiento a cambio de una mejora que nadie percibe.
Qué priorizar
Un caso: la imagen que se cargaba la última
El caso de los deslizadores de cabecera
Merece un apartado propio porque concentra varios problemas a la vez y aparece en muchísimas portadas.
Un carrusel de imágenes en la cabecera suele cargar todas sus fotos, no solo la primera; añade una librería de código que se ejecuta antes de que la página esté lista; y con frecuencia la primera diapositiva aparece con retraso porque la construye ese mismo código. El resultado es que el elemento más grande de la primera pantalla depende de que termine de cargarse un programa entero.
Si tienes uno y la métrica va mal, hay tres salidas por orden de preferencia. La mejor es quitarlo: los estudios de comportamiento llevan años señalando que casi nadie ve más allá de la primera imagen, así que se sustituye por una sola imagen con su mensaje. La segunda, si se mantiene, es cargar solo la primera diapositiva de inmediato y las demás después. Y la tercera, la mínima, es asegurarse de que la imagen inicial está precargada y no la construye el código al ejecutarse.
Es el cambio que más veces he visto mejorar esta métrica de golpe, y también el que más discusión genera, porque el carrusel suele ser el sitio donde cada departamento quiso poner su mensaje.
Por qué vuelve a subir a los tres meses
Es la parte que no se cuenta al entregar una web «optimizada»: la velocidad no es un estado en el que se deja la web, es algo que se deshace solo si nadie mira.
Se deshace siempre por el mismo puñado de motivos. Alguien sube al blog una foto tal cual salió del móvil y esa foto acaba de portada. Se instala un plugin nuevo que carga su código en todas las páginas, también en las que no lo usan. Marketing pide un píxel más. Se actualiza el tema y los ajustes de rendimiento vuelven a su valor de fábrica. O alguien desactiva la caché para probar un cambio y no la vuelve a activar.
De ahí salen dos costumbres: volver a medir cada vez que se toca algo —un tema, un plugin, la cabecera— y no dar por buena una mejora hasta que aparece en los datos de usuarios reales, que van con semanas de retraso. Y antes de perseguir el número, qué métricas importan de verdad y cuáles son ruido.
Qué mediría
El tiempo hasta ver el elemento principal en un móvil con datos, por plantilla y con usuarios reales. Y, junto a él, el tiempo de respuesta del servidor: si ese número es alto, todo lo demás está limitado por él y conviene saberlo antes de optimizar nada más.
Preguntas frecuentes
¿Qué es exactamente el LCP?
El tiempo que tarda en pintarse el elemento visible de mayor superficie en la parte de la página que se ve sin bajar: normalmente una imagen de cabecera, un fondo o un titular grande. No mide cuánto tarda la página entera, sino cuándo aparece ese elemento concreto.
¿Cuál es la causa más frecuente?
Una imagen principal sin optimizar, seguida de un servidor que tarda en responder, de estilos y fuentes que bloquean el pintado, de la propia imagen principal diferida por error y de guiones de terceros cargando antes de tiempo. En ese orden se resuelven casi todos los casos.
¿Por qué empeoró al activar la carga diferida?
Porque diferir la imagen que se ve primero retrasa justo lo que esta métrica mide. La carga diferida es para lo que está por debajo del primer pantallazo; la imagen principal se precarga y no se difiere nunca. Es el error más común al aplicar optimizaciones automáticas.
¿Cuándo el problema es el servidor?
Cuando el tiempo hasta el primer byte sigue siendo alto con la caché activada y con una página ligera. Ese tiempo se suma a todo lo demás y marca un mínimo que no se puede bajar tocando la página: ahí el arreglo es la caché, la base de datos o el alojamiento.
¿Cuánto puedo esperar mejorar?
En una web con imágenes sin optimizar y sin caché, pasar de ocho o diez segundos a menos de tres es habitual sin rediseñar nada. A partir de ahí depende del servidor y del diseño, y pelear las últimas décimas suele complicar el mantenimiento sin que nadie note la diferencia.
Diagnosticar qué frena cada plantilla y arreglarlo en orden es SEO técnico; en WordPress, con su caché y sus plugins, SEO para WordPress. El repaso completo de lo que está frenando tu web es una auditoría SEO. Por qué esto cuesta clientes y no solo puntos está en los errores SEO más caros que veo en webs de empresa, y antes de rehacer la web por velocidad, rehacer la web o arreglar la que tienes.
La primera llamada no cuesta nada y suele bastar para saber si tiene arreglo. Si tu caso no es para mí, te lo digo.
