How to choose a fast loading WordPress theme in a reliable way

Hire a WordPress Expert on Codeable
Updated On: October 15, 2023 0 Comments

The role of a WordPress theme in a website’s performance

As you might already know, a theme is responsible for your website’s design.

Simply put, it takes care of the look and feel of the website by using:

  1. Theme options (for customizing the theme’s default design)
  2. Multiple CSS files (takes care of layout, typography, colors, and other aesthetics.)
  3. Multiple Javascript files (For providing interactive components like Dropdowns, tabs, image carousels, etc.)
  4. And PHP code for outputting the website’s content from the database

Not just that:

  1. A theme is hugely responsible for the accessibility and usability of your website because a theme is responsible for the HTML markup of the website.
  2. It also decides how the images are loaded in the browser.
  3. A theme plays a major role in Technical SEO too.

Long story short, a theme is the backbone of your WordPress website.

If you pick the right theme, it lays a strong foundation for a good user experience and overall performance of your website.

But what happens if you pick the wrong theme?

I mean a bloated theme with:

  1. A lot of theme options (Adds a few hundred milliseconds of burden)
  2. A lot of CSS and Javascript files for achieving the desired design (Adds a few seconds of burden)
  3. Loading images without taking smaller screens into consideration (Adds a few seconds of burden on mobile)
  4. A lot of PHP code (Poorly written code could add a few hundred milliseconds to a few seconds of burden)

As you can see, all the bad things combined, a bloated theme could delay the page load by 2-3 seconds at least.

Simply put, it does slow down your website considerably.

When your website audience expects your site to load in under three seconds, every second counts, right?

Google stat conveying that 53% of the people will leave your website if it takes longer than three seconds to load on mobile.

This is why it is important to choose a fast WordPress theme that is lightweight and helps your site load in under three seconds.

“Got it! But how do I know if a theme is lightweight? I can’t afford to purchase a theme to test it out. I can’t easily change the theme to a free theme either because my site gets visitors.”

Don’t worry.

You don’t have to purchase or install a theme to check its performance.

Every theme comes with a demo URL. Be it on WordPress.org or a third-party marketplace like themeforest.net.

All you need is that Demo URL and performance evaluation tools like webpagetest.org or gtmetrix.com to judge the theme’s performance.

This is better shown than explained.

How to evaluate if the theme is fastest loading WordPress theme

We can evaluate a theme’s performance in three easy steps:

  1. Get the Demo URL
  2. Provide that Demo URL to a performance analysis tool like gtmetrix.com and get the results.
  3. Understand the theme’s performance based on various metrics such as:
    • The total combined size of CSS and Javascript files that are loaded by the theme (Should be less than 150kb as a whole)
    • Number of DOM Elements after the web page is loaded in the browser (Should be less than 1500 elements according to Google’s recommendations)
    • Whether the theme uses the SRCSET feature to render images on tablets and mobiles. If it does not use the feature, the demo loads slowly on mobile and tablet devices.
    • Avoid using themes with in-built page builders such as Divi, Avada, etc. A theme using the Block Editor
    • Excluding a metric called TTFB, the total page load speed of the theme’s demo (Should be 2.5 seconds or less)

This process should be enough for you to make a decision.

But if you want to dig deeper, there are other tactics, but for that, we need to have access to the theme and spend a good amount of time. So, we will look at the process after we are done with the above-mentioned three steps.

Come on, let’s go through the steps in a detailed way.

Step 1: How to get the Demo URL of a theme

For free themes on WordPress.org

First, go to the “Themes” page on WordPress.org and choose your theme.

I chose the Neve theme.

So, I clicked on the thumbnail of the “Neve” theme:

Choosing and clicking on top of the Neve theme's thumbnail

It will now take us to the theme’s download page.

From here, we can get the Demo URL of the theme in two easy steps:

  1. Copy the theme slug from the URL of the theme’s download page
  2. Paste it at the end of “https://wp-themes.com/” URL

Step 1: If you notice the URL of the theme’s download page, the theme name is present at the end of the URL:

https://wordpress.org/themes/neve/

We should copy this name for the next step.

We can refer to the theme name in the URL as a slug.

Another example of the theme’s slug:

Step 2: Finally, paste that theme’s slug at the end of the “https://wp-themes.com/” URL.

For example, if the theme’s slug is “neve”, the final URL for the Demo becomes:

https://wp-themes.com/neve

If the theme’s slug is “kadence-wp”, the final URL of the Demo becomes:

https://wp-themes.com/kadence-wp

Basically, WordPress.org uses the wp-themes.com domain for hosting theme demos.

That’s all.

Keep this URL handy for the evaluation phase.

How to get the Demo URL for a theme on Themeforest.net

We can achieve this in three easy steps:

A) Go to Themeforest.net and visit the purchase of a particular theme.

B) Click on the “Live Preview” button

Live preview button to access the theme demo

In most cases, if a theme has multiple demos, we will be taken to the theme’s landing page.

If that is the case…

C) Click on the individual demo to get its URL and keep it handy for the evaluation phase.

Note: If the final demo URL from the Themeforest contains “preview.themeforest.net” in the URL, then that is not the actual demo URL.

If that is the case, ThemeForest is presenting the theme’s demo via something called Iframe, and that Iframe contains the actual theme demo’s URL as the source.

You have to use the browser’s “Inspect” feature to open up the HTML code of the theme’s demo page and find the <iframe> tag to get the actual demo’s URL.

I created a small video demonstrating this process:

“Got it, but what’s wrong if the theme’s demo is loading via an Iframe?”

Good question!

The Iframe is technically getting loaded via the Themeforest.net website.

So, if we evaluate the following URL:

https://preview.themeforest.net/item/enfold-responsive-multipurpose-theme/full_screen_preview/

We are technically evaluating the https://preview.themeforest.net website instead of the Theme’s demo website.

That is not what we want, right?

So, you must put some effort into finding the actual Demo URL that is getting loaded via the Iframe.

Anyway, Now that you have the theme’s demo URL, our next step is to evaluate the theme’s performance using the tools like:

  1. webpagetest.org
  2. GTMetrix
  3. Pingdom

When we provide the Demo URL to one of these tools, we will get the performance metrics we need.

You can only pick one of these tools because all of them provide what we need.

For the purposes of this article, let’s go with GTMetrix for easiness and webpagetest.org for advanced use cases.

Step 2: How to use GTMetrix to get performance metrics of a theme

We can achieve this in two easy steps.

Step A: Go to gtmetrix.com

Homepage of GTMetrix

Step B: Enter the Theme’s Demo URL in the box that says “Enter URL to Analyze”, and then click on the “Test your site” button.

Testing your site's performance by clicking on the "Test your site" button.

That’s all.

GTMetrix service will now take some time to analyze the URL and will provide results in less than a minute (in most cases).

GTMetrix analysing a website URL for its performance

A minute later…

Finished performance analysis for the Neve theme demo. The performance is 81% which is not bad.

And there we go!

The results are now out, and it looks like the performance of the demo of the Neve theme is looking great!

“Bro! The performance is only 81%, and the Largest Content Paint is 2.0s. How is this great? I don’t think so!”

Hahaha πŸ™‚

Those numbers don’t mean that the theme is bloated or slow.

Don’t come to any conclusion by just looking at those numbers.

The web hosting service that is being used for hosting the demo could also impact the performance report negatively.

In fact, if you notice the “Speed Visualization” section of the above screenshot, it says that the TTFB (Time for First Byte) is 1.7s.

Here is the zoomed-up version of the above report:

TTFB metric being too high and it is impacting the performance scores negatively.

It is indeed an indication that the server is not performant, and the number 81% for performance reflects that.

Please remember that the report produced by GTMetrix is about the overall performance of a web page.

It doesn’t know that you are using WordPress, and it doesn’t care about the theme either.

Anyway, in the case of WordPress.org’s server, it is not that performant because the Neve theme demo is hosted along with hundreds of other theme demos. And there are millions of people who visit these demos on a daily basis.

So, it does slow down the server a bit.

“Got it. But then, how do we measure the performance of a theme? It looks hard and complicated.”

Don’t worry.

To measure the performance of a theme accurately, we just have to look at different metrics from the same report πŸ˜€

“How? Come to the point!”

Aye, Aye, Captain…I am on to it right away πŸ˜€

Keep the GTMetrix report open. We will need it for the next step.

Just to recap, we can evaluate a theme’s performance in three easy steps:

  1. Get the Demo URL
  2. Provide that Demo URL to a performance analysis tool like gtmetrix.com and get the results.
  3. Understand the theme’s performance based on various metrics.

We have performed the first two steps so far.

Next…

Step 3: Understanding the theme’s performance based on various metrics

Evaluation 1: The total size of CSS and Javascript code should be less than 150kb

If it is more than 150kb (compressed), I would consider the theme as bloated. It doesn’t matter if it is a third-party theme like GeneratePress or a custom-coded theme.

