We all know that website speed is important when it comes to your WordPress website. Not just because Google tells us so, but more importantly the reader wishes to find the answer to their query as quickly as possible.
This improves UX – user experience and ensures that getting to the answer is the least of the reader’s problems.
Well, there is only one real way to test this.
Let’s begin our experiment.
So we set up a brand new WordPress website with no content on it at all.
Just for clarity, the website is hosted with Ionos and on their cloud server with no settings made to it at all. Just a default set-up in order for us to gauge a better perspective of how speed is accrued once we add a theme, a page builder and a handful of plugins.
Each step of the way we will rerun a report through GT Metrix to compare how the results change and their impact.
At each stage, we will give our analysis and recommendation for you to know what is the best way to move forward.
Step 1 – Clean Installation
This is a standard WordPress setup with no modifications at all. The current version is 5.7.2
No additional editing was carried out and as soon as the site went live we were able to run the speed test through GT Metrix.
Our Opinion: ‘Does WordPress slow down my website?’ is a question we get asked a lot. Of course, anything with a volume of coding (HTML, CSS and Javascript) will increase server access times, but you cannot serve a user-friendly website without the need to add in relevant code.
The old adage of speed vs functionality has and always be around for a long time. Only you can decide what a reader can see and the way they see it. Think like a reader and not a web developer.
As for the results we had lighting fast response and less than 1s loading. WordPress may not be the lightest in terms of coding, but for its capabilities and the need to future-proof, it certainly delivers.
Recommendation: Clearly selecting a great hosting company is a factor when considering hosting your website. I can personally attest to having used both Ionos and SiteGround for both work and personal websites for over five years. Yes, there have been issues, but they have been rectified quickly and with minimal disruption. Don’t choose a hosting company based solely on price, as the grief you will ensure at some point will negate the money saved. Simply put, you get what you pay for and lots of hosting companies provide excellent value for money.
Step 2 – Add a theme
At this point, we chose Astra as our theme to add to WordPress. Not because we already knew it was a lightweight theme, but having used it across multiple sites. We know it performs well and works comfortably alongside a host of plugins and specifically, Elementor without causing any issues.
The version uploaded is Astra Pro 3.5.2
Again we reran the speed test with GT Metrix to see what shift there was.
Our Opinion: Comparing to the previous speed test it would appear ever so slightly faster. In the realms of being as transparent as possible, we know that you can rerun a speed test several times and have a reasonable amount of variance.
In this instance it is negligible. , This we expected as we know how light the Astra theme is in terms of coding.
Recommendation: Selecting a WordPress theme is a big subject and open to a lot of debate. Having designed hundreds of sites over the years, simple principles help guide us. Choose a theme that delivers the look, feel and interaction you wish the reader to have. At some point in the future, this is exactly where you will end up delivering a feature-rich, fully functioning website to your engaged readers.
So, knowing this early on ensures that a more robust theme is chosen as compared to adding extensions of code and plugins to achieve something that could have been delivered in a bigger feature-rich theme.
Only you will know what is right and never be afraid to sacrifice speed for functionality as long as it delivers value. Likewise, if it does not, then prune back.
Hence this is the reason we chose Astra some time back across our suite of websites and then used the page builder, Elementor to take us forward for features and functionality.
Step 3 – Adding the Child Theme
The next step is adding a child theme to protect our coding changes from being overwritten via WordPress, plugin and page builder updates.
It’s also a great way to manage code changes globally as opposed to adding them to each page. Where you can avoid this, it makes housekeeping a lot easier over time.
Again, we ran a speed test in GT Metrix to see if this made any difference.
Our Opinion: Again, little to note here and nothing that would affect the loading of the website to the end-user. Thankfully, this is what we expected as a child theme only contains a handful of files and becomes bloated over time.
Recommendation: Make sure you use a child theme generator if you are not familiar with creating the required files yourself. Once loaded it needs to be activated under Appearance > Themes.
Step 4 – Adding Plugins
Now, this is where lots of inexperienced web developers can get carried away. I for one have been guilty of seeing all the choices available and loading a ridiculous amount of plugins to my WordPress website.
With more plugins, comes more housekeeping to keep them up to date and more importantly, more potential confliction issues that can affect the functionality and appearance of your website. Worst-case scenario, it might even take your website down.
As you can see in the screenshot, we have the default plugin added from the hosting company and nothing else.
Going under Plugins > Add Plugin we searched for Elementor. This is the basic plugin as opposed to the premium plugin and the first of many plugins we could add.
Before we upload the premium version, we will run a speed test and see how much heavy code this adds to slow our system down.
Our Opinion: Wow. Nothing moved the needle much.
But let’s be honest we haven’t built out any pages yet, so once Elementor starts using its vast selection of widgets, then we’ll see the additional loading on the server to download the code per page.
Recommendation: With all plugins decide on the merits of what value it conveys to you and the reader in terms of convenience and choices.
Remember to build it slowly and decide whether you really need that plugin or not.
Step 5 – Elementor Pro added
Now to add the premium version of Elementor and see how much more code is added to each page with the wealth of widgets provided.
As you can see we have just the two plugins associated with Elementor in order for us to start building out some great web pages.
Our Opinion: Again, nothing to note in loading times. As we stated earlier, once you design out a page, then you’ll see the effect of code volume on loading times.
So, we have kind of answered our own question. We need to design a page to see that results.
Recommendation: So far we have used GT Metrix to test the website speed, but it is also worthwhile using Google Page Speed Tool to gain another benchmark, as well as the difference between mobile and desktop views.
This is important if you have a responsive design that changes content between the two views and shows more on one and less on the other.
See our Google speed tests below:
Mobile version
Desktop version
Our Opinion: Even with all this loaded so far, it is clear to see that using a CMS – Content Management System such as WordPress, a theme, a range of plugins and/or a page builder does not amount to much in terms of loading the server and minimising access times.
Recommendation: The real divide here is when we add content (text, image and video) to the individual web pages, we will see the shift.
Step 6 – A Typical Web Page
After reviewing several sites, we decided to be as fair as possible by including the most obvious elements you would expect to see on a WordPress website.
- A header section containing a navigation menu, logo and button
- A hero section contain a powerful image and explanatory text with a CTA – Call To Action button
- Body copy which makes up the bulk of the page and describes what is on offer
- A widget containing a video URL which links back to YouTube
- A container for a contact form
- A footer section which contains several menus and links to other elements
The easiest way to achieve this was by adding a starter template from the Astra library. This would add content to the pages and images into the media library. Furthermore, this process would also add more plugins to the WordPress website and begin to increase the load on the server.
Now to reveal the results from the speed test and see what a difference some additional content and code has made to the foundation of our site.
Ok, so as you can see, the use of Elementor and more specifically its widgets has added more loading to the server. Generally, all the numbers look fine and nothing is presenting any issues.
This is mainly due to the template already being fairly well-optimised. A testament to using templates rather than building from scratch for anybody who is not a web developer and does not fully understand how to optimise content and code once you have done the initiate web page building.
However, let’s delve into the breakdown of these numbers a little more.
Everything is comfortably in the green and more than acceptable for a current web page. Clicking under ‘Structure’ allows us to see where we can make amendments and improve the overall offering.
This is explained under each tab and covered more in our GT Metrix series.
Our Opinion:
Recommendation: Cautiously adding the right amount of functionality that is delivered within the widgets of Elementor can clearly enhance the website and provide a great UX – user experience. Have a plan and stick to it when building out your website. After all content and images allow you to rank in order to visible to the reader. Clever animation does not.
Step 7 – Adding More Content
At this point, we felt the need to push harder to see if loading a page with lots more widgets from Elementor would cause the web page to slow down considerably and begin to resemble so many websites that lack good housekeeping to control functionality at a cost of speed.
To prove this point we have added a large range of widgets that require some form of animation and additional code to test the loading from the server.
In each stage, we have added an additional widget to ascertain the shift in server loading and its impact on the web page opening up.
This includes:
- Animated heading on the main hero image above the fold
- An image carousel with automatic scrolling
- Two progress bars
- Three flip boxes containing an icon and text
- Three tabs added to allow for more content within a limited space
- Three toggle tabs used vertically for things such as FAQs
- A Google map linked to geolocation data
BEFORE – default layout
AFTER – with all widgets added
Before I started we cleared cache which explains why the results are slightly better starting for Step 8 on.
This is not surprising as you would inevitably start optimising your website once you were happy with the element of design is complete.
Step 8 – Animated Heading
Step 9 – Image Carousel
Step 10 – Progress Bars
Step 11 – Flip Boxes
Step 12 – Tabs
Step 13 – Toggle Tabs
Step 14 – Google Map
Adding in a Google map massively impacts the site speed. This is due to widget constantly pinging back to the third-party server to provide up to date data.
For the Record
To be as fair as I could in establishing credible metrics, I ran each section three times and took the average from each recording. This is in part to the fluctuating server speeds which will give micro result changes.
As you can see from each individual widget being added under Elementor it began chipping away at the site speed.
Whilst it was only small, an accumulation of these per page would add up substantially to reduce the overall loading time of your webpage. However, I was pleasantly surprised by how little it made a difference. This is mainly in part to the developers of Elementor being very fastidious with their coding.
Things to Consider
Hosting
Points to bear in mind – cheap, ineffective hosting is always the first place to start in serving up your website as fast as possible. It may seem worth it, but compared to the range of hosting companies offering value-for-money hosting, it is a no-brainer. You get what you pay for and this is the cheapest element in relation to problems that will inevitably happen to your website over time.
Invest here to save both time, money and resources to fix issues that could easily have been included within your hosting. Such things as SSL certificates which provide quicker and more reliable access through HTTPS access.
Page Builder Widgets
Things to be mindful of that can add value and improve the aesthetics of a WordPress webpage but at a cost to speed include:
- Any form of sliders. Be this a hero section or individual containers for images.
- Any that relies on Javascript – forms, calculators, dynamic data
- Embedded video – the additional time to load from your server
Whilst this list is not exhaustive it paints a picture of how incorporating these widgets with the best of intentions can slow your site down drastically. Now it’s not a bad thing to have a selection of some of these, but the golden rule is not to overdo it.
Remember, not having any widgets which provide functionality on your web page is not what we are proposing. After all, it would be a very bland and boring site if you ignored having some elements of engagement.
Lastly, you do not have to make too much of a compromise to achieve a feature-rich, engaging website that loads quickly. The key here is to know how to optimise the content, images, video and code to perform as well as it can on the web page.
In Conclusion
As you can see adding all these extra features has not increased the load on the server much. Apart from such things as third-party access being required, for items such as Google Maps, RSS feeds, Social Media accounts and any form of API integration where you cannot access them to optimise them.
However, once we start filling out our widgets and adding design elements the amount of code needed to render the page will exponentially increase.
This is again, another area to consider. Less is definitely more when it comes to design and content, so have a clear, well-laid-out plan of what the purpose of each page is and the way it should look.
From our findings, we can see that designing out a website begins to load relevant and unnecessary code. Navigating this process can only work well if it is planned out before the work begins.
Having a clear well-laid website map can save hours of tweaking and muddled code that causes issues that takes far longer to resolve.
So, think about what you wish to achieve from the web page and design a strategic position.
