Performance Guide
Avenue Luxe achieves a Lighthouse performance score of 97/100 with excellent Core Web Vitals.
Current Performance Metrics
Section titled “Current Performance Metrics”| Metric | Score | Status |
|---|---|---|
| Performance Score | 97/100 | Excellent |
| Largest Contentful Paint (LCP) | ~2,099ms | Good (target: < 2,500ms) |
| Total Blocking Time (TBT) | 0ms | Excellent |
| Cumulative Layout Shift (CLS) | 0 | Perfect |
Built-in Optimizations
Section titled “Built-in Optimizations”Critical CSS Strategy
Section titled “Critical CSS Strategy”Above-the-fold CSS is inlined directly in the HTML, eliminating render-blocking CSS for initial content. This covers base resets, typography, header, hero, and container styles.
JavaScript Defer
Section titled “JavaScript Defer”All JavaScript is properly deferred and non-blocking, resulting in 0ms Total Blocking Time.
Lazy Loading Images
Section titled “Lazy Loading Images”Native lazy loading with conditional loading strategy:
- Hero images use
loading="eager"andfetchpriority="high" - All other images use
loading="lazy"
Resource Hints
Section titled “Resource Hints”Preconnect and DNS prefetch configured for:
cdn.shopify.com(assets)fonts.googleapis.comandfonts.gstatic.com(web fonts)
Compression
Section titled “Compression”- Brotli compression active (64% reduction on large files)
- Gzip fallback configured
Performance Tips for Merchants
Section titled “Performance Tips for Merchants”Optimize Images
Section titled “Optimize Images”- Use WebP format when possible
- Serve responsive images with srcset
- Lazy load below-the-fold images (automatic in Avenue Luxe)
- Upload images at 2x the display size, not larger
Minimize Features
Section titled “Minimize Features”- Only enable features you actively use
- Disable unused animations
- Remove unused sections from templates
Monitor Speed
Section titled “Monitor Speed”- Use PageSpeed Insights regularly
- Check Core Web Vitals in Google Search Console
- Test on slow connections using browser DevTools throttling
Third-Party Impact
Section titled “Third-Party Impact”- Audit installed Shopify apps for performance impact
- Remove unused apps
- Prefer apps that load asynchronously
- Use Shopify’s built-in features over third-party alternatives when possible
Asset Sizes
Section titled “Asset Sizes”| Asset | Uncompressed | Compressed |
|---|---|---|
| main.js | 4.8KB | ~1.4KB (brotli) |
| critical.css | 3.8KB | ~1.1KB (brotli) |
| theme.css | < 1KB | Minimal |
| Component CSS | ~32KB total | Loaded conditionally |
Font Loading
Section titled “Font Loading”Avenue Luxe uses font-display: swap to prevent invisible text during font loading. The primary serif font (Playfair Display) and secondary sans-serif font (Inter) are preloaded for faster rendering.
Caching
Section titled “Caching”Shopify’s CDN handles caching automatically:
- Static assets cached with long expiry headers
- Theme files served from CDN edge locations
- Brotli/Gzip compression at the CDN level
Testing Checklist
Section titled “Testing Checklist”- Run Lighthouse audit (aim for 90+)
- Check Core Web Vitals (LCP < 2.5s, CLS < 0.1, TBT < 200ms)
- Test on mobile with throttled connection
- Verify images are lazy loaded
- Check no render-blocking resources
- Audit third-party app impact