The lower the code size, the faster the website because the browser takes a certain amount of time to process every additional kilobytes of the CSS and Javascript code before rendering the page.

Also, I am not making up this 150kb metric.

According to my experience and research, all fast-loading websites have this “Less than 150kb” thing in common.

Anyway, just to be on the same page…

CSS is responsible for the design and aesthetics of your website

For example, here is a webpage without CSS:

Demonstration of a website without CSS. The webpage looks dull without styles.

And here is the same webpage with CSS:

Did you notice the difference?

Simply put, CSS takes care of the following:

  1. Layout
  2. Backgrounds
  3. Mobile responsiveness
  4. Colors
  5. Typography (Fonts, Font sizes, readability, etc.)
  6. Animations

This means that for a theme with complex design and animations, the total CSS code size will be higher when compared to a theme with minimal design.

According to my experience, for a website with standard design, even with the inclusion of frameworks like Bootstrap, the total CSS file size should be less than 50kb (compressed) in most cases.

Let’s check the total CSS file Size for the Neve theme.

We can achieve it in two easy steps:

Step A) On the GTMetrix’s report page, click on the Waterfall tab:

The location of the Waterfall tab on the GTMetrix performance report page

Finally, click on the “CSS” tab:

CSS tab inside the Waterfall tab of the GTMetrix report page

The “CSS” tab lists all the CSS files that are being loaded by the theme and the plugins that the theme takes support from:

Total CSS file size for the Neve theme is 21kb

It looks like the Neve theme is relying on two CSS files:

  1. The first CSS file is from a plugin. But the theme relies on it.
  2. The second CSS file is from the theme itself.

The combined size of both files is 21kb.

Awesome, right?

This means that the “Neve” theme is not at all bloated in terms of its CSS code.

“The uncompressed metric says 144kb!”

Please ignore the uncompressed metric because the browser downloads the compressed files if GZIP is enabled on the server. So, consider the 21kb compressed file size.

“Nice, Can you give me an example of a bloated theme?”

Oh sure.

It’s not fair to compare a free theme like Neve with a premium theme like Avada because free themes ship with a very small number of features when compared to premium themes.

But for the same reason, the premium themes are more bloated because they contain a lot of CSS and Javascript code that our site doesn’t need.

For example, the Avada theme (premium) is bloated when compared to the free version of the Neve theme:

Total CSS file size for the Avada theme is 105kb

The Avada theme is loading only one CSS file, but its file size is 105kb.

It is five times larger when compared to the Neve theme.

The reason behind this is that the Avada theme comes with more design options when compared to Neve.

Last time I checked, Avada had 98 demo designs, and we only needed one of them for our website.

So, after installing the Avada theme, it still carries a lot of CSS code that we don’t need for our website, and there is no way to remove it, even if you’re a developer.

Now Avada’s 105kb could look like a small CSS file size, but it could take around half a second to load on mobiles.

On top of that, the Avada theme comes with an inbuilt page builder called Fusion Builder. Fusion page builder is another reason why the Avada theme is slow.

On the other end, Neve theme uses the default WordPress page builder called Block Editor. Block Editor is lightweight when compared to any third-party page builder such as Elementor, Fusion Builder, Divi, etc.

Even the premium version of the Neve theme uses the Block Editor to keep things lightweight.

Anyway, that’s all about CSS file size.

Next, let’s talk about Javascript.

CSS is responsible for the design and aesthetics of your website

Javascript is responsible for letting you add interactivity and visitor-tracking capabilities to your website

Simply put. Javascript does two things to our website:

  1. It allows us to add interactive components to our website. Interactive elements are nothing but:
    • Dropdown menus
    • Image and testimonial sliders
    • Accordions for displaying content like FAQs
    • Tabs for displaying content like product details.
    • Popups for collecting leads or providing discounts
    • The list goes on and on.
  2. It allows you to track your website visitors and their behavior to help you improve your business and make more sales. To achieve this, you’ll usually load third-party Javascript files from services like Google Analytics, Google Tags, Hotjar, Facebook Pixels, etc.

The total Javascript file size is usually larger than the total CSS file size because developers take the help of many third-party Javascript libraries for implementing the interactive components.

According to my experience, for a website with a standard design, the total Javascript file size should be less than 100kb (compressed) in most cases.

Also, please remember that this 100KB doesn’t include marketing-based Javascript libraries such as:

  1. Google Analytics
  2. Google Tag manager
  3. Hotjar
  4. Meta Pixel (Facebook Pixel)

These marketing scripts are pretty heavy.

