Bricks Builder is one of the fastest WordPress page builders available. But "fast" is relative. Without proper optimisation, even Bricks can slow down your site.
The good news? A few smart tweaks can keep your Bricks-built site running at top speed. Here's how to do it.
What Makes Bricks Builder Different
Unlike Elementor or other visual builders, Bricks generates clean HTML and CSS. No bloated shortcodes. No excessive divs wrapping everything.
This gives you a head start on performance. But you still need to optimise properly.
1. Choose the Right Hosting Foundation
Your hosting matters more than any optimisation trick. Shared hosting from BT or budget providers will bottleneck even the cleanest Bricks site.
Look for hosting with:
- PHP 8.2 or higher
- SSD storage
- Server-level caching
- UK-based servers for Welsh businesses
Quality WordPress hosting makes every other optimisation more effective.
2. Master Bricks' Built-in Performance Features
Use Bricks' CSS Loading Options
In Bricks → Settings → Performance, you'll find several CSS options:
Inline Critical CSS: Enable this. It puts above-the-fold styles directly in your HTML head, reducing render-blocking requests.
External CSS File: Disable for small sites (under 10 pages). Enable for larger sites where CSS reuse matters more than HTTP requests.
CSS Minification: Always enable. Removes unnecessary whitespace and comments.
Configure JavaScript Loading
Load JS in Footer: Enable this. JavaScript won't block page rendering.
Combine JS Files: Enable for sites with multiple scripts. Reduces HTTP requests.
Pro Tip: Test Both CSS Settings
The "External CSS File" setting depends on your site. Test both options with Google PageSpeed Insights. Smaller sites often perform better with inline CSS.
3. Optimise Your Bricks Elements
Limit Container Nesting
Every container adds HTML elements. Instead of:
Container > Container > Container > TextUse:
Container > TextApply spacing with padding/margin instead of extra containers.
Choose Efficient Layout Methods
Flexbox over CSS Grid: For simple layouts, flexbox is lighter. Use CSS Grid only when you need complex positioning.
CSS Classes over Inline Styles: Create reusable CSS classes in Bricks → Templates → CSS. Better than styling each element individually.
Be Smart with Background Images
Large background images kill page speed.
Best practices:
- WebP format (with JPEG fallback)
- Maximum 1920px width for hero images
- Use CSS
background-size: coverinstead of uploading oversized images - Consider using gradients or patterns instead of photos where appropriate
4. Image Optimisation Strategy
Enable WordPress Native Lazy Loading
Bricks respects WordPress's built-in lazy loading. Make sure your images have proper alt text - WordPress needs this for lazy loading to work.
Use Appropriate Image Sizes
Don't upload 4000px images for 400px containers. Resize images before uploading:
- Hero sections: 1920px max
- Content images: 800-1200px max
- Thumbnails: 300-400px max
WebP with Fallbacks
Modern browsers support WebP. Use a plugin like WebP Express or ShortPixel to automatically serve WebP to supporting browsers.
5. Database and Plugin Optimisation
Audit Your Plugins
Every active plugin adds overhead. Run a free website audit to identify performance issues.
Common speed killers:
- Contact form plugins (use simple alternatives)
- Social sharing plugins (use native buttons)
- Slider plugins (Bricks has built-in carousel elements)
Clean Your Database
Bricks stores element data in the WordPress database. Over time, this can accumulate:
- Unused CSS
- Deleted element data
- Plugin leftovers
Use WP-Optimize or similar tools monthly.
6. Advanced Bricks Performance Tricks
Custom CSS Loading
For advanced users, you can control exactly when CSS loads:
/* Load non-critical styles after page load */
@media print {
.non-critical-styles {
display: none;
}
}Then use JavaScript to load the actual styles after the page renders.
Reduce HTTP Requests
Combine Icon Libraries: Instead of loading Font Awesome + Custom Icons, choose one icon system.
Inline Small SVGs: For icons under 2KB, inline them directly in Bricks elements instead of linking to files.
Use Bricks' Query Loop Efficiently
When displaying posts or custom content:
- Limit posts per page (6-12 is optimal)
- Use pagination instead of "load more" buttons
- Only query fields you actually display
7. Caching Configuration
Page Caching
Bricks works well with caching plugins. Recommended options:
- WP Rocket (premium)
- LiteSpeed Cache (free)
- W3 Total Cache (free but complex)
Important: Clear cache after making Bricks changes. Otherwise visitors see old versions.
Object Caching
For high-traffic sites, object caching reduces database queries. This requires server support (Redis or Memcached).
8. Monitor Your Results
Core Web Vitals
Google measures three key metrics:
- Largest Contentful Paint (LCP): Should be under 2.5 seconds
- First Input Delay (FID): Should be under 100ms
- Cumulative Layout Shift (CLS): Should be under 0.1
Use Google PageSpeed Insights weekly to track these.
Real User Monitoring
PageSpeed Insights shows lab data. For real user experience, check:
- Google Search Console → Core Web Vitals
- Chrome DevTools → Performance tab
- GTmetrix for detailed breakdowns
9. Bricks vs Elementor Performance
If you're switching from Elementor, you'll notice:
- Cleaner HTML: Bricks generates semantic markup
- Better CSS: No excessive wrapper divs
- Faster Admin: The Bricks editor loads quicker
But don't assume Bricks automatically makes your site fast. You still need proper optimisation.
Common Mistakes to Avoid
Over-using Animations: CSS animations look good but impact performance. Use sparingly.
Ignoring Mobile: Test performance on 3G connections, not just desktop WiFi.
Loading Everything Above Fold: Critical CSS should only include above-the-fold styles.
Forgetting Alt Text: Missing alt text breaks lazy loading and hurts accessibility.
The Bottom Line
Bricks Builder gives you a performance advantage, but it's not magic. Good hosting, optimised images, and clean code structure matter more than your page builder choice.
Focus on the basics first: fast hosting, compressed images, minimal plugins. Then fine-tune with Bricks' performance settings.
A well-optimised Bricks site should score 90+ on PageSpeed Insights for both mobile and desktop. If yours doesn't, work through this checklist systematically.
Need help optimising your Bricks site? Our WordPress development service includes performance optimisation as standard. We'll get your site running fast and keep it that way.