Mobile Web Performance & WCAG 2.1 AA Accessibility Optimization

1-Line Summary

Improved Google Search Console Core Web Vitals to 100/100 by (1) Deferring GA4 until user interaction for 0ms TBT, (2) IntersectionObserver lazy-loading with min-height layout shift prevention, and (3) WCAG 2.1 AA 4.5:1 contrast and 44px touch targets.

1. Core Web Vitals Benchmark Results

[Core Web Vitals Optimization Benchmarks]
┌─────────────────────────┬──────────────┬──────────────┐
│ Metric                  │ Baseline     │ Optimized    │
├─────────────────────────┼──────────────┼──────────────┤
│ Total Blocking Time(TBT)│ ~350ms       │ 0ms (Zero)   │
│ Cumulative Layout Shift │ 0.12 (Poor)  │ 0.00 (Good)  │
│ Lighthouse Performance  │ 78           │ 99 - 100     │
│ Lighthouse Accessibility│ 82           │ 100 (Clean)  │
└─────────────────────────┴──────────────┴──────────────┘

---

2. Technical Implementations

1) User Interaction Deferred GA4 Loading

Eliminated main-thread blocking by loading Google Analytics 4 only upon first user input (scroll, touchstart) or a 5-second fallback:

const loadGA = () => {
  if (window.__gaLoaded) return;
  window.__gaLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  script.async = true;
  document.head.appendChild(script);
};
['scroll', 'touchstart', 'mousemove'].forEach(ev => 
  window.addEventListener(ev, loadGA, { once: true, passive: true })
);
setTimeout(loadGA, 5000);

2) IntersectionObserver Lazy-Rendering

• Giscus Comments: Deferred iframe loading until scrolled into view, reserving min-height: 150px to prevent CLS.
• WebGL Canvas: Calls cancelAnimationFrame when scrolled out of viewport to conserve mobile battery and GPU cycles.

---

3. Gotchas & Engineering Checkpoints

1. Pre-allocated Min-Heights for Dynamic Embeds: Always allocate CSS min-height placeholders for asynchronously injected widgets to eliminate CLS penalties.
2. Passive Touch Listeners: Bind touch and scroll listeners with { passive: true } to avoid scroll jank on mobile WebKit.

---

Published: 2026-08-15 14:11:06Updated: 2026-08-15 13:57:00