6 Fastest WordPress Themes Based On CSS, JS, Fonts Of Starter Templates [2022]

Testing the speed of WordPress themes isn’t as straightforward as installing them and measuring scores.

It’s more accurate to measure a theme’s CSS, JS, and font sizes which stay consistent no matter how many times you run a speed test (unlike scores, load times, and core web vitals).

Each theme also has their own starter templates which have different designs. I did my best to test similar starter templates/layouts which have a basic design (they don’t use heavy elements like WooCommerce, videos, Maps, forms, mega menus, or elements that can add CSS/JS/fonts).

Some themes like Astra let you choose between different page builders (Gutenberg, Elementor, Beaver). So I tested all 3 and used the fastest option (Gutenberg) in the main test.

Page builders like Elementor/Divi also have built-in performance settings like Elementor Experiments and Divi’s Performance settings, so I tested both. Without getting into this too much, let’s talk about the testing conditions since there are quite a few variables to consider.

Testing Conditions:

  • Each theme was installed on a fresh WordPress installation using the same host (NameHero’s Turbo Cloud plan) with no cache plugin, server-side caching, or CDN.
  • I imported a starter template from each theme since that’s what most people do. I did my best to use similar designs (around 3-4 scrolls) and avoided layouts with heavy elements. Using a similar page size doesn’t make sense since that’s the cost of using slow themes and page builders (the whole point of the test). If a theme didn’t have starter templates, I imported a basic page layout from their template library since that’s what most people do.
  • I used Gutenberg for Astra (since that’s the fastest option) and Oxygen Builder for Oxygen, but I also tested Astra with Elementor + Beaver using the same theme and posted results.
  • Elementor Experiments related to asset loading/DOM output (as well as Divi Performance settings) were left on during the main test, but I ran separate tests showing the impact of when these are turned ON/OFF. Oxygen Builder’s performance settings were also left on.
  • I tested CSS, JS, and font sizes in the GTmetrix Waterfall chart since these stay consistent.

Fastest wordpress theme starter templates

 

1. Astra

Astra with Gutenberg was the fastest WordPress theme in the test.

But there’s been complaints about too many autoloads, Ultimate Addons for Elementor creating slow database queries, and poor support with shady billing. Still, it’s rare to see a perfect 5 star TrustPilot rating and they have one of the largest selections of industry-specific themes (with some of the nice designs IMO). I think Astra is most suitable for agencies due to their large selection of themes and choice of 3 page builders – so you can satisfy most clients. But from what I see in Facebook groups, most people use GeneratePress, Kadence, or Oxygen.

  • Starter template used: Outdoor Adventure
  • Page builder used: Gutenberg (with separate tests for Elementor + Beaver Builder)
  • For main Elementor test, Experiments were turned on (improved asset/CSS unloading, inline font icons, optimized DOM output) but local fonts + fonts preloading were left off
Starter Templates Lifetime Price Installation
180+ $499 View Instructions

Astra starter websites

Astra block editor speed test
Astra Theme + Outdoor Adventure Starter Template + Block Editor
Astra elementor css js fonts with optimizations
Astra Theme + Outdoor Adventure Starter Template + Elementor (Experiments, Local Fonts, Font Preloading ON)
Astra beaver builder speed test
Astra Theme + Outdoor Adventure Starter Template + Beaver Builder

Elementor Experiments + Font Optimization – when these optimizations were turned on, it made Elementor faster than Beaver Builder. But CSS/JS/font sizes were still large compared to more lightweight options like Astra + Gutenberg, GeneratePress, Oxygen Builder, and Kadence.

Elementor experiments and font optimization impact

Gutenberg block editor vs elementor vs beaver builder speed with astra
Elementor Experiments Off (No Font Optimization)
Astra with block editor elementor beaver builder
Elementor Experiments On (No Font Optimization)

 

2. GeneratePress

This is what I used to redesign my blog.

GenerateBlocks is pretty much a must-have which means $250 for the GeneratePress lifetime deal + $39/year for GenerateBlocks. Not bad. I chose it over Kadence mainly because I liked the “Search” starter template (same one I used in the test) and I also saw a lot of people were using it in Facebook Groups. I also wanted something I could learn quickly which is the only reason I excluded Oxygen. It’s easy, yet it still leaves room for custom code if you want too. Moving from my old theme to the GeneratePress Search theme also reduced my CSS & JS size by almost half.

  • Starter template used: Search
  • Page builder used: Gutenberg
Starter Templates Lifetime Price Installation
85+ $249 View Instructions

Generatepress site library

Generatepress theme css js fonts
GeneratePress + Search Starter Template

 

3. Oxygen Builder

