Planteamiento
El elemento Largest Contentful Paint suele ser una imagen hero responsiva. Diseña una optimización utilizando fetchpriority, loading, preload y srcset, incluyendo los requisitos de experimentación, reversión y accesibilidad.
Escenario y restricciones
Las versiones de escritorio y móviles utilizan diferentes imágenes de LCP, mientras que la página también carga fuentes, CSS crítico y analíticas. El navegador programa los recursos por sí mismo y la prioridad es solo una sugerencia; las implementaciones no se comportan de forma idéntica en todas partes.
Qué evalúa esto
El candidato debe diferenciar el momento de descubrimiento, la estrategia de carga y la prioridad de la solicitud. fetchpriority=high eleva la prioridad relativa de un recurso en la cola, loading=eager/lazy controla el aplazamiento y preload declara un recurso de forma anticipada. Combinarlos de manera inadecuada puede duplicar solicitudes o privar de recursos al CSS y a las fuentes.
Enfoque de referencia
Utiliza datos de campo y el panel de rendimiento para identificar el elemento de LCP y la cadena de solicitudes. Asigna prioridad alta únicamente a la imagen de LCP confirmada en la parte superior de la página (above-the-fold). Utiliza srcset y sizes para seleccionar un único recurso adecuado; no hagas precarga tanto de los candidatos de escritorio como de los de móviles. Evita la prioridad alta en listas de imágenes y no apliques carga diferida (lazy-load) a la imagen hero. Experimenta con el LCP, la finalización del CSS crítico, los bytes totales y las tareas largas antes de ampliar el tráfico.
Detalles críticos
Los candidatos responsivos deben coincidir con los atributos imagesrcset y imagesizes de la precarga; de lo contrario, una imagen podría precargarse y otra renderizarse. Inspecciona la prioridad de red, el iniciador, los aciertos de caché y el orden de las solicitudes en dispositivos de gama baja y redes lentas. Mantén un interruptor de funcionalidad (feature switch) y una versión de reversión.
Errores comunes
Tratar high como una descarga forzada; marcar todas las imágenes con prioridad alta; usar la precarga en lugar del marcado de imagen correcto; revisar únicamente Lighthouse; ignorar alt, las dimensiones y el almacenamiento en caché de origen cruzado; o afirmar una mejora sin contar con una línea base.
Rúbrica de evaluación
Las respuestas sólidas explican la selección de LCP, los conflictos de prioridad, la coherencia responsiva, las métricas del experimento y los criterios de reversión, reconociendo al mismo tiempo las diferencias entre navegadores. Las respuestas débiles solo mencionan un atributo sin validar la cola de solicitudes ni los resultados de campo.
Preguntas de seguimiento
¿Cuándo usarías preload sin fetchpriority?
Considera el uso de preload cuando un recurso no pueda ser descubierto de forma temprana en el HTML y realmente necesite una solicitud anticipada. Si el navegador ya descubre la imagen rápidamente, una sugerencia de prioridad más ligera puede ser más fácil de revertir; mide el impacto de cualquiera de las opciones.
¿Qué pasa si el LCP mejora pero las fuentes se vuelven más lentas?
Compara el orden de las solicitudes y el ancho de banda para el CSS crítico, las fuentes y las imágenes. Reduce la prioridad de las imágenes no críticas o elimina precargas duplicadas, ajusta la carga de fuentes y vuelve a medir.
¿Cómo preservas la accesibilidad al optimizar imágenes?
Mantén un texto alt preciso y dimensiones explícitas o marcadores de posición de relación de aspecto (aspect-ratio) para evitar cambios de diseño. Asegúrate de que el contenido significativo siga estando disponible con poco ancho de banda o con las imágenes desactivadas, y realiza pruebas con tecnología de asistencia.