La portada de una web puede parecer terminada y, sin embargo, tardar demasiado en mostrar su elemento visual más importante. Largest Contentful Paint (LCP) mide cuándo aparece el bloque de texto o la imagen de mayor tamaño visible en la primera pantalla. Si ese elemento es la fotografía principal, conviene empezar por ella antes de instalar otro plugin de optimización.
Identifica primero el elemento LCP
Abre la URL concreta en PageSpeed Insights y revisa el diagnóstico para móvil. Confirma qué elemento se considera LCP y distingue los datos de usuarios reales de la prueba de laboratorio. Una portada, una entrada y una página de servicios pueden tener elementos LCP diferentes. Repite la comprobación con la misma URL y condiciones similares después de cada cambio.
Si el elemento es un titular, comprueba las fuentes y los recursos que bloquean su representación. Si es una imagen, sigue este orden: cuándo descubre el navegador su URL, con qué prioridad la descarga, cuánto pesa el archivo y si algo retrasa su presentación.
Evita retrasar la imagen visible al entrar
La carga diferida es útil para imágenes situadas más abajo. Aplicar loading="lazy" a la imagen principal puede retrasar su descarga. Comprueba el HTML generado por el tema y por los plugins, no solo los ajustes del panel de WordPress. Si la foto se carga como fondo CSS, el navegador puede descubrirla después de procesar la hoja de estilos; valora usar una imagen HTML adecuada o una precarga correctamente configurada.
En la imagen que realmente sea LCP, fetchpriority="high" puede comunicar su importancia al navegador. No lo añadas a todas las imágenes: la prioridad deja de ser útil si todo compite como urgente. La documentación de web.dev recomienda combinar el descubrimiento temprano del recurso con una prioridad apropiada y evitar el lazy loading en el elemento LCP.
Sirve el tamaño que necesita cada pantalla
Subir una fotografía enorme y mostrarla a una anchura pequeña desperdicia transferencia. WordPress genera tamaños de imagen y puede ofrecer variantes mediante srcset y sizes. Revisa en las herramientas del navegador qué archivo se descarga realmente en móvil y escritorio; la dimensión del archivo original no describe por sí sola lo que recibe cada visitante.
Un formato moderno puede reducir el peso, siempre que la calidad visual siga siendo adecuada. Compara el archivo final en las condiciones reales de la web. Añade dimensiones o una proporción estable al contenedor para reservar espacio mientras carga; esto ayuda a evitar saltos visuales, aunque esa mejora se refleje principalmente en otra métrica, CLS.
Revisa servidor, caché y recursos que compiten
La imagen no es toda la historia. Una respuesta inicial lenta retrasa el descubrimiento de cualquier recurso. Comprueba la caché de página, la configuración del servidor y las solicitudes de terceros que preceden a la imagen. Un carrusel que carga varias fotografías grandes, una fuente imprescindible que llega tarde o una hoja CSS pesada pueden ocupar red y tiempo de procesamiento.
Haz cambios de uno en uno. Si sustituyes la imagen, alteras la caché y cambias el tema a la vez, no sabrás cuál ha mejorado o empeorado el resultado.
Lista práctica de comprobación
- Identifica la URL y su elemento LCP en móvil y escritorio.
- Comprueba que la imagen principal se descubre pronto y no lleva carga diferida.
- Verifica el tamaño descargado y las variantes responsivas.
- Da prioridad alta solo al recurso crítico cuando corresponda.
- Mide de nuevo y contrasta laboratorio con datos de usuarios reales cuando estén disponibles.
Un buen LCP es el resultado de una cadena de decisiones: respuesta inicial, descubrimiento, descarga y presentación. Mejorar una sola pieza sin comprobar las demás puede dejar el problema intacto.
