PageSpeed identifica la imagen principal como elemento Largest Contentful Paint. Comprimirla puede ayudar, pero el navegador también debe descubrirla, elegir una variante, conectar, descargar, decodificar y dibujarla. Un archivo razonablemente pequeño puede aparecer tarde si el tema oculta su URL hasta que se ejecuta JavaScript.
La reparación debe actuar en la etapa que realmente consume el tiempo.
Confirmar el elemento y dividir el retraso
Ejecuta varias pruebas y anota el elemento LCP. En diseños adaptables, banners o sliders puede cambiar entre ejecuciones.
En Performance de Chrome graba una carga limpia, localiza el marcador LCP, selecciona el elemento y observa cuándo empieza y termina su petición. Separa cuatro partes: respuesta del servidor, descubrimiento del recurso, descarga y renderizado o decodificación.
Si el HTML tarda dos segundos, comprimir la imagen no recuperará todo ese tiempo. Si el documento llega rápido pero la solicitud comienza tarde, el descubrimiento es la pista principal.
Exponer la imagen en el HTML inicial
El navegador puede priorizar una etiqueta visible durante el análisis:
<img
src="/uploads/service-hero-1280.webp"
width="1280"
height="720"
alt="Diagnóstico de rendimiento WordPress"
>Un fondo CSS debe esperar a la hoja de estilos; una imagen insertada por JavaScript espera todavía más. No conviertas todos los fondos decorativos, pero una imagen que comunica el contenido principal suele encajar mejor como <img> con texto alternativo útil.
No aplicar carga diferida al LCP inicial
loading="lazy" es adecuado bajo el primer pliegue, no para la imagen principal visible. Inspecciona el HTML renderizado: temas, constructores y plugins pueden sobrescribir WordPress.
<img
src="/uploads/service-hero-1280.webp"
width="1280"
height="720"
loading="eager"
fetchpriority="high"
alt="Diagnóstico de rendimiento WordPress"
>No marques varias imágenes como prioridad alta; la señal perdería su utilidad.
Comprobar la variante elegida
La imagen puede mostrarse a 700 píxeles y descargar un original de 2400. Consulta currentSrc:
const hero = document.querySelector(".hero img");
console.log({
selected: hero?.currentSrc,
renderedWidth: hero?.getBoundingClientRect().width,
intrinsicWidth: hero?.naturalWidth
});Sustituye el selector por uno verificado. Si el ancho intrínseco excede claramente el tamaño visual multiplicado por la densidad de pantalla, revisa srcset y sizes.
Una lista completa de variantes puede fallar si sizes describe mal el diseño. Para un hero móvil completo y limitado en escritorio:
sizes="(max-width: 767px) 100vw, 1200px"Es solo un ejemplo. Considera columnas, relleno y ancho máximo real, y prueba varios breakpoints.
Optimizar calidad y formato
Parte de dimensiones de renderizado y tipo de contenido. Las fotografías toleran compresión con pérdida; logotipos, capturas y texto necesitan bordes nítidos; transparencias y degradados requieren comprobación específica.
Compara el resultado al tamaño real en móvil y escritorio. Retira metadatos innecesarios, pero conserva los que tengan obligación comercial o legal.
WebP y AVIF no garantizan menor peso. Un WebP mal configurado puede superar a un JPEG bien comprimido; AVIF puede suavizar detalles. Mide los bytes que recibe el navegador, valida Content-Type y no generes formatos que la capa de entrega no seleccione de forma fiable.
Revisar servidor, CDN y redirecciones
Selecciona la petición y comprueba espera, estado, redirecciones y caché:
curl -I https://example.com/uploads/service-hero-1280.webpDebe existir una respuesta correcta, tipo esperado, política de caché deliberada y ninguna redirección evitable. No uses caché inmutable si el archivo cambia bajo la misma URL.
Si un servicio redimensiona en la primera petición, compara ruta fría y caliente. El primer visitante no debería pagar un procesamiento caro sin precalentamiento o generación acordados.
Precargar solo cuando sea necesario
Si el fondo CSS sigue descubriéndose tarde, una precarga puede adelantarlo:
<link rel="preload" as="image"
href="/uploads/service-hero-1280.webp"
fetchpriority="high">En imágenes adaptables, la precarga debe coincidir con la fuente usada; de lo contrario se descargarán dos archivos. Verifica que no compite con CSS o fuentes críticas.
Reservar espacio y controlar sliders
Los atributos width y height permiten calcular la proporción. CSS puede mantenerla adaptable:
.hero img { display: block; height: auto; max-width: 100%; }Si móvil usa otro recorte, emplea <picture> y reserva espacio correcto. En un slider, renderiza la primera diapositiva en HTML, prioriza solo su imagen, retrasa las siguientes y conserva controles utilizables.
Tras el cambio prueba móvil, escritorio, caché fría y caliente, consentimiento, navegación, CTA, calidad, LCP y CLS. Para una evaluación basta con URL, resultado, elemento, modo y cambios recientes; no son necesarias contraseñas.