core-web-vitals-standards

Core Web Vitals Performance Standards

APPLY: EVERY QUERY - CRITICAL PERFORMANCE RULE

Performance is Non-Negotiable

Following AEM's "Keeping it 100" principle: Maintain Lighthouse Score 100 through Three-Phase Loading (E-L-D)

CRITICAL: CSS Render-Blocking Detection & Resolution

ALWAYS check CSS loading sequence FIRST when diagnosing slow LCP

CSS Render-Blocking Symptoms (URGENT INVESTIGATION REQUIRED)

• LCP > 3 seconds with white screen until late in loading
• Body visibility delayed despite JavaScript optimization
• Performance scores plateau despite component optimizations
• Render delay >70% in LCP breakdown

CSS Render-Blocking Root Cause

Large CSS files (>20KB) loaded via JavaScript after HTML parsing:

// ❌ ANTI-PATTERN: Render-blocking CSS via JavaScript
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'large-file.css'); // Blocks body visibility
document.head.appendChild(link);

REQUIRED AEM Performance Pattern

// ✅ REQUIRED: Follow AEM Three-Phase Loading for LCP optimization
// Phase E: Focus on accelerating transformation speed for LCP elements
export default async function init(el) {
  // Create LCP structure immediately (synchronous DOM)
  const basicStructure = createLCPStructure(el);
  el.append(basicStructure);
  
  // Phase L: Defer heavy operations to Promise.all
  const enhancementPromise = Promise.all([
    loadAdditionalData(),
    processAsyncFeatures()
  ]);
  
  // Progressive enhancement without blocking LCP
  const data = await enhancementPromise;
  enhanceWithData(basicStructure, data);
}

Three-Phase Loading Strategy (REQUIRED)

Based on AEM's performance best practices:

Phase E (Eager) - Critical Path to LCP

• 100kb Payload Limit: Everything before LCP MUST stay under 100kb total
• Single Origin Rule: NO connections to second origins before LCP (TLS/DNS overhead blocks LCP)
• Body Hidden Pattern: body { display: none; } in head.html prevents premature image downloads
• LCP Target: 1560ms or better on mobile (100 score in PageSpeed Insights)