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.
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?
- 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 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.
Sounds great, doesn’t it? The problem is, it isn’t practical. Here’s why:
- 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?
Does this now mean Page Builder Framework is slower?
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.
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?