image-optimization-requirements

Image Optimization Performance Rules - Three-Phase Strategy

APPLY: EVERY QUERY - CRITICAL PERFORMANCE RULE

AEM Bandwidth Budget Management (CRITICAL)

Based on AEM's performance guidelines:

• 100kb total payload before LCP including all images, CSS, JS
• Single origin only before LCP (no CDN/external image connections)
• LCP target: 1560ms on mobile for Lighthouse 100 score

Phase E (Eager) - LCP Image Optimization (REQUIRED)

For first section hero/marquee images that are LCP candidates:

// ✅ REQUIRED for LCP candidate images (Phase E)
const optimizeLCPImage = (img, block) => {
  const isFirstSection = block.closest('.section') === document.querySelector('.section');
  const isFirstImage = img === block.querySelector('img');
  
  if (isFirstSection && isFirstImage) {
    // Phase E: Critical LCP optimization
    img.removeAttribute('loading');
    img.setAttribute('loading', 'eager');  
    img.setAttribute('fetchpriority', 'high');
    
    // Calculate optimal size for bandwidth budget
    const optimalWidth = getOptimalImageSize();
    const aspectRatio = getImageAspectRatio(img);
    
    img.setAttribute('width', optimalWidth);
    img.setAttribute('height', Math.round(optimalWidth * aspectRatio));
    
    // Preload only if within bandwidth budget
    const estimatedSize = estimateImagePayload(img.src, optimalWidth);
    if (payloadTracker.canLoadResource(estimatedSize)) {
      preloadLCPImage(img.src, optimalWidth);
    } else {
      console.warn('LCP image exceeds bandwidth budget, consider optimization');
    }
  }
};

// ✅ REQUIRED - Bandwidth-aware image preloading
const preloadLCPImage = (src, width) => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'image';
  link.href = `${src}?width=${width}&format=webp&optimize=medium`;
  link.fetchPriority = 'high';
  document.head.appendChild(link);
};

Bandwidth Budget Calculation (REQUIRED)