Las imágenes suelen ser los bytes más pesados de una página, así que optimizarlas es la mayor victoria de LCP. Tres palancas: formatos modernos, dimensionamiento responsive y prioridad de carga.
AVIF y WebP comprimen mucho más pequeño que JPEG/PNG con la misma calidad (AVIF a menudo un 50% más pequeño que JPEG). Sírvelos con un fallback para que los navegadores antiguos sigan funcionando:
No envíes una imagen de 2000px a un móvil de 400px. srcset deja que el navegador elija el tamaño correcto para el dispositivo:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes le dice al navegador con qué ancho se renderiza la imagen para que pueda elegir la fuente más pequeña suficiente.
fetchpriority="high", loading="eager", y considera un preload.loading="lazy" para que no se obtenga hasta que se necesite.Mantén siempre width/height para prevenir el CLS.
Un LCP lento suele ser simplemente una imagen principal sobredimensionada. Conocer los formatos (AVIF/WebP), srcset para la resolución correcta y la prioridad adecuada, además de no hacer lazy-load de la imagen LCP, es el kit de herramientas práctico que esperan los entrevistadores, y suele ser el cambio de mayor impacto en un sitio real.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar