Let’s talk about: Page Speed 🚀

This post is the first of our “Let’s talk about” series. This will be a series of blog posts where we cover WordPress, theme & business related topics and try to provide value by sharing some useful insights.

The latest updates for Page Builder Framework & the Premium Add-On include great improvements and performance optimizations. Today, I want to focus more specifically on page speed & how Page Builder Framework performs.

So, let’s talk about: Page Speed 🚀

Not everyone knows this, but I’m obsessed with page speed. It’s a passion of mine. I love digging into the code and figure out ways to do things more efficiently.

So, I was running a speed test the other day and thought it was a great idea to run another round of micro-optimization for Page Builder Framework.

via GIPHY

Speed Test Results

Let’s start off with a simple speed test.

This is a vanilla WordPress installation with nothing installed but the Page Builder Framework theme. No caching or any additional optimization. The server (VPS) is located in Frankfurt, Germany which is the location I chose before running the Pingdom speed test.

Pretty good, eh?

With only:

  • 68.6kb page size
  • 156ms load time
  • and 12 http requests

Page Builder Framework already is one of the fastest WordPress themes on the market.

But hey, there’s always room for improvement, isn’t there?

Yes, there is!

What we could have done…

Now, let me tell you what we could have done and why we’ve decided not to do it.

I figured it was quite easy to cut down the page size by almost 50% (!) and save at least 2 http requests by rewriting the theme’s javascript files to no longer rely on jQuery.

I got super excited about this idea in the first place. By no longer depending on jQuery we would have been at around:

  • 35kb page size
  • and 10 http requests

with no caching whatsoever.

via GIPHY

Sounds great, doesn’t it? The problem is, it isn’t practical. Here’s why:

  • Almost every plugin that uses Javascript and operates on the front-end of your website depends on jQuery – and with that, loads it.
  • We’d no longer be able to make use of the smooth animations that jQuery comes with unless we re-create them ourselves with vanilla JS. Sure, we could have replaced some of it with CSS animations but that wouldn’t have got us exactly where we wanted to be.

Most websites end up loading jQuery anyway, so why not actually use it to our advantage?

So, what’s the point?

The only reason this would have made sense is for the sake of a speed comparison.

In other words, could we have re-written the theme using vanilla JS and made it appear more efficient?

Absolutely.

Does this now mean Page Builder Framework is slower?

Ab-so-lute-ly not.

What we’ve done instead

We take performance very seriously and Page Builder Framework follows the – what we call – Framework approach. The theme, with its minimalistic design doesn’t force you into a specific direction. At the same time, it gives you all the customization options to design pretty much every aspect of your website.

Page Builder Framework is built completely modular, meaning, only the things that you’ve configured specifically are being loaded on your website.

But hey, who would we be if we let you go without a performance upgrade? 🙂

Here’s what you get with the latest version of Page Builder Framework:

  • Google fonts are now hosted locally by default – This helps with GDPR compliance and saves us a call to the Google CDN (which can be quite slow by the way)
  • The inline CSS that’s being generated based on the customizer settings can now be saved as a stylesheet

Premium Add-On users will have a new checkbox available under Appearance -> Theme Settings -> Performance Settings to compile the inline CSS and save it as a stylesheet.

Users of the free theme can add a filter to their child-theme’s functions.php to take advantage of the new performance improvements.

Conclusion

With this post, I wanted to give a look behind the scenes & communicate how decisions are being made for Page Builder Framework.

Having a fast website includes many factors, and it’s not only about using a fast theme like Page Builder Framework. It’s about hosting, plugins, caching, image optimization and so much more.

We’ve created a quick checklist for you to make sure you are utilizing some of the tools & tricks available to properly optimize your website.

Page Speed Checklist

  • Plugins – Go through your plugins and make sure you only have those activated that you actually need and are actively using on your website.
  • Hosting – Choose the right host for your website. We are currently hosting our websites with DigitalOcean and we manage the VPS with Serverpilot. Today, we would recommend looking into Runcloud.io. For a more managed and WordPress specific solution I can highly recommend Cloudways & Kinsta.
  • Updates – Keep your plugins/themes up to date. We’ve done multiple performance related updates in the past, I’m sure we’re not the only ones 🙂
  • Caching – Use a caching plugin. We’re using WP-Rocket at Page Builder Framework.
  • PHP Version – Run the latest PHP version on your server.
  • HTTP/2 – Make sure your server supports HTTP/2.
  • CDN/Cloudflare – Use a CDN to serve your images. Make sure to have a look at Coudflare as well.
  • Image Optimization – I’ve compared a ton of image optimization plugins and can highly recommend Optimole, WPCompress & ShortPixel.

What are you doing to optimize the speed of your website? Let me know in the comments below!

This was the first post in our “Let’s talk about” series. I hope you found it useful and I welcome any feedback that you have. Is there a topic that you want to talk about next?

About the Author

Stay in the Loop!

Sign up for our Newsletter & be the first to get notified about new updates & features!

Tired of the Default WordPress Dashboard?

Give it a more meaningful use for your customers & clients with Ultimate Dashboard!

2 Comments

  • Nice article David. It’s funny actually, I’ve contemplated removing jQuery from my themes in the past and always came to the same conclusions as you! LOL.

    The other big thing to factor in is that this is a “page builder” framework – meaning that the vast majority of the site’s overhead will come from the page builder and not the theme.

    With that said, you also don’t want a theme that adds unnecessary bloat either! Most builders these days can do just about everything that used to be a “feature” of the theme. Since that’s no longer the case, WP Page Builder Framework is the perfect solution!

    Reply
  • Great post David. Really cool that you shared “real world” tips about plugins and environment to use. I had a great chat with RunCloud today, they are really going in a good direction.

    The WPMU CDN has worked really well for me BTW. I struggle with Cloudflare (historically – haven’t tried recently) – always I have bizaar things going on with page builders. I think this is user error on my part with the Cloudflare setup though 😉

    Cheers
    Paul

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

We take your privacy seriously! See our Privacy Policy.

Page Builder Framework

A modern, fast & minimalistic theme designed for the new WordPress Era.

Sign up for the Newsletter

Get notified about the latest updates and feature releases.

Community
Scroll to Top