lazy-loading-implementation

Lazy Loading Performance Rules - Three-Phase Strategy

APPLY: EVERY QUERY - CRITICAL PERFORMANCE RULE

AEM Three-Phase Loading Implementation (REQUIRED)

Based on AEM's performance guidelines:

Phase Assignment Strategy

Phase E (Eager): First section only, LCP candidates, under 100kb total Phase L (Lazy): Below-fold blocks, same-origin enhancements
Phase D (Delayed): Third-party content, 3+ seconds after LCP

Phase E - Critical Section Only (REQUIRED)

NEVER lazy load the first section - it contains LCP candidates

// ✅ REQUIRED - First section loads immediately (Phase E)
export default async function init(element) {
  const isFirstSection = element.closest('.section') === document.querySelector('.section');
  
  if (isFirstSection) {
    // Critical path - load immediately for LCP
    loadBlock(element);
  } else {
    // Below-fold - use Phase L lazy loading
    createIntersectionObserver({
      el: element,
      options: { rootMargin: '200px' },
      callback: loadBlock,
    });
  }
}

Phase L - IntersectionObserver Pattern (REQUIRED)

ALL non-critical blocks MUST use lazy loading following utils.js:

// ✅ REQUIRED - Standard Phase L lazy loading
export default async function init(element) {
  // Check for override (testing purposes)
  if (element.textContent.includes('no-lazy')) {
    loadBlock(element);
    return;
  }
  
  // Phase L: Lazy load with appropriate rootMargin
  const blockType = element.classList[0];
  const rootMargin = getOptimalRootMargin(blockType);
  
  createIntersectionObserver({
    el: element,
    options: { rootMargin },
    callback: () => loadBlock(element),
  });
}

// Optimize loading distance based on block importance
function getOptimalRootMargin(blockType) {
  const criticalBlocks = ['marquee', 'hero', 'cards'];
  const heavyBlocks = ['video', 'carousel', 'interactive'];
  
  if (criticalBlocks.includes(blockType)) return '300px'; // Load earlier
  if (heavyBlocks.includes(blockType)) return '100px';   // Load closer
  return '200px'; // Default
}