How to Get the Most out of Your WordPress Page Builder with Hummingbird
If you’ve been around WordPress for a while you are also very much familiar with page builders. They are known for two things:
- Giving you the freedom to create a drag-and-drop site rather than having to script it from scratch
- They are heavy – creating a lot more load on your website (in terms of loading times)
The first has significantly changed WordPress – the ease of use and flexibility of these plugins/themes has turned the niche blogging platform upside down.
Many companies have taken a stab at building their own page builder themes, with some being very successful at it, while others have struggled to get traction.
Even WordPress core is jumping on the bandwagon with Gutenberg.
But, most of the plugins have one drawback, which actually makes people like me quite hesitant to use these themes.
I’m fixated with having a blazing fast site, and page builders introduce a lot of overhead which tend to bloat the site and kill the speed I’ve worked so hard for.
In this post I’ll show you how bridge the gap, to both get the convenience of a page builder while keeping your site running super fast with Hummingbird.
Why do page builders slow down a site?
To make a page builder easy to use, and most of all, to make it deliver beautiful results, it needs to offer a ton of features. Essentially, it needs to be as broad as possible – able to create a simple Call to Action button, or more complex features like sliders, contact forms, and other complex functions associated with a website.
This means that, at the very least, the CSS files added by the plugin are going to have to provide styling for all of the possible additions (even if the end user is not actually using every feature).
Besides the CSS files, advanced features like sliders, portfolios, image galleries, maps and others will also include a bunch of JS files.
This can be great for functionality, but the broader the builder is, the heavier the site will get.
A quick look at the table below shows us the performance hit a website takes when it sets up a pagebuilder plugin.
As you can see some of the cleaner and tinier page builders add only marginal size to your site, which isn’t such an issue.
On the other hand, some of these get quite heavy. We know they are heavy but we continue to use them because of the trade off for convenience and ease of use. (Incidentally, we recently reviewed Beaver Builder vs Divi on Collectiveray, we focused mostly on their functionality, rather than specifically on performance).
So can this be fixed? Can we get page builder functionality without performance issues?
This problem is not limited to WordPress.
This is where WPMUDEV’s Hummingbird can come to the rescue.
So how does Hummingbird help?
There are a number of ways in which your site can be boosted with Hummingbird – and this is not restricted to sites which are using page builders, this applies to any WordPress site.
One of the ways to really make your website load faster is by making sure that static files do not get downloaded over and over again.
For example, Fusion Builder mentioned above adds 200Kb of files to your website. These are files which essentially will never ever change, because it is CSS.
What Hummingbird does is adds a directive to the file, such that it only gets downloaded in two cases
- The file has actually changed
- A pre-set expiry date has passed
Hummingbird allows you to set various expiry times, ranging from days to up to a year. What this means is that if a user accesses your website over and over again or visits multiple pages on your site, they will use the same file that has already been downloaded.
This saves a lot of download time because the browser actually uses a local copy of that file instead of downloading it.
Multiply this by all of the static files on your website such as ALL CSS files, images, JS files … and this will make a significant difference to the loading time of your website.
The really cool thing is that Hummingbird does this automatically for you. Typically you would have to tinker around with the .htacccess file, with the risk of breaking the site in the process.
This is another simple feature which actually makes a nice difference.
In reality, when we are optimizing for speed, we use the concept of the three Rs
The browser caching uses the concept of “reuse” and “recycle”.
GZIP Compression goes for the R in the middle – reduce. Essentially, what GZIP compression does is compress the content such that there is less to transfer.
Once again, with HTML being mostly textual in nature, it is a very very good candidate for compression. You’ll get excellent compression results, when compressing text-based content.
But the really great thing is, GZIP is something you do once (just enable a setting) and you get the benefits forever!
If you’re using a CPanel based hosting account, you can enable this through the “Optimize your website” icon.
But really and truly, you don’t even have to do this if you are using Hummingbird.
If GZIP is not enabled, Hummingbird will once again, insert a setting into your .htaccess file such that GZIP compression is enabled.
Asset Optimization and Combination
We now move to the third R, recycle – essentially, what we want to do is rather than opening a connection multiple times for different files required by our website, we will recycle the same connection and send a combined version of all our files through the same connection.
Just to briefly explain the idea, we’ll use the idea of waiting tables. This is a great analogy for explaining the benefits of combining files into one.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Imagine a drink waiter in a restaurant. They are serving a table of ten people, so they come and take the order of the first person, go to the bar and bring them their drink.
Then they take the order of the second person, and bring them their drink.
Once again, they take the order of the third person, go back to the bar and bring their drink. This goes on until all drinks have been served.
This is an extremely inefficient use of time and resources – it will take both a lot of time and many back and forth trips.
However, if the waiter took everybody’s orders, then went to the bar, got all the drinks on one tray and served them all once, (maybe twice, we don’t want them to drop everything ;-)) their work would be much more efficient.
This is the general idea behind combining multiple CSS and JS files into one.
Creating an HTTP connection to your website is a very technically expensive operation which takes a significant amount of time. So if we could open the connection just once and recycle this connection to send all of the CSS and JS files, this would save a lot of time – a significant amount of time, when you consider that most websites will generate upwards of a hundred CSS and JS files.
This is especially true if you are not using HTTP/2 on your site. The number if requests your website is generating, in terms of different CSS and JS files creates a significant performance impact on your site.
How does Hummingbird mitigate this?
The plugin analyzes all of the files on your website and then gives you the option to perform a number of tweaks on the files such as to make the loading of your website more efficient.
What Asset Optimization does is remove any superfluous code from CSS and JS files to make them as small as possible in terms of download size.
It strips any comments, empty space, extra lines, or anything which is “extra”. Hummingbird actually uses its super optimization tool which compresses files up to 2x more.
With the Hummingbird wizard which we will show you in a moment, you have the option to add each specific file to a resultant ‘combined’ file as discussed above.
The great thing is that you are in full control of whether you want to include the file or not. The reason is that some plugins and / or themes don’t play nicely with others.
By having the option to decide whether you want to include each file individually, you can test each file on your site in such a way that you include as many files as possible into the file. However, if any of those files breaks your site when included in the combined file, you can choose not to include it.
Position (Original vs footer)
Another option which comes with Hummingbird is the ability to decide whether to allow the file to remain in its original position (typically the header), or get it moved down to the footer,
Once again, this is an option which can help improve the performance of your site, but this time in a more user-oriented fashion.
When a large number of files (which are quite large in size) are included in the header, the browser has to wait for ALL of those files to download before starting to display the page.
What this means is that your user will sit at their browser, waiting for all those files to download before they see anything on their screen.
This, of course, can be very frustrating. Studies have shown that a website which loads slower than 3 seconds starts to frustrate users to the point where they start leaving the site. There’s also a correlation between page speed and conversion – faster sites convert better.
But let’s get back to the discussion.
By having CSS and JS files loading in the footer rather than the header, the page will start rendering and showing text and images as they are received by the browser, rather than waiting for all the heavy CSS and JS files to download.
CDN Hosted File Optimization
We’ve spoken time and time again about the importance of using a CDN to deliver heavy files. Simply put, a CDN helps in two ways. It spreads the load of your site over multiple servers, but most importantly, it serves the files from a geographical location which is physically closer to the location of your visitor.
But a CDN may not always be affordable or feasible.
With Hummingbird, you don’t have to fork out anything for a CDN. This is because part of the services built-into the plugin allows you to serve your combined files from WPMUDEV’s CDN infrastructure – a super-fast network of servers distributed globally for maximum loading speed.
This is another big one. Strictly speaking it’s not a feature of Hummingbird, but like a good performance plugin should, it will recommend an image optimization plugin, and of course, WPMUDEV has a great offering in this regards (Smush Pr0).
The reality is that most of us hardly bother to optimize our images for the web.
However, by not optimizing images, we are creating a serious negative impact on our page loading speed.
For example, did you know that a single simple unoptimized PNG can add more than 200Kb to the size of your website.
That’s more than all of the extra size added by the worst performing page builder mentioned above.
Now, multiply that by all of the images on your site, especially if you have an image-heavy site, and you can see how this will all rack up and have a significant impact on performance!
Hummingbird does not stop at the above recommendations. It goes even deeper, beyond the stuff it can control.
For example, I really found it useful that it makes excellent recommendations for reducing server response times. This was something I struggled with for a long time, and following recommendations to install an OpCache mechanism, I was finally able to get rid of that nagging error which had been bothering me for a very long time :-)
Page builders and other multi-purpose or generic themes and plugins can have a severe and significant impact on your site speed. Putting in place the recommendations suggested by Hummingbird can will give you the best of both worlds – an easy to design website using your favorite page builder *and* blazing fast speed!