I used the “Financial” design set which had one of the most basic designs out of their 17 templates.

Even though I left all the optimizations on in the Oxygen settings, font/JS size were slightly higher than Astra/GeneratePress. This shouldn’t be a big deal since you can host fonts locally and preload them which will make the difference even smaller. The biggest con is the steep learning curve. Instead of using blocks/modules, you’ll be using things like divs and columns. The interface can be overwhelming at first but a lot of people swear by it (just join the Oxygen User Facebook Group). Even though I try to do my due diligence since I write reviews on this stuff, Oxygen was a little much for me. I just wanted something simple and Oxygen wasn’t that.

  • Design set used: Financial
  • Page builder used: Oxygen Builder
Starter Templates Lifetime Price Installation
17 $229 View Instructions

Oxygen builder design elements

Oxygen builder css js fonts
Oxygen Builder + Financial Design Set

 

4. Kadence

$650 for the lifetime license is steep.

I’m sure Kadence is great and is used by top bloggers like Adam from WPCrafter, but GeneratePress is much cheaper with slightly less CSS based on the 2 starter templates I compared. They have a few free themes and the pro version does come with Kadence Blocks. Compared to GeneratePress, Kadence also have more options for the header builder, global color palette, local Gravatars, and generally more customization settings. So you can decide whether it’s worth an extra $400 instead of GeneratePress. I personally chose to save the money.

  • Starter template used: Agency Free
  • Page builder used: Gutenberg
Starter Templates Lifetime Price Installation
45 $649 View Instructions

Kadence starter templates

Kadence theme css js fonts
Kadence + Agency Free Starter Template

 

5. Hello Elementor

Hello Elementor is pretty much a blank theme, so of course it’s fast out of the box.

But once you start adding content, you’ll start seeing extra CSS, JS, and endless div wrappers. This was the case when I imported a basic layout (Restaurant About Page) on top of the theme. It went from being super minimal (because there was literally nothing) to the typical bloated Elementor site. Activating Elementor Experiments helps, but they’re not magical settings and Elementor is still slow. Elementro Pro (and many other Elementor plugins) will add even more CSS/JS to your site, not to mention WP Johnny found Ultimate Addons For Elementor was bloated. I made the horrible choice of redesigning my site in Elementor and regretted it every step of the way. “Elementor” appeared 2,000 times in my source code, it negatively impacted core web vitals, and I came to the realization that I don’t like drag and drop page builders. Sure, I’ve seen fancy sites built with Elementor. But I don’t need that and chances are, neither do you.

  • Elementor Kit used: Restaurant About Page
  • Page builder used: Elementor
Kits Price Installation
100+ Free Install In WordPress

Hello elementor theme

Hello elementor theme css js fonts
Hello Elementor + Restaurant About Page
Elementor source code
My site when I used Elementor + Elementor Pro

 

6. Divi

Divi… ugh.

Even though Divi’s performance settings were all turned on in the test, it was still the slowest theme/page builder. It was also the only theme where I had to increase max upload size just to import it (never a good sign). When Nick Roach announced Divi’s new performance settings, he also said they want to “make Divi the fastest page builder around”. Looks like they still have a long way to go. It’s mainly for beginners who seem to get sucked in by the 100 animations they stuff on a single page, but experienced users know to stay away from Divi. Not only is it slow on the frontend, I don’t want to wait 5 seconds every time I edit a page using Divi’s Builder. Just no.

Layouts Lifetime Price Installation
1,800+ $249 View Instructions

Divi theme

Divi with performance settings
Divi + SaaS Company Landing Page (Performance Settings ON)
Divi without performance settings
Divi + SaaS Company Landing Page (Performance Settings OFF)
Divi performance settings impact
Impact of Divi’s performance settings when they’re ON/OFF

 

7. Final Thoughts

GeneratePress for the average person, Kadence if you have the money, Oxygen Builder if you have time to learn and are open to learning something different, and Astra for agencies who need a large selection of nicely designed starter templates in multiple page builder. Sound fair?

My vote goes to GeneratePress.

Fastest wordpress themes by wp rocket
Fastest WordPress themes according to a Facebook post by WP Rocket
Generatepress vs astra
Asked by Anil from the Bloggers Passion Facebook Group
Fastest wordpress themes poll
This Facebook poll is outdated but still somewhat accurate (posted by Ivica in WP Speed Up)

I plan on testing starter templates from Blocksy, Genesis Pro, OceanWP, Avada, and Neve. I wanted to knockout the most popular themes first and I’ll add more later. Give me some time :)

TLDR: stop using Elementor/Divi.

Cheers,
Tom

You Might Also Like:

Leave a Comment