Admin Control Panel v2.0

✎ Editing: SPEED_INDEX_OPTIMIZATIONS.md ← Back

# Speed Index Optimizations

This document outlines the optimizations implemented to improve Speed Index from 6.1s to a target of < 3.5s on desktop.

## Problem

Speed Index was 6.1s on desktop, indicating poor perceived performance. The main issues were:
- Render-blocking CSS preventing early rendering
- Large initial JavaScript bundle
- Font loading blocking render
- Missing resource prioritization
- Large above-the-fold images without priority hints

## Solutions Implemented

### 1. Non-Render-Blocking CSS

**Problem**: CSS files loaded in `<head>` block rendering until fully downloaded and parsed.

**Solution**: 
- Created a Vite plugin (`vite-plugin-optimize-html.ts`) that makes CSS non-render-blocking
- Uses the `media="print"` trick: CSS loads asynchronously, then switches to `media="all"` once loaded
- Added `<noscript>` fallback for browsers without JavaScript
- This allows HTML to render immediately while CSS loads in parallel

**Files Modified**:
- `vite-plugin-optimize-html.ts` (new file)
- `vite.config.ts` - Added plugin to build process

### 2. Resource Preloading

**Problem**: Critical resources (fonts, JavaScript) weren't prioritized for early loading.

**Solution**:
- Added `rel="preload"` hints for Google Fonts CSS
- Added `rel="preload"` for critical font files (Montserrat)
- Added `rel="modulepreload"` for JavaScript modules (via plugin)
- Preconnect to external domains (fonts.googleapis.com, fonts.gstatic.com)

**Files Modified**:
- `index.html` - Added preload links

### 3. JavaScript Bundle Optimization

**Problem**: Large initial bundle size delayed Time to Interactive and visual rendering.

**Solution**:
- Re-enabled manual chunking strategy in Vite config
- Separated vendor libraries into logical chunks:
  - `vendor-react`: React, React DOM, React Router
  - `vendor-radix`: All Radix UI components
  - `vendor-query`: React Query
  - `vendor-charts`: Recharts library
  - `vendor-utils`: Other utility libraries
- This allows parallel loading and better caching

**Files Modified**:
- `vite.config.ts` - Added manual chunking configuration

### 4. Image Loading Optimization

**Problem**: Large hero image loaded without priority hints, delaying LCP.

**Solution**:
- Added `fetchPriority="high"` to the hero background image
- Image already had `loading="eager"` and proper width/height attributes
- This tells the browser to prioritize this critical above-the-fold image

**Files Modified**:
- `src/components/Hero.tsx` - Added fetchPriority attribute

### 5. Font Loading Optimization

**Problem**: Fonts loaded via `@import` in CSS, blocking render.

**Solution**:
- Font already uses `display=swap` in the Google Fonts URL
- Added preload hints in HTML for faster font discovery
- Preconnect to font domains for early connection establishment

**Files Modified**:
- `index.html` - Added font preload links
- `src/styles/globals.css` - Documented font loading strategy

## Expected Performance Improvements

### Speed Index
- **Before**: 6.1s
- **Target**: < 3.5s (40-45% improvement)
- **How**: Non-blocking CSS allows immediate rendering, smaller initial bundle loads faster

### Largest Contentful Paint (LCP)
- **Improvement**: 20-30% faster
- **How**: Image priority hints and preloaded fonts ensure critical resources load first

### First Contentful Paint (FCP)
- **Improvement**: 30-40% faster
- **How**: Non-blocking CSS allows HTML to render immediately

### Time to Interactive (TTI)
- **Improvement**: 25-35% faster
- **How**: Smaller initial bundle and parallel chunk loading reduce JavaScript execution time

## Build Process

The optimizations are automatically applied during the build process:

```bash
npm run build
```

The `optimizeHtml` plugin runs after the build completes and:
1. Makes all CSS links non-render-blocking
2. Adds noscript fallbacks
3. Adds modulepreload hints for JavaScript

## Testing Recommendations

After deploying, test with:

1. **Google PageSpeed Insights**
   - Check Speed Index score
   - Verify Core Web Vitals improvements

2. **Lighthouse** (Chrome DevTools)
   - Run desktop audit
   - Check Performance score
   - Review render-blocking resources audit

3. **WebPageTest**
   - Test on real desktop connections
   - Compare Speed Index before/after
   - Review filmstrip view

4. **Chrome DevTools Performance Tab**
   - Record page load
   - Check when first paint occurs
   - Verify CSS doesn't block rendering

## Additional Recommendations

### Future Optimizations

1. **Critical CSS Inlining**
   - Extract and inline above-the-fold CSS
   - Further reduce render-blocking time

2. **Font Self-Hosting**
   - Self-host Montserrat fonts instead of Google Fonts
   - Eliminates external DNS lookup and connection
   - Better caching control

3. **Image Optimization**
   - Convert hero image to WebP/AVIF format
   - Use responsive images with srcset
   - Consider using a CDN for images

4. **Service Worker**
   - Implement for offline support
   - Cache static assets aggressively
   - Prefetch critical resources

5. **HTTP/2 Server Push**
   - Push critical CSS and fonts
   - Further reduce initial load time

## Monitoring

After deployment, monitor:
- Real User Monitoring (RUM) for actual Speed Index
- Core Web Vitals in Google Search Console
- Performance budgets in CI/CD pipeline

## Files Changed Summary

### New Files
- `vite-plugin-optimize-html.ts` - HTML optimization plugin
- `SPEED_INDEX_OPTIMIZATIONS.md` - This documentation

### Modified Files
- `vite.config.ts` - Added manual chunking and HTML optimization plugin
- `index.html` - Added preload hints for fonts
- `src/components/Hero.tsx` - Added fetchPriority to hero image
- `src/styles/globals.css` - Documented font loading
- `tsconfig.node.json` - Added plugin to TypeScript includes

## Conclusion

These optimizations address the critical Speed Index issues by:
- ✅ Eliminating render-blocking CSS
- ✅ Reducing initial JavaScript bundle size
- ✅ Prioritizing critical resources
- ✅ Optimizing above-the-fold image loading
- ✅ Improving font loading strategy

The desktop Speed Index should improve from 6.1s to approximately 3.0-3.5s, significantly improving perceived performance and user experience.

Cancel