Bricks & Breakdance - a very simple page test in Google PageSpeed Insights

For funzies, I ran a quick test between Bricks and Breakdance on a very simple page with just a default button element, heading element, and rich text element. All contained the exact same text in each to keep it as close as possible.

To my surprise, Bricks had a few issues compared to Breakdance. These are hosted on the same dedicated server, by the way.

Attached are screenshots from the Performance tab on mobile for both Bricks and Breakdance, specifically the “Diagnostics” section. Bricks is the first screenshot below. Breakdance is the second screenshot. A few observations first:

  1. Bricks page size was 60 Kb, Breakdance was just 16 Kb.
  2. Bricks loads unused Javascript which triggers “Reduce Unused Javascript” error in Google PSI. Breakdance does not trigger this alert.
  3. Bricks has two warnings about “Eliminate render-blocking resources” and “Avoid serving legacy Javascript to modern browsers”, while Breakdance does not have these warning.
  4. Both received 100% Performance score overall but it should since there’s only a few elements on the page during this test.
  5. The Speed Index for Bricks was 2.4 seconds, and 2.3 seconds for Breakdance, very close.
  6. The First Contentful Paint was 1.2 seconds for Bricks and was 0.9s for Breakdance, again very close.

Bricks PSI diagnostic result:

Breakdance PSI diagnostic result:

Here is the Bricks performance tab settings used:

These are of course very close in real-life, with barely any noticeable difference in load times, however I just thought it was interesting how many warnings Bricks triggered in Google PSI when Breakdance didn’t. I’m hoping that Bricks can improve this, but I’m also open to any suggestions in case I’ve got some less-performant Bricks performance settings for example.

Other things to note:

  • Both from same dedicated server, each site had access to the same resources
  • Sites are hosted in Canada, in OVH datacentre.
  • I tried with External Loading CSS method but did not appear to make any difference other than bring the Bricks page size down from 60 Kb to 48 Kb (still far larger than Breakdance 16 Kb though), the scores were otherwise the exact same.
  • No page caching plugin is installed except Redis Object Caching for just the database calls.

URLs for PSI…
Bricks: https://pagespeed.web.dev/analysis/https-www-template-bricks-d19-ca/yssmhqs1ie?form_factor=mobile
Breakdance: https://pagespeed.web.dev/analysis/https-www-template-breakdance-d19-ca/si4fa1r6xj?form_factor=mobile

(Please note you can’t test it anymore as I restored from a previous backup before the pages were created.)

Hopefully this can be an interesting discussion where we learn more about performance together. :slight_smile:

PS - The reason I’m playing around with this is due to setting up two new blueprint installs, and just running some comparisons for curiosity sake. I’m more of a developer (IMO) than a designer, so sometimes the ability to make a nice mega menu header in Breakdance quickly compared to Bricks appeals to me, even though I tend to prefer the Bricks experience better overall. Please take the above data as just a neat experiment.

14 Likes

Nice one! Very interesting! Maybe this should be done with all page builders and frameworks.

Hi @d19dotca,

Have you tried changing the css loading method in bricks to external and then comparing the page size?

Yes, I mentioned that in the notes above where I wrote:

  • I tried with External Loading CSS method but did not appear to make any difference other than bring the Bricks page size down from 60 Kb to 48 Kb (still far larger than Breakdance 16 Kb though), the scores were otherwise the exact same.

It didn’t make much difference at all other than shrinking the overall size a bit.

I think my main concern with this isn’t even so much the score metrics since they’re the same, but rather then fact that Bricks seems to load a lot of Javascript unnecessarily. All I did was add a header, rich text, and button… why is Javascript even loaded for any of those? Genuinely curious, because maybe I’m overlooking something. But if Javascript is required, then it’s curious how Breakdance gets away without it or at least loading only the necessary Javascript if at all.

1 Like

For the most part, Bricks puts pretty much all of the JS needed for the native elements in one minified file, bricks.min.js, which is on every page by default. (with the exception of elements/features that require JS libraries like sliders/galleries/lightbox etc or filters, where they will be added conditionally only if those elements are used.)

Whereas Breakdance adds individual JS files on each page depending on which features are being used.

So blank pages like this test will show Breakdance loading less JS by default, because it does. Once you add a header, menu builder etc. Breakdance page size will then increase as more JS is added to add that functionality, whereas Bricks will remain the same.

Note that we’re talking very little kb for both. Around 34kb for the default global JS for Bricks. Breakdance menu builder JS is around 19kb I believe. Not sure of the other elements/features.

(for context, GSAP + scrolltrigger effects is around 56kb, jQuery around 31kb)

4 Likes

Ah very interesting! Thank you for providing that insight. I didn’t realize Breakdance loads the JS on-demand for each page. I’m really hoping Bricks improves this to be that bit more performant. :slight_smile:

2 Likes

Oh sorry, I didn’t see the text after the screenshot at first.

Hey thanks for doing this! Very interesting.

1 Like

Excellent review. I get very excited every time bricks releases an update to improve performance. Because right now it has a great performance. But it moves to the top.

I hope that with the release of element manager, the loading of unused css and js will improve to a great extent.

2 Likes