Since I’ve been talking about WP site speed optimization around here, I’ve often been asked if I know good, fast WordPress themes with quality code that doesn’t load tons of useless JS and CSS slowing down the site. I must admit that I never knew what to answer… All the themes I had seen were full of useless stuff, didn’t integrate images correctly (with srcset and sizes attributes) and so on. Besides, since I develop my own themes, I never dived deeply into this topic.

But I decided to change that to help you choose a fast WordPress theme!

Note

The WordPress theme is an important element that influences the loading speed of your site. But there are many other important elements like PHP version, caching, CDN, image compression etc… more info in my guide to optimize the speed of a WordPress site.
I also want to add that my themes (this one or the one on our travel blog) are not perfect. There are several things that are not ideal that I didn’t know when I created them and that I haven’t changed yet.

So the first thing I did was a big web search to check out a little which WP themes often came up as “faster”. So I came across a lot of articles like “the 10 fastest WorPress themes in 2020” and I must say I was extremely disappointed by the quality of the 95% of the articles I read.

Why were these WordPress themes comparisons so bad?

It’s simple, I found almost no WP themes comparison that used interesting comparison criteria to analyze their impact on the website loading speed. These comparisons generally use

  • Scores from testing tools such as Pingdom, GT Metrix, WebPageTest, PSI etc… Even if these tools are generally very good for analyzing websites, they take into account a lot of elements that are independent of the theme (cache, compression, server, CDN).
  • The number of requests: As I explain in details here, with HTTP2, the number of requests is no longer important for the loading speed.
  • The size of the analyzed page: The size of the page will depend a lot on how the theme integrates the images (integration of srcset and sizes attributes, sizes of the images used etc…). It is therefore not a good comparison criterion.
  • the TTFB (time to first bite): Measures the time between the moment your browser makes the first http request and the arrival of the first bite of the response. Even if this time includes the speed at which WordPress (and thus the theme) generates the html of the page, the TTFB will be optimized by using page caching and/or a CDN. So this is not really the most interesting criterion.
  • Fully loaded time: I’m not saying that this criterion is not important, but it is more important that the site displays quickly (that’s what the visitor sees) even if it is not yet fully loaded.

Pretty bad, huh? Here are the criteria I chose and why.

Important criteria to analyze the speed of WordPress themes

Below you will find the comparison criteria I have chosen and why:

The size/complexity of the HTML, CSS and JS generated by the theme

Your browser needs time to read and interpret the HTML and CSS / JS files in order to display the page. The larger and more complex these files are, the slower the page will display. The problem also is that this point cannot be optimized later using plugins (no combining and minimizing these files does not change the fact that the browser needs to read and interpret them).

The vast majority of themes offer lots of different designs (so big CSS files) with lots of animations and features (so big JS files). The famous Page Builders often create HTML that is much bigger and complex than necessary. So the key is to find the right balance between what you really need in terms of design / functionality, and optimizing the loading speed.

How to measure the size/complexity of HTML, CSS and JS

I recommend you use a tool called Yellowlab that will allow you to measure all this.

Once on the Yellowlab page, enter the url you want to test to get a full report (don’t be afraid if your score is bad, we’re here to improve it).

yellowlab tools
Screenshot of the YellowLab tool analysis

Here are the things you need to pay attention to:

  • Click on “Total Weight” and you will land on a page that will allow you to see the size of the CSS and JS used by your site. This is what I used below to measure the CSS and JS sizes of the themes I will compare.
  • DOM complexity: The DOM is a kind of tree diagram created by your browser with the HTML of your page. The bigger and more complicated the DOM is, the more time the browser will need to “attach” CSS and JS to it.
  • DOM Manipulation: Measures how HTML is manipulated by JavaScript. The more manipulations, the more time your browser will need to display the page.
  • CSS Complexity: A real problem in the world of WordPress because most themes create a single CSS file for all the pages of the site when it would be better to create a global file and several more specific CSS files per page type. In short, the less complex the CSS is, the faster the browser will display the page.

Responsive images with well-implemented srcset and sizes attributes

I am not going to go into detail here, as I have dedicated an entire article to this. But be aware that in order for the browser to display the right image according to the type and size of the visitor’s screen, your theme must correctly implement the srcset and size attributes. Click on the image below for more details about this.

responsive images wordpress

