Optimising Bricks Builder for Speed: A Complete Performance Guide

Bricks Builder is brilliant for creating custom WordPress websites without touching code. But like any page builder, it can slow down your site if you're not careful.

The good news? Bricks is already faster than most builders. It generates clean HTML and CSS, doesn't bloat your database, and gives you granular control over performance.

Here's how to squeeze every millisecond out of your Bricks-powered site.

Understanding Bricks Builder Performance

First, let's be clear about what we're working with. Bricks is a visual WordPress page builder that converts your designs into clean code. Unlike Elementor or Divi, it doesn't load heavy JavaScript frameworks on every page.

This head start matters. But you can still make mistakes that tank your page speed.

The biggest performance killers we see:

• Unoptimised images
• Too many web fonts
• Render-blocking CSS
• Excessive animations
• Poor hosting

Let's fix each one.

CSS Loading Optimisation

Bricks generates CSS for each page individually. Smart. But you need to configure it properly.

Enable CSS Generation Per Page

1. Go to Bricks → Settings → Performance
2. Check "Generate CSS per page"
3. Save changes

This creates separate CSS files for each page, loading only what's needed. Much faster than one massive stylesheet.

Minify and Combine CSS

Still in the Performance settings:

1. Enable "Minify CSS"
2. Enable "Combine CSS files" (test this - sometimes it breaks things)
3. Clear any caching plugins after changes

Pro Tip: Test the "Combine CSS files" option carefully. Some themes or plugins don't play nice with CSS combination.

Remove Unused CSS

Bricks can strip out unused CSS automatically:

1. Performance tab → "Remove unused CSS"
2. Test thoroughly on different page types
3. Check forms, popups, and interactive elements still work

This feature is powerful but can break styling in edge cases. Always test.

Image Optimisation in Bricks

Images usually account for 60-70% of page weight. Get this wrong and nothing else matters.

Use WebP Images

WordPress now supports WebP natively. Convert your images before uploading:

1. Use tools like TinyPNG or Squoosh
2. Upload WebP versions alongside JPEGs
3. Bricks will serve WebP to supported browsers automatically

Set Proper Image Dimensions

Never let Bricks scale large images down:

1. Upload images at their display size
2. Use Element → Advanced → Responsive to set different sizes for mobile
3. Crop, don't scale

Pro Tip: Upload 2x resolution for retina displays, but compress heavily. A 1600px image at 70% quality often looks better and loads faster than 800px at 95%.

Lazy Loading Configuration

Enable lazy loading in Bricks settings:

1. Bricks → Settings → General
2. Enable "Lazy load images"
3. Exclude above-the-fold images from lazy loading

For hero images, disable lazy loading manually: Element → Advanced → Attributes → Add loading="eager"

Font Loading Optimisation

Web fonts can block rendering for seconds. Handle them carefully.

Limit Font Variations

Each font weight and style is a separate download:

1. Audit your fonts in Bricks → Settings → Custom Fonts
2. Remove unused weights (do you really need Light, Regular, Medium, Semibold, Bold, AND Black?)
3. Stick to 2-3 variations maximum

Use Font Display Swap

In your custom CSS or theme functions:

@font-face {
  font-family: 'YourFont';
  font-display: swap;
  /* other font properties */
}

This shows fallback text immediately while the custom font loads.

Preload Critical Fonts

For above-the-fold text, preload fonts in your theme's functions.php:

function preload_critical_fonts() {
    echo '<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'preload_critical_fonts');

Animation and Interaction Performance

Bricks' animation features are tempting. Use them wisely.

Prefer CSS Animations Over JavaScript

When possible, use Bricks' CSS-based animations:

1. Element → Style → Effects
2. Choose animations that don't trigger layout recalculation
3. Avoid animating width, height, top, left
4. Stick to transform and opacity

Reduce Animation Complexity

Every animated element needs processing power:

1. Limit simultaneous animations
2. Use will-change CSS property sparingly
3. Remove animations on mobile if performance suffers

Intersection Observer for Scroll Animations

Instead of constantly checking scroll position, use modern APIs:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});

Database and Hosting Considerations

Bricks stores templates and settings in WordPress. Keep things tidy.

Clean Up Revisions

Bricks creates post revisions for templates:

1. Use WP-Optimize or similar to limit revisions
2. Set WP_POST_REVISIONS to 5 or fewer in wp-config.php
3. Clear old revisions monthly

Choose Performance-First Hosting

Your hosting matters more than any optimisation trick. We use Krystal hosting for our Bricks sites because:

• NVMe SSD storage
• Built-in caching
• UK data centres for faster loading
• Excellent WordPress optimisation

Enable Object Caching

If your host supports Redis or Memcached:

1. Install an object caching plugin
2. Clear and rebuild cache after Bricks updates
3. Monitor cache hit ratios

Advanced Performance Techniques

Critical CSS Generation

Generate above-the-fold CSS separately:

1. Use tools like Critical CSS generators
2. Inline critical CSS in the document head
3. Load the rest asynchronously

Resource Hints

Add these to your theme's head:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://your-cdn.com">

Service Worker for Caching

Implement a service worker for repeat visitors:

1. Cache Bricks-generated CSS files
2. Cache commonly used images
3. Serve cached content while checking for updates

Measuring Your Results

Track improvements with these tools:

1. Google PageSpeed Insights - Free, shows Core Web Vitals
2. GTmetrix - Detailed waterfall charts
3. WebPageTest - Advanced testing options
4. Chrome DevTools - Real-time performance analysis

Run tests from multiple locations. Your Cardiff business needs to perform well for visitors across the UK.

Common Bricks Performance Mistakes

Avoid these traps:

1. Using too many global classes - Creates bloated CSS
2. Not clearing cache after changes - Old CSS and JavaScript files linger
3. Forgetting mobile optimisation - Different performance needs on mobile
4. Ignoring third-party scripts - Analytics and chat widgets can slow everything down

Maintenance for Long-Term Performance

Performance isn't a one-time fix. Include these in your website maintenance checklist:

1. Monthly image audit and compression
2. Quarterly font usage review
3. Regular plugin and theme updates
4. Performance testing after major changes

Getting Professional Help

Optimising Bricks Builder takes time and technical knowledge. If you'd rather focus on running your business, our WordPress development service includes performance optimisation from day one.

We build fast, clean Bricks sites for businesses across Wales. Every site includes hosting optimisation, image compression, and ongoing performance monitoring.

Want to see how your current site performs? Try our free website audit tool for instant feedback on speed and optimisation opportunities.

Bricks Builder gives you the tools for lightning-fast websites. Use them wisely, measure regularly, and your visitors will notice the difference.