Performance Optimization
Speed matters for SEO and conversions. Learn how to optimize your Brave store for the fastest possible load times.
Overview
Page speed directly impacts your bottom line:
- 1 second delay = 7% reduction in conversions
- 53% of mobile visitors leave if a page takes longer than 3 seconds
- Google uses page speed as a ranking factor
Brave is built for performance, but your content choices matter too.
Image Optimization
Images are typically the largest files on any page. Optimizing them has the biggest impact.
Recommended Image Sizes
Image Format Guide
WebP (Recommended)
Best compression with quality. Shopify auto-converts to WebP when supported.
JPEG
Good for photos. Use 80-85% quality setting for best balance.
PNG
Only for graphics with transparency. Much larger file sizes.
GIF
Avoid for animations. Use video instead—much smaller files.
Optimization Steps
Resize Before Uploading
Never upload images larger than needed. Use tools like Photoshop, Squoosh, or TinyPNG.
Compress Images
Use compression tools to reduce file size by 50-80% with no visible quality loss.
Use Separate Mobile Images
Upload portrait-oriented images for mobile heroes. Smaller files load faster on mobile.
Set Focal Points
When uploading to Shopify, set the focal point so images crop correctly on different screens.
Free tools for optimization:
- Squoosh.app - Google's free image optimizer
- TinyPNG - PNG and JPEG compression
- Canva - Resize and export optimized images
Video Optimization
Background videos can be stunning but hurt performance if not optimized.
Video Best Practices
- Keep videos short — 5-15 seconds of looping content
- Compress aggressively — Aim for under 5MB
- Use MP4 (H.264) — Most compatible format
- Mute all audio — Browsers block autoplaying audio anyway
- Set dimensions — Match your display size, don't upscale
Compression Tools
- HandBrake (free) — Best for video compression
- Adobe Media Encoder — Professional option
- CloudConvert — Online conversion
Avoid video on mobile. Consider using static images for mobile visitors. Video files are too large for 4G connections.
Section Performance
Above-the-Fold Optimization
The content visible without scrolling (above the fold) should load first.
Enable Primary Hero
For your first hero section, enable "Primary hero (eager load)" to prioritize loading.
Limit Above-Fold Sections
Only 1-2 sections should appear above the fold. More sections delay interactivity.
Avoid Heavy Elements
Don't place carousels, video, or animations above the fold unless essential.
Lazy Loading
Brave automatically lazy-loads images below the fold. This means:
- Images only load when they're about to enter the viewport
- Initial page load is faster
- Less data usage for visitors who don't scroll
Don't disable lazy loading unless you have a specific reason. It's essential for performance.
Reduce Section Count
Every section adds to page weight. For the fastest sites:
| Page Type | Recommended Sections | |-----------|---------------------| | Homepage | 5-7 sections | | Collection | 2-4 sections | | Product | 3-5 sections | | Landing Page | 4-6 sections |
App Impact
Third-party apps can significantly impact performance.
Common Performance Killers
- Chat widgets — Often load heavy scripts
- Review apps — Can add 500KB+ of JavaScript
- Social proof popups — Constant network requests
- Analytics overload — Multiple tracking scripts
How to Audit Apps
Test Without Apps
Temporarily disable apps one by one and test page speed with Google PageSpeed Insights.
Measure Impact
Note the speed score difference for each app. Some may add 1+ seconds.
Evaluate Value
Is the conversion benefit of the app worth the speed cost? Sometimes simpler is better.
Built-in alternatives: Brave includes features that can replace some apps:
- Reviews section (replaces basic review apps)
- Newsletter popup (replaces popup apps)
- Product recommendations (uses Shopify's native AI)
Animation Performance
Brave includes smooth animations, but use them wisely.
Best Practices
- Use CSS animations — Brave's animations are CSS-based for GPU acceleration
- Limit simultaneous animations — Don't animate too many elements at once
- Respect reduced motion — Brave automatically disables animations for users who prefer reduced motion
- Test on lower-end devices — Animations that look smooth on a MacBook Pro may stutter on a budget phone
Animation Settings
In each section, you can often disable animations:
- Set Image effect to "None"
- Set Text effect to "None"
- Disable Fade up on scroll
Fonts Performance
Font Loading Strategy
Brave uses modern font loading techniques:
- Font display: swap — Shows fallback font immediately, swaps when loaded
- Preconnect — Connects to Google Fonts early
- Subset loading — Only loads character sets you need
Font Optimization Tips
- Limit font families — Use 1-2 font families maximum
- Limit weights — Each weight is a separate file (400, 500, 700 = 3 files)
- Consider system fonts — System fonts load instantly
Testing Your Performance
Tools to Use
Target Scores
| Metric | Target | Good | Poor | |--------|--------|------|------| | Performance Score | 90+ | 50-89 | 0-49 | | LCP (Largest Contentful Paint) | Under 2.5s | 2.5-4s | Over 4s | | FID (First Input Delay) | Under 100ms | 100-300ms | Over 300ms | | CLS (Cumulative Layout Shift) | Under 0.1 | 0.1-0.25 | Over 0.25 |
Regular Testing Schedule
- Before launch — Full performance audit
- After adding sections — Quick PageSpeed check
- After installing apps — Compare before/after
- Monthly — Regular performance review
Quick Wins Checklist
High-impact optimizations you can do right now:
- [ ] Compress all hero and collection images
- [ ] Upload separate mobile images for heroes
- [ ] Enable "Primary hero" on first section only
- [ ] Remove unused apps
- [ ] Limit homepage to 7 sections or fewer
- [ ] Use JPEG instead of PNG for photos
- [ ] Set image focal points for proper cropping
- [ ] Test on a real mobile device, not just preview
Troubleshooting Slow Pages
Page takes forever to load
- Check image sizes — Are any over 1MB?
- Audit apps — Temporarily disable all and test
- Check for videos — Are background videos compressed?
- Count sections — Too many sections below the fold?
Images look blurry but I uploaded high-res
- Check you're not using images smaller than display size
- Verify Shopify isn't over-compressing — upload smaller originals
- Test with WebP format
Mobile is slower than desktop
- Upload separate, smaller mobile images
- Reduce sections visible on mobile
- Consider disabling video on mobile
- Test on actual mobile devices, not just browser tools