If these attributes are not set up properly, your browser may display images that are much bigger than necessary, which can have a huge impact on loading speed. All the information to check if these attributes are set correctly is in the article above.

Note: if your theme doesn’t implement these attributes or doesn’t implement this properly, you can use a CDN service compatible with responsive images such as EWWW or Shortpixel. But this is not free of charge of course.

A site that displays fast

What is important for your visitors is not that the entire page they are visiting is loaded as quickly as possible, but that the browser displays the visible elements of the page as fast as possible. This is in a way the visual loading speed of your page. There are several test tools that offer visual loading metrics. In general they are measured by taking screenshots of the visible part of the page (10 per second maybe) and analyzing the visual difference between each screenshot.

To compare WordPress themes below, one could use the RUM Speed Index from GT Metrix or the Speed Index from WebPageTest. I chose the PSI speed index because it offers a desktop value and a mobile value in 1 test.

 

A “Mobile first” WP Theme

If you analyze a little bit the traffic of your site, you will certainly have noticed that most of your visitors visit your site on their mobile phone and that this trend is only getting stronger.

But what does it mean to have a “Mobile first” theme?

Without going into technical details, it means that your theme has been coded (and maybe also designed) first for mobiles and that its content adapts as the screen size grows. This approach has several advantages:

  • This improves loading speed on mobile: If the site is not coded in “mobile first”, the browser must first browse through all the desktop CSS before finding the mobile CSS it needs to display the page correctly by transforming the desktop display. This is all the more true since on mobiles we have less powerful processors and generally less bandwidth. So we might as well make it easier for phones by giving them the CSS right away and by not making them load all the elements needed for the desktop version before. Especially since most of the traffic now comes from the mobile.
  • The size of the CSS is generally smaller: In general, it is easier to start from a clean mobile version and add elements than to do the opposite. You will need fewer lines of CSS code when using the “Mobile first” approach and therefore the CSS will be less heavy.

This is for example one of the mistakes I made on the theme of our travel blog (which is “desktop first”) which makes it a bit slower on mobile. But that’s something that would unfortunately require a lot of work for me to change now.

To check if a theme is “Mobile First”, CSS media queries should contain “min-width” and not “max-width”. This is also a point that can be verified in the Yellow lab report.

Do not only test the home page

I was surprised to see that most online comparisons only test the home page (which is often one of the fastest pages) to compare the loading speed of themes. However, a good theme won’t necessarily load the same CSS, JS files on the homepage, articles or category pages. Moreover, most of your visitors will first arrive on an article via Google, RS or another site. It is therefore important to test at least the article pages (perhaps including different types of content) and the homepage to get a good idea of the quality of a theme.

Comparison of fastest WordPress themes

So after going through a lot of “the X fastest WordPress themes in 2020” articles, here are the WordPress themes that stood out the most and that I selected for my own test.

Note: If you think you know some fast WP themes you would like me to test, feel free to share them with me in the comment section below. I can check quite quickly if it would be worth adding them to this comparison.

WordPress Theme Comparison Approach

My comparison method is quite simple. I simply ran a new WordPress installation on my development VPS with WP 5.4.1, PHP 7.4 and HTTPS. I preinstalled all the themes I wanted to test without any plugin. Then I imported the unit test data from WordPress (data created especially to test WP themes) to have test content on the site (menu, articles, categories, testing of all features). I simply set the home page to display the 10 most recent posts with the featured image and the excerpt (if defined).

Then I decided to test 2 pages:

  • The simple home page with the title, a menu, the 10 most recent articles and the footer.

    wp fastest theme comparison home page
    Example of what the homepage looks like (the design changes a little depending on the chosen theme but the content remains the same)
  • An article I created with Lorem Ipsum also containing a left floating image with a width defined at 350pxs, a full width centered image, a right floating image with a width defined at 350pxs and a full size unaligned image. The idea is to see how the themes handle images with a layout that we see in many blog posts.

    fastest wp themes comparison blog posts
    here is what the blog posts looks like

Test results of the fastest WP themes

So I compiled results for all the criteria explained above by testing the homepage and the blog post for each of these themes

Results for the home page

 

ThemeCSS SizeJS SizeDOM ComplexityDOM ManipulationsCSS Complexity
Genesis Mai Reach120kb10.7kbA (254)A (35)A (981)
Genesis Monochrome116kb139kbA (262)A (307-309)B (1610)
GeneratePress88.3kb22.3kbA (381)A (573)A (975)
Astra142kb26.2kbA (334)A (626-634)B (1546)
Neve99.6kb21.5kbA (400)A (435)A (1113)
OceanWP282kb272kbA (543)E (2198)D (3590)
Blocksy208kb50.3kbA (372)A (370)C (2019)
Suki109kb25.9kbA (367)A (519)A (1047)
Kadence125kb41.2kbA (500)A (675)B (1258)

 

Themeresponsive imagesPSI speed index mobilePSI speed index desktopMobile First
Genesis Mai Reachyes2.7s0.9sYes
Genesis Monochromepartially3.6s1sNo
GeneratePresspartially2s0.6sNo
Astrapartially2.5s0.6sNo
Nevepartially1.9s0.5sYes
OceanWPpartially4.9s1.2sNo
Blocksypartially2.8s0.8sNo
Sukipartially2s0.6sYes
Kadencepartially2.4s0.7sNo

Results for the blog post

 

ThemeCSS SizeJS SizeDOM ComplexityDOM ManipulationsCSS Complexity
Genesis Mai Reach120kb13.4kbA (143)A (48)A (981)
Genesis Monochrome116kb142kbA (158)A (240-242)B (1606)
GeneratePress88.3kb25kbA (174)A (308)A (975)
Astra142kb28.9kbA (193)A (353-361)B (1546)
Neve99.6kb24.2kbA (283)A (328)A (1113)
OceanWp282kb274kbA (357)D (1528)D (3590)
Blocksy208kb53kbA (274)A (301)C (2041)
Suki109kb28.6kbA (220)A (343)A (1047)
Kadence130kb43.9kbA (238)A (284)B (1322)

 

 

Themeresponsive imagesPSI speed index mobilePSI speed index desktopMobile First
Genesis Mai ReachYes3.1s1.2sYes
Genesis Monochromepartially4.5s1sNo
GeneratePresspartially1.8s0.5sNo
Astrapartially2.3s0.6sNo
Nevepartially1.8s0.5sYes
OceanWppartially4.6s1.2sNo
Blocksypartially2.6s0.8sNo
Sukipartially1.9s0.5sYes
Kadencepartially2.5s0.7sNo

 

Ranking of the Fastest WordPress Themes

Here is the ranking of the WP themes I tested:

1: The Neve Theme from Theme Isle

theme wordpress neveThe Neve theme ticks all the boxes when it comes to loading speed. It is super lightweight with CSS under 100kb and especially the one of the smallest JS < 25kb. The secret to having such light JS is that Neve doesn’t use JQuery (which is still used by most WordPress sites unfortunately) but only Vanilla JS (or in other words pure JavaScript). It also uses the “Mobile First” approach which is an advantage over other themes as I explained above.

In terms of features, one thing that also impressed me is all the things that are already available in its free version. The Neve theme gives access to a part of its template library for free! In case you didn’t know a template is a pre built site with the editor of your choice (Gutenberg or a page builder… but if you want a really fast site, I don’t recommend page builders) and plugins. You can simply import a template and hop, in 2 minutes you already have a jump start for your site. They also develop their own plugins to add features to Gutenberg.

Note: If you import templates, it will import additional CSS and JS depending on the design and plugins that the template will install. This will obviously have an impact on the loading speed of your site.

Finally, Neve is also the theme compared here that offers the cheapest “lifetime” plan (189€). Frankly if you are not a developer and you want a solid base to have a fast website, you are unlikely to make a mistake with Neve.

Check out the Neve WordPress theme

 

2: The GeneratePress theme

generatepress wp themeGeneratePress is about as light and fast as Neve according to my tests. It has exactly the same philosophy by avoiding using JQuery for simple Vanilla JS which is much lighter and faster. The only small difference is that from what I could see, this theme is not completely “Mobile first”. But frankly between those two there is not a big difference.

In terms of features, the developer in me really appreciates the modular side of this theme. You can activate only what you use, which makes the theme as light as you need it to be. The documentation seems quite extensive and especially the support is very responsive (almost all reviews of this theme mention the quality of the support, which is very important). They also have a large library of templates (available in premium only), focus on Gutenberg with a very good integration via the GenerateBlock plugin (even if they also work with the page builder)… In short, only positive things!

Regarding price, they don’t have a “lifetime” offer (which I totally understand) but it’s still really affordable at 49$ for the 1st year and then 40% off for renewal (30 days satisfied or refunded). Frankly, the choice is hard with Neve but I would say that the developer in me would rather choose GeneratePress for the documentation and support (and also because they’re betting on Gutenberg which is the future of WordPress).

See the GeneratePress WordPress theme

 

3: The Suki WP theme

suki WordPress themeLess known and popular than the first 2 themes mentioned, Suki is nevertheless a very fast WordPress theme. It has exactly the same philosophy as Neve and GeneratePress by replacing JQuery with Vanilla JS. It is also modular and almost “Mobile First”.

Regarding features, Suki is very flexible in terms of design and is well compatible with Gutenberg (or with the main page builders). On the other hand, because of its younger age, it has a smaller template library and its documentation is not very complete.

Regarding prices, here again it’s quite correct from 59$/year with 20% discount after the 1st year. They also have a “lifetime” offer which is rather interesting. Honestly, if it continues on this path, the Suki theme could compete with the most popular fast WP themes in the coming years.

See the Suki WP theme

 

4: The Kadence WP theme

Kadence wordpress themeThis is the brand new theme of Kadence WP which has exactly the same philosophy as the 3 themes above (no JQuery). However it comes with a bit heavier CSS but also a more refined design on a fresh theme install.

What I liked with Kadence is the modularity (like GeneratePress) and the fact that the theme only loads the scripts of the features you have activated. Moreover in its free version Kadence already comes with a lot of features that are usually premium in other themes (a header builder for example). By simply using the customizer you can already do a lot with this theme.

At the moment Kadence is free but a premium extension is planned very soon. Otherwise like Suki, it has the drawback of his young age: it doesn’t have a template library like Neve or GeneratePress and his documentation is very superficial. But frankly, you don’t have to commit to anything to try it since it’s free for now!

See the Kadence WordPress theme

 

5: The Astra theme from Brainstorm force

theme wordpress astraIt is the only WP theme in history that is not developed by WordPress to reach more than 1 million installations. This theme also has an impressive number of super positive reviews (the others as well but we are talking about several thousands). In terms of speed, Astra has adopted the same strategy as GeneratePress and Neve to know that they do not use JQuery to have light and fast JS. On the other hand on the CSS side, Astra is certainly a little bit heavier and more complex (and not “Mobile First”) which costs a little bit in terms of loading speed.

In terms of features, it’s very solid and that’s certainly why they have so many installations. Like Neve, they give you access to a library of free or paid templates (for Gutenberg, elementor, beaver…) to give you a good base for your website. They also develop their own plugins to add features to Gutenberg, Elementor or beaver builder which allows them to reach more people (even if I recommend you not to use page builder to have a really fast WP site).

On the price side, Astra pro starts at 47$ / year (or 249$ lifetime) which is totally ok frankly. Just like Neve, it’s a product that is really intended for “non-developers” (even if they have a decent documentation for devs), with a lot of features, that will allow you to create a site easily without touching the code. But I still have a small preference for Neve (faster and just as easy to use) and GeneratePress (for its modularity, doc and support).

See the Astra WP theme

 

6) The Genesis framework with child themes Mai Reach (or Mai Success)

Mai reach Genesis wp themeUnlike previous themes, Genesis is actually a framework that works with child themes. This means you will need to have Genesis and the child theme (in this case the Mai Reach or Mai Success theme) installed on your site for everything to work. Do not mix up child themes and the templates described above. Templates simply install plugins, content, images, and settings to give the theme a certain look. A child theme goes further and allows you to precisely customize designs and integrate new features into a theme. Note that it is possible to create child themes for Neve, GeneratePress or Astra.

In terms of features, Genesis is clearly aimed at a different audience than Neve or Astra. With Genesis, you will choose a theme that you like among the many available themes (installation is done in 1 click to import the demo content). The Genesis theme integrates very well with Gutenberg, especially with the arrival of Genesis pro which allows you to do a lot of things yourself. On the other hand, each child theme has been designed with a specific style and functionality (blog, agency, podcast, online courses etc…) and it is harder to get out of this framework without some knowledge of CSS and PHP.

On the speed side, the only flaw of the Genesis framework is that it still uses JQuery (for the menu and 2-3 other little things), which makes its JS heavier and slower compared to the 3 other themes above (see the monochrome theme just below). But fortunately the developers of the Mai child themes (Mike Hemberger and Lee Anthony) have developed a new version of their Mai Engine plugin (which installs automatically with their themes) that removes all dependencies on JQuery even with Genesis installed. The Mai Reach and Mai Success themes have the lightest JS of all the themes tested here. Their Speed Index is not yet as fast as Neve or GeneratePress but it’s very promising (this new version of Mai Engine has just been released). Moreover they are also the only themes that customize srcsets and sizes attributes for a smarter loading of images.

On the price side, Genesis is also more expensive than the others (especially since WPEngine bought the framework). Count between 100$ and 150$ to buy a child theme with the Genesis framework and 360$ per year for Genesis pro with access to all child themes. So I would say that Genesis is more for developers who build sites for customers. Genesis is solid, regularly updated, is much better documented than the other themes mentioned above, has a big community of developers helping each other (with among others very respected guys in the WP community like Bill Erickson) . In short, it’s targeted towards the more tech-savvy among you.

See the Mai Reach Genesis child theme

See the Mai Success Genesis child theme

 

7) The Blocksy WP theme from creative themes

blocksy wp themeWell ok it’s not the fastest theme tested here but it still has a lot of good things (no JQuery, a lot of features, quality code)… especially since it’s the only theme completely FREE in this list (yes yes there are really developers who still do all this for fun!). In terms of speed it’s ok even if the CSS of the theme is a bit heavy for my taste right after installation. I’d rather have lighter CSS and be able to add elements afterwards according to my needs.

This theme has a lot of customization options directly from the Customizer and is 100% Gutenberg compatible. There are also several free templates available to help you get started with your site. Basically, it doesn’t have much to be jealous of the above themes in terms of features except that Blocksy is free! No wonder it has over 200 5-star reviews with no negative reviews in the WordPress theme library! Not bad!

See the Blocksy WordPress theme

 

8) The Genesis framework and the child themeMonochrome pro

Monochrome pro is a classic example of a child theme for the Genesis framework developed by StudioPress (the developers of the framework) which thus integrates JQuery. So even if the theme is quite fast, I integrated it in the comparison to show you the significant difference in performance of a theme that comes with JQuery. The JS is immediately heavier and the speed indexes are higher. Most Genesis child themes (with the exception of the Mai themes) will have similar performance.

See all Genesis child themes

9) The Ocean WP theme

Well I won’t spend too much time on Ocean WP because the tests speak for themselves and this theme is much slower and heavier than the others tested (even if it remains relative and it is faster than many other WP themes). It is especially known to be super compatible with the Elementor page builder. But, as I don’t recommend you to use page builder, especially with Gutenberg which is getting better and better, I won’t recommend this theme which is clearly not as performant as the others presented above.

Additional infos about responsive images

You will have noticed that in the comparison tables, I note that the implementation of responsive images is partial. This means that these themes do include the srcset and size attributes in the img tags but they just leave the default WordPress settings which are far from ideal (I explain why in this article).

On the one hand the fact that themes like Neve, GeneratePress, Astra or a framework like Genesis don’t customize these attributes is quite normal since they don’t know in advance which design the user will choose and how the images will be displayed depending on the screen size. On the other hand, the child themes of these themes should clearly customize these attributes (as Mai Reach and Mai Success do) to not display images that are too heavy (as you can’t modify these attributes with CSS, templates can’t change them unlike child themes).

 

I think I’ve gone through what you need to know to choose a fast WordPress theme (while pointing you towards a few quality themes). As I was saying, for the moment I haven’t found an existing theme that would integrate all these points perfectly (feel free to leave me your suggestions in the comment section if you know a super fast theme). In fact, I’m thinking about maybe creating a quick and versatile theme myself that would implement all these things.

And as usual, don’t hesitate to ask me all your questions in the comments below.

 

Note: This article contains some affiliate links for these themes that I tested. If you buy a theme through our links, you won’t pay a penny more but we will get a small commission. This way, you will support us in the creation of this kind of free and independent guides. Thank you very much for your support!

Benoit Luisier

Self taught web developer and a travel addict , I share on Novo-Media my tips about the more "techy" part of topics like web development, Wordpress, Web optimisation or SEO. I'm also the creator of the google maps Wordpress plugin Novo-Map

Newsletter: Our latest posts in your inbox

Join the community now and get all our articles straight to your inbox! 0% Spam Guaranteed !

Reader Interactions

Leave a Reply

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


Protected by reCAPTCHA / Privacy Policy - Terms of Service