Site Speed Optimization Plan

🎯 Current Performance Issues Identified

External Dependencies (Major Speed Impact)

  • Bulma CSS: 215KB from CDN (blocking render)
  • Swiper CSS/JS: 150KB+ from CDN
  • Video.js: 200KB+ from CDN
  • Multiple font requests: Google Fonts
  • Excessive CDN requests: 8+ external domains

Resource Loading Issues

  • No resource bundling: Each library loaded separately
  • Missing compression: No Brotli/GZIP optimization
  • Blocking resources: Critical CSS not inlined
  • Unused code: Loading full libraries for minimal usage

✅ Optimization Strategy

Phase 1: Bundle Critical Resources (Immediate Impact)

  1. Self-host Bulma CSS (eliminate 215KB CDN request)
  2. Bundle vendor JavaScript (reduce request count)
  3. Inline critical CSS (eliminate render blocking)
  4. Optimize font loading (reduce FOUT/FOIT)

Phase 2: Advanced Optimizations

  1. Implement lazy loading for non-critical scripts
  2. Add resource hints (preload, prefetch, preconnect)
  3. Enable compression (Brotli + GZIP)
  4. Optimize images (WebP, AVIF, responsive)

Phase 3: Performance Monitoring

  1. Add performance budgets
  2. Implement Core Web Vitals tracking
  3. Set up automated Lighthouse CI

🎯 Expected Results

  • 50-70% reduction in First Contentful Paint (FCP)
  • 60-80% reduction in Largest Contentful Paint (LCP)
  • Eliminate Cumulative Layout Shift (CLS)
  • 90+ Lighthouse score (currently likely 40-60)