resource-loading-strategy

Resource Loading Performance Rules - Three-Phase Strategy

APPLY: EVERY QUERY - CRITICAL PERFORMANCE RULE

AEM Three-Phase Loading (E-L-D) - REQUIRED

Based on AEM's performance guidelines:

Phase E (Eager) - Critical Path to LCP

100KB BANDWIDTH BUDGET - STRICTLY ENFORCED

<!-- ✅ REQUIRED - Critical path optimization in head.html -->
<style>body { display: none; }</style>

<!-- ✅ REQUIRED - Single origin, under 100kb total -->
<script src="/express/code/scripts/scripts.js" type="module"></script>
<script src="/express/code/scripts/fallback.js" nomodule></script>

<!-- ✅ REQUIRED - Viewport meta for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<!-- ❌ FORBIDDEN - Before LCP (consumes bandwidth budget) -->
<!-- NO early hints, h2-push, preconnect, or font loading -->

Phase L (Lazy) - Same-Origin Enhancement

Project-controlled content that doesn't affect TBT/FID

// ✅ REQUIRED - Lazy loading for Phase L content
const loadPhaseL = () => {
  // Load next sections and their blocks
  loadBelowFoldSections();
  
  // Load remaining images with lazy loading
  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  lazyImages.forEach(img => observeImage(img));
  
  // Load non-blocking JavaScript libraries
  loadNonCriticalModules();
};

// Start Phase L after LCP is achieved
document.addEventListener('lcp-ready', loadPhaseL);

Phase D (Delayed) - Third-Party Deferred

MANDATORY 3+ second delay after LCP

// ✅ REQUIRED - Phase D delayed loading (3+ seconds)
const loadPhaseD = (DELAY = 3000) => new Promise(resolve => {
  setTimeout(() => {
    // Marketing and analytics (not critical for CWV)
    loadAnalytics();
    loadTagManager();
    loadConsentManagement();
    
    // Interactive features
    loadChatSupport();
    loadSocialMediaEmbeds();
    loadA11yTools();
    
    // Heavy third-party integrations
    loadCommentSystems();
    loadVideoEmbeds();
    
    resolve();
  }, DELAY);
});