First Init

.agents/performance-optimizer/CORE_WEB_VITALS.md

@@ -0,0 +1,207 @@
+# Core Web Vitals Optimization Report
+
+**Date:** 2026-03-21
+**Agent:** performance-optimizer
+**Project:** WorkRoot IT Solutions (workroot.in)
+
+---
+
+## Baseline Performance (Pre-Optimization)
+
+| Page | Performance | LCP | CLS | TBT |
+|------|-------------|-----|-----|-----|
+| Home | 98/100 | ✅ Good | ✅ < 0.1 | ✅ Low |
+| Services | 99/100 | ✅ Good | ✅ < 0.1 | ✅ Low |
+| Portfolio | 99/100 | ✅ Good | ✅ < 0.1 | ✅ Low |
+| About | 97/100 | ✅ Good | ✅ < 0.1 | ✅ Low |
+| Contact | 99/100 | ✅ Good | ✅ < 0.1 | ✅ Low |
+| Blog | 96/100 | ✅ Good | ✅ < 0.1 | ✅ Moderate |
+| **Average** | **98/100** | ✅ | ✅ | ✅ |
+
+**Server:** TTFB ~213ms, ~9ms SSR processing, 33 req/sec
+
+---
+
+## Core Web Vitals Targets
+
+| Metric | Target | Status |
+|--------|--------|--------|
+| LCP (Largest Contentful Paint) | < 2.5s | ✅ Already good |
+| INP (Interaction to Next Paint) | < 200ms | ✅ Already good |
+| CLS (Cumulative Layout Shift) | < 0.1 | ✅ Already good |
+
+---
+
+## Optimizations Implemented
+
+### 1. Gzip/Brotli Compression — `server.mjs`
+
+**Impact:** ~70% reduction in transfer size for HTML/CSS/JS responses.
+
+Added `compression` Express middleware:
+```js
+import compression from 'compression';
+app.use(compression({ level: 6, threshold: 1024 }));
+```
+
+- Level 6 balances compression ratio vs CPU overhead
+- Only compresses responses > 1KB (avoids overhead on tiny responses)
+- Respects `X-No-Compression` header for bypass
+
+### 2. Static Asset Cache Headers — `server.mjs`
+
+**Impact:** Near-instant repeat visits for returning users.
+
+| Asset Type | Cache Duration | Strategy |
+|------------|----------------|----------|
+| `/_assets/*` (hashed) | 1 year | `immutable` — never re-fetch |
+| Fonts (`.woff2`, `.ttf`) | 1 year | `immutable` |
+| Images (`.webp`, `.png`, etc.) | 1 week | `stale-while-revalidate` |
+| Other static assets | 1 hour | `max-age` |
+
+```js
+app.use('/_assets', express.static(path, {
+  maxAge: '1y',
+  immutable: true,
+}));
+```
+
+### 3. Font Preload Hints — `BaseLayout.astro`
+
+**Impact:** Eliminates render-blocking font load; faster FCP by ~200-400ms.
+
+Replaced blocking `@import` with non-blocking load + preload hint:
+```html
+<link rel="preload" as="style"
+  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap"
+  onload="this.onload=null;this.rel='stylesheet'" />
+<noscript>
+  <link rel="stylesheet" href="..." />
+</noscript>
+```
+
+- Loads only the 2 critical weights (400/700) above-the-fold
+- Full variable font range still loaded via `global.css` for later content
+- `noscript` fallback ensures fonts load for users without JS
+
+### 4. Enhanced Critical CSS — `BaseLayout.astro`
+
+**Impact:** Faster FCP by rendering visible content immediately with correct styles.
+
+Extended inlined critical CSS to include:
+- `body` now specifies `Plus Jakarta Sans` first (vs `system-ui` first) to prevent FOUT
+- `-moz-osx-font-smoothing: grayscale` for Firefox text rendering
+- `img { aspect-ratio: attr(width)/attr(height) }` — native CLS prevention
+- Above-fold Tailwind utility classes (`min-h-screen`, `flex`, `flex-col`, `items-center`)
+- `.animate-slide-up { animation-fill-mode: forwards }` — prevents animation flicker
+
+### 5. Navigation Prefetch Strategy — `Header.astro` + `astro.config.mjs`
+
+**Impact:** Navigation feels instant (~100-300ms faster perceived navigation).
+
+- Added `data-astro-prefetch="hover"` to all desktop and mobile nav links
+- Changed `defaultStrategy` from `'viewport'` to `'hover'` in `astro.config.mjs`
+- `hover` strategy: prefetch starts when user hovers a link (150-200ms before click)
+- This gives the browser a head-start on the next page's HTML/assets
+
+---
+
+## Pre-Existing Optimizations (Already in Place)
+
+The following were already well-implemented by previous work:
+
+### Image Optimization ✅
+- Sharp image service for WebP conversion
+- Responsive `srcset` (320–1920px breakpoints)
+- Native `loading="lazy"` on all below-fold images
+- Aspect ratio wrappers on all images (CLS = 0)
+- Blur placeholder support via `imageUtils.ts`
+- `OptimizedImage.astro` and `LazyImage.astro` components
+
+### CSS Architecture ✅
+- Tailwind CSS utility-first (no unused CSS)
+- CSS code splitting by route (`cssCodeSplit: true`)
+- `inlineStylesheets: 'auto'` inlines small CSS files
+- Critical CSS inlined in `BaseLayout.astro`
+
+### JavaScript Minimization ✅
+- Zero heavy JS frameworks (no React bundle)
+- Astro SSR with minimal client-side JS
+- `compressHTML: true` minifies HTML output
+- Manual vendor chunk splitting for better caching
+
+### Resource Hints ✅
+- `preconnect` to Google Fonts (`fonts.googleapis.com`, `fonts.gstatic.com`)
+- `preconnect` to Unsplash CDN
+- `dns-prefetch` for analytics providers
+- `preconnect` to GA4 and Plausible endpoints
+
+### Server Performance ✅
+- TTFB: ~213ms (excellent for SSR)
+- SSR processing: ~9ms
+- Throughput: 33 req/sec
+
+---
+
+## Remaining Opportunities (Future)
+
+| Opportunity | Impact | Complexity |
+|-------------|--------|------------|
+| CDN (Cloudflare/Fastly) | High — global latency reduction | Medium |
+| Self-hosted fonts | Medium — removes Google Fonts dependency | Low |
+| HTTP/2 Push | Low — preload critical assets | Medium |
+| Service Worker | Medium — offline support + cache | High |
+| Edge Rendering | High — reduce TTFB globally | High |
+| Image AVIF format | Low — ~20% smaller than WebP | Low |
+| Font subsetting | Low — smaller font files | Low |
+
+---
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `server.mjs` | Added `compression` middleware + cache headers |
+| `src/layouts/BaseLayout.astro` | Font preload + enhanced critical CSS |
+| `src/components/Header.astro` | Added `data-astro-prefetch="hover"` to nav links |
+| `astro.config.mjs` | Changed prefetch strategy to `hover` |
+| `package.json` | Added `compression` dependency |
+
+---
+
+## Validation Checklist
+
+After deployment, verify with:
+
+- [ ] [PageSpeed Insights](https://pagespeed.web.dev) — LCP < 2.5s, CLS < 0.1, INP < 200ms
+- [ ] [WebPageTest](https://webpagetest.org) — Check compression headers (`Content-Encoding: gzip`)
+- [ ] Browser DevTools Network tab — Verify `Cache-Control: public, max-age=31536000` on `/_assets/`
+- [ ] Chrome DevTools Lighthouse — Run audit on all 6 pages
+- [ ] [web.dev/measure](https://web.dev/measure) — Field data validation
+
+### Expected Header Values
+
+```
+# Static hashed assets
+Cache-Control: public, max-age=31536000, immutable
+
+# Images
+Cache-Control: public, max-age=604800, stale-while-revalidate=86400
+
+# HTML responses
+Content-Encoding: gzip
+Vary: Accept-Encoding
+```
+
+---
+
+## Summary
+
+The project was already exceptional (98/100 avg Lighthouse). The optimizations implemented target the remaining performance gaps:
+
+1. **Compression** eliminates the biggest bandwidth bottleneck
+2. **Caching** makes repeat visits near-instant
+3. **Font preload** eliminates the last render-blocking resource
+4. **Prefetch on hover** makes navigation feel instantaneous
+
+Expected improvement: **+1-2 Lighthouse points** on affected pages, with significant real-world improvement for repeat visitors (from cache) and first-time visitors on slow connections (from compression).