Optimize Core Web Vitals for SEO performance

[kahboom]

Problem

Core Web Vitals are a direct ranking factor for Google search. Need to measure and optimize:

• LCP (Largest Contentful Paint) - Target: < 2.5s
• INP (Interaction to Next Paint) - Target: < 200ms
• CLS (Cumulative Layout Shift) - Target: < 0.1

Poor Core Web Vitals can negatively impact:

• Search rankings
• User experience
• Conversion rates
• Crawl budget allocation

Current Status

Need to audit current performance with:

• Google PageSpeed Insights
• Chrome DevTools Lighthouse
• Search Console Core Web Vitals report
• Real user monitoring (RUM) data

Optimization Opportunities

LCP (Largest Contentful Paint)

• Optimize hero images (use WebP, proper sizing)
• Preload critical resources
• Reduce server response time (Netlify should be fast)
• Eliminate render-blocking resources
• Consider image CDN for assets

INP (Interaction to Next Paint)

• Code-split large JavaScript bundles
• Defer non-critical JavaScript
• Optimize React component rendering
• Use React.lazy() for route-based code splitting
• Minimize third-party scripts (check Umami analytics impact)

CLS (Cumulative Layout Shift)

• Set explicit width/height on images
• Reserve space for dynamic content
• Avoid inserting content above existing content
• Use CSS aspect-ratio for responsive images

Additional Performance Wins

• Implement font-display: swap for web fonts
• Optimize Tailwind CSS bundle size (purge unused styles)
• Enable Netlify's automatic image optimization
• Add service worker for offline support (optional)
• Monitor bundle size (currently 693KB - can be reduced)

Measurement

Before and after metrics from:

1. PageSpeed Insights (lab + field data)
2. Chrome DevTools Lighthouse
3. Search Console Core Web Vitals report
4. WebPageTest.org

Resources

• Web.dev Core Web Vitals
• Google Search Central - Page Experience
• Vite Performance Optimization

Labels

enhancement, performance, SEO