Fastest & Most Lightweight WordPress Theme


Userlevel 3

(I was told to post here in the community rather than in Facebook group by the mods as it keep things organised, that was a while ago and I had forgotten to post but here it is now)

All tests have been done in the same server with no caching, minification, CDN or ANY type of optimisations to keep things fair for all the themes.

I talk about in detail and go through the entire testing process in my video. Check it out.

When you click “show content” below, it’ll show you a spoiler of the video.

SPOILER: Hello theme by Elementor wins the 1st position for being the most fastest and lightweight theme in WordPress. Checkout the runner ups at the end of the video. Yes, you can skip to the end if you don’t mind watching the full video, no hard feelings.

 


11 replies

Userlevel 4
Badge +1

Hi, Sandy:

Some of those responses from your hosting are curious… they were saying that Google was not using an updated device?

I took a brief look at “Homepage - Agency”. A few thoughts:

  1. About half the resource requests on the page, including a JavaScript file come along with that “Image Carousel” widget for “clients logos” with the 13 logos that sites right below the “hero section”. Once I eliminated that whole section my score jumped about 10 points at Google Page Speed. This is one of those decisions you’ll need to make on whether the impact is worth it. Because of the mobile treatment, each image here needs to be at a decent size.
  2. The dimensions of the girls picture in “testimonials” is way larger than it is being displayed. Here is some easy ground to make up.
  3. There are 9 png files in the remainder of the page used for those line art icons. I took one of them into this site and got a 41% reduction in filesize: https://tinypng.com/
     I’d replace these with optimized versions. Even better - if you can find simple SVG files to use instead they tend to be smaller. If switching to SVG, you can replace the image widget with the “icon” widget. That way the SVG files is inlined into the page and it won’t need to call an external resource.
  4. The 2 column layouts throughout the bottom half of the page can be optimized to use less code be doing some layout tricks inside of a single column, rather than using 2 columns. This is a bit more advanced to understand but Elementor has a great video on the concept here: 
  5. The test beside those grey icons uses multiple widgets to accomplish (2 headings and a test widget). If you have access to Elementor Pro, you might find that the “Call to Action” widget would work here. Because it is a single widget it creates a less complicated DOM (document object model) than using 3 widgets, but accomplishes the same thing. That video above also covers this.
  6. For caching, WP Rocket seems really effective if you want to spend the fee for it. I’m using Breeze cache for the site I tested on (part of Cloudways), but it doesn’t have some of the very useful options WP Rocket has. If the site is mission critical, I’d likely be using WP Rocket.

Hope this helps some!

 

Userlevel 4
Badge +1

You are welcome! Best wishes with your site!

Userlevel 3

@Mario Barretta press the three dots in the formatting bar when creating a post or even when you’re replying to a post or comment and there you will see the spoiler button :grin:

Userlevel 6
Badge +3

HI @Soum A 

Thank you for test.
How have you applied the show/hide text in yuor post? 

Userlevel 6
Badge +3

@Mario Barretta press the three dots in the formatting bar when creating a post or even when you’re replying to a post or comment and there you will see the spoiler button :grin:

 

 

:grinning:

Hi, thank you for the test!

I just started a staging website with Hello theme (2.4.1) + Elementor (Free) + PHP 7.4. Since I am at a very early stage, the only plugin I activated was Elementor, and I just used one of its free templates for the homepage. Before I added any customized design to the site, I ran the google speedtest, surprisingly the score of mobile version is only 70. The pagespeed itself is pretty good though (less than a second with the Pingdom test) And I tried to fix that with some cache & css minifying plugins, but the score just won’t change any better. I wonder if anyone else encounter this situation? Is there a good solution to it? 

Userlevel 4
Badge +1

... I just used one of its free templates for the homepage. Before I added any customized design to the site, I ran the google speedtest, surprisingly the score of mobile version is only 70. 

A lot of the templates (free or pro) are going to include features or layout strategies that, while visually pleasing, impair performance. It’s always going to be a cost/benefit analysis when adding features.

 

If I may ask, which template did you add? If I get some time over the weekend I’ll take a look at it and give you my thoughts on ways that performance can be improved.

 

... I just used one of its free templates for the homepage. Before I added any customized design to the site, I ran the google speedtest, surprisingly the score of mobile version is only 70. 

A lot of the templates (free or pro) are going to include features or layout strategies that, while visually pleasing, impair performance. It’s always going to be a cost/benefit analysis when adding features.

 

If I may ask, which template did you add? If I get some time over the weekend I’ll take a look at it and give you my thoughts on ways that performance can be improved.

 

Hi Mark, thank you so much for the reply!

I see what you meant. I think that’s reasonable. The template I picked was the Homepage - agency - page. I actually tried a different template (a random one) but still no good score. I’ve asked Elementor support and my hosting support. They gave me some suggestions like: “It's probably a matter of needing to set the mobile responsiveness of that header” and “google speedtest score is not always accurate for the mobile test because the device they uses for the test is not the most updated one” or maybe it’s because I am working on a non-indexed staging instance. I don’t know. I guess I just have to test more, try everything.

Hi, Sandy:

Some of those responses from your hosting are curious… they were saying that Google was not using an updated device?

I took a brief look at “Homepage - Agency”. A few thoughts:

  1. About half the resource requests on the page, including a JavaScript file come along with that “Image Carousel” widget for “clients logos” with the 13 logos that sites right below the “hero section”. Once I eliminated that whole section my score jumped about 10 points at Google Page Speed. This is one of those decisions you’ll need to make on whether the impact is worth it. Because of the mobile treatment, each image here needs to be at a decent size.
  2. The dimensions of the girls picture in “testimonials” is way larger than it is being displayed. Here is some easy ground to make up.
  3. There are 9 png files in the remainder of the page used for those line art icons. I took one of them into this site and got a 41% reduction in filesize: https://tinypng.com/
     I’d replace these with optimized versions. Even better - if you can find simple SVG files to use instead they tend to be smaller. If switching to SVG, you can replace the image widget with the “icon” widget. That way the SVG files is inlined into the page and it won’t need to call an external resource.
  4. The 2 column layouts throughout the bottom half of the page can be optimized to use less code be doing some layout tricks inside of a single column, rather than using 2 columns. This is a bit more advanced to understand but Elementor has a great video on the concept here: 
  5. The test beside those grey icons uses multiple widgets to accomplish (2 headings and a test widget). If you have access to Elementor Pro, you might find that the “Call to Action” widget would work here. Because it is a single widget it creates a less complicated DOM (document object model) than using 3 widgets, but accomplishes the same thing. That video above also covers this.
  6. For caching, WP Rocket seems really effective if you want to spend the fee for it. I’m using Breeze cache for the site I tested on (part of Cloudways), but it doesn’t have some of the very useful options WP Rocket has. If the site is mission critical, I’d likely be using WP Rocket.

Hope this helps some!

 

Hi Mark,

Thank you so much for actually spending your precious time to do all these tests and giving such detailed inputs for my question. It’s pretty helpful :D 

Userlevel 6
Badge +3

Totally go with Hello!

Which Theme Should You Use with ELEMENTOR | Hello, Kadence, Astra, GeneratePress, OceanWP - YouTube

 

Userlevel 3

I wonder what the results would be (or rather how much has changed good or bad) with the latest Hello Theme version released just the other day. Nearly everyone (including myself) was either against or couldn’t comprehend why they decided to add a header and footer freebie feature to the theme. Everyone saw it as extra bloat to the theme. Elementor team assured everyone it wouldn’t cause any difference in speed though. 

Reply