We are excluding these script files from the theme evaluation criteria because:

  1. If it is a premium version of the theme, The demo site installs these marketing scripts for re-targeting the visitors via social media platforms and increasing the sales of the theme. This also means they are not part of the theme you’ll download because those scripts are irrelevant to your website.
  2. Even if you have to install those scripts for your own business and even if those scripts slow down your website, it is important to keep them because running a successful business needs them.

Always remember! Don’t hurt your business in the name of performance. The increase in the number of sales outweighs the 200kb of Javascript files that only take less than one second to load.

With that being said…

Let’s check the total Javascript file Size for the Neve theme by excluding the marketing scripts.

On the GTMetrix report page, we are currently on the “CSS” tab.

First, click on the “CSS” tab again to unselect it, and then click on the “JS” tab. “JS” stands for Javascript.

This will help us view only the Javascript files that are being loaded by the demo.

Total Javascript file size for the Neve theme is 2.6kb

Did you see that?

Wow!

The “wp-emoji” script file is being loaded by the core WordPress software. Not the theme.

Neve theme is loading only one Javascript file of 2.6kb. So, it is not bloated at all.

The reason behind this small file size is that by default, the Neve theme only supports very few Javascript components, and two of them are a drop-down menu and an off-canvas menu for mobile.

It doesn’t support:

  1. Popups
  2. Accordions (WordPress Block Editor supports this by default)
  3. Tabs
  4. And other fancy interactive components

And it is a good thing because most websites don’t need them.

To summarize, for the Neve theme, The total size of CSS and Javascript code is 24kb.

24kb is way below the benchmark of 150kb.

So, the Neve theme is definitely one of the fastest WordPress themes in terms of the CSS and Javascript file size.

And again, If we take a look at the Javascript file size for Avada (premium theme):

Total Javascript file size for the Neve theme is 177kb

If we exclude the 89kb of the Google Tag Manager script, the total Javascript size is still 176kb for the Avada theme. This is way above the 150Kb benchmark.

The reason behind this is pretty simple.

Avada supports most of the Javascript components via the Fusion Builder.

So, it is heavily bloated because we don’t end up using most of the Javascript components provided by Avada.

This is one of the reasons why I like free themes because they come with fewer features and less Javascript bloat πŸ˜€

But it doesn’t mean all the premium themes are bloated like Avada.

For example, for one of the well-designed premium demos of the GeneratePress theme, the total CSS file size is 28kb:

Total CSS file size for the Neve theme is 2.6kb

When it comes to Javascript, excluding the marketing scripts, the total Javascript file size is 46kb:

Total Javascript file size for the GeneratePress theme is 47kb after excluding the 213kb worth of marketing scripts.

If you notice the above screenshot, although the total Javascript file size is 213kb, the three marketing scripts (marked in red) have a total file size of a whopping 167kb alone.

If we don’t count those marketing scripts, the GeneratePress is only loading 47kb worth of Javascript code, and it is a pretty performant size for a fully-fledged premium theme.

To summarize, for the premium Generatepress theme, The total size of CSS and Javascript code is 75kb.

75kb is way below the benchmark of 150kb.

So, the GeneratePress theme is definitely one of the fastest WordPress themes in terms of the CSS and Javascript file size.

That’s all you need to know about CSS and Javascript file size evaluation.

There are a couple of other evaluation tactics, and let’s look at them next.

Evaluation 2: The theme must support responsive images using the SRCSET feature

Here is a fun fact from HTTP Archive.

On web pages, images make up 46.2% of the total page size on desktop computers and 48.6% on mobile.

For example, if the total page size downloaded by the browser is 1 MB (1000kb), then the total size of images is approximately 486kb.

So, if we optimize images properly, we can definitely achieve faster page load times on all devices.

Most of the image optimization must be done by the website owner who is uploading the images.

Neither WordPress nor the theme is responsible for most of the optimizations done to the images.

But one of the optimizations that a WordPress theme can support is, loading different versions of the same image according to the device characteristics, such as:

  1. Screen size
  2. Screen Resolution

A theme can achieve this with the help of an HTML attribute called SRCSET an image element.

<img 
   src="https://www.naresh.dev/full-flower-image.png" 
   srcset="https://www.naresh.dev/small-flower-image.png 300w"
/>

SRCSET stands for Source Set.

Here is how the SRCSET feature works

Imagine there is a photograph that is 1300px wide:

Using the SRCSET attribute, you can provide three versions of this image for the browser to load:

  1. A large one for desktops.
  2. A medium one for tablets.
  3. A small one for mobile phones.
<img 
   src="https://www.naresh.dev/full-flower-image.png" 
   srcset="https://www.naresh.dev/medimum-flower-image.png 767w, https://www.naresh.dev/small-flower-image.png 300w"
/>

After this, when someone visits your website:

  1. If they are on mobile, the browser will download and render the smaller version of the original image so that it loads quickly. For example, instead of loading a 1300px large image that weighs 200kb, a small 300px version that weighs only 45kb will be loaded on mobile.
  2. If they are using a tablet, the browser will download and render the medium version of the original image.
  3. Finally, if they were bigger screens like Desktops or Laptops, the browser would load the large image or the original image itself.

Because of this, mobile and tablet users will benefit the most because they don’t have to download large images even though they are looking at them on a tiny screen.

From the perspective of performance, because the smaller images are getting downloaded on mobile, the entire webpage will be super fast on mobiles.

“Super, Nice! Does this mean I have to upload multiple versions of the same image?”

Nope.

You don’t have to do anything.

All you have to do is upload the full-sized image. The rest will be taken care of by the core WordPress software and the theme.

Basically, when you upload an image to your WordPress site, WordPress crops and generates at least three smaller versions of the uploaded image.

For example, if you have uploaded an image that is 1300px wide to your website, WordPress generates the following smaller versions of the same image:

  1. Thumbnail version (150px)
  2. Medium version (300px)
  3. Large version (1024px)

So you don’t have to worry about it.

Anyway, WordPress generating these different image sizes is not enough.

The theme should also support the SRCSET attribute inside its code to make use of different sizes of the same image.

If it does, the theme definitely cares about the performance of your website.

How to check if the theme supports the SRCSET

We can achieve this in three easy steps.

Step A: Open up the theme’s demo URL in the Chrome browser

Step B: Right-click on any big-looking image (not a background image) and then choose “Inspect”:

This will open up the “Elements” tab on the Chrome Developer Tools box.

And you should now be able to see the HTML code that is being used for the rendering of the image.

If the theme supports the SRCSET attribute, the image element will have SRCSET attribute set like this:

Source Set attribute in action

If the theme doesn’t support SRCSET, then the image tag looks thin like this:

Easy to figure it out, right?

That’s all about the SRCSET-based evaluation of the theme’s performance.

Finally, let’s talk about the third evaluation tactic.

Evaluation 3: If the theme is using a built-in page builder, it is bloated, and it also breaks the standards of a high-quality theme

Divi and Avada themes are slow because of their built-in page builders.

To support the layout produced with the page builder, Divi and Avada use a lot of CSS and Javascript code which easily exceeds the 150kb performance benchmark that we talked about earlier.

Not only that.

To give you the ultimate design control, page-builder-based themes also output a lot of junk HTML code to the browser.

The larger the HTML code, the longer it takes for the browser to process it and render it because both CSS and Javascript code work with the HTML code to render the final webpage.

Simply put, a large HTML code could easily slow down the web page.

“Got it, Bro! But how much HTML code is too large and junky?”

We can easily evaluate the junkness of the HTML code with the help of the “DOM Elements” metric from Google’s PageSpeed Insights tool.

So, what are DOM Elements?

HTML code is made of elements like:

  1. Paragraphs (<p> tags)
  2. Images (<img> tags)
  3. Headings (<h1>, <h2>, etc.)
  4. The list goes on and on.

But when the web browser sees the elements inside the HTML code, it transforms those HTML elements into something called Document Object Model (DOM) elements.

It is necessary because CSS and Javascript code can only work with the DOM elements.

That’s all.

Anyway, the larger the HTML code size, the larger the DOM elements count because DOM elements are being built based on the HTML elements.

And you can easily find the “DOM Elements” count under the “Diagnostics” section of the PageSpeed insight’s report, and the metric is named “Avoid an excessive DOM size”:

Go to Google’s PageSpeed Insights and provide the Demo URL of the theme.

If the DOM count is more than 1500, then the HTML code produced by the theme’s page-builder is bloated with unnecessary HTML elements (Junk).

According to my experience:

  1. If a theme is using the default WordPress Block Editor as the page builder, the DOM Elements count never exceeds 1500 unless the webpage is really huge with a lot of elements.
  2. But if the theme has an in-built page builder like Divi, then the DOM count easily exceeds 1500, even if the webpage is moderately large.

So, please stay away from third-party page builders if performance is important to you.

That’s all I wanted to convey about evaluating a theme’s performance.

Having said all this, to make your life easier, I went ahead and tested some themes from the WordPress theme marketplaces such as WordPress.org and Themeforest.

And the result is…

Leave a Reply

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