See my deep case study results on three identical sites created with themes from Astra, Genesis, and Divi.
You’ll discover which theme is fastest on perceived speed as well as full load.
Big Thank You
I want to send a huge shout out and thank you to Michelle Phillips of Codefetti for taking on the task of creating all three of the themes used in these tests.
It was no small feat to make all of them as close to the same as possible for these tests.
That speaks volumes about Michelle’s years of experience as a pro designer and all of the theme frameworks she has worked with over the years.
More Resources from Michelle
Be sure to see the live chats I had with Michelle below to help you get started on the right foot with your theme design.
And see Michelle’s awesome Astra tutorial series too.
About the Tests
I’ve been running deep case studies for several years now. And I have hundreds of site audit clients with all manner of variety in both themes and plugins. Plus, I work behind the scenes with plugin and theme developers, as well as hosts to help them make the best wares possible for us.
All that to say – I know my testing methods are top-notch and accurate because I have to deliver results for my clients. That includes accurately identifying what is slowing down the site and what will fix it.
If you would like to replicate my tests, you’ll find a brief on my baseline setup and testing methods listed below.
If you would like to see the full case study results and learn how to do deep testing and site audits like I do, you can!!! In my Webmaster Training you’ll learn how to fully secure a site and make it fast! You’ll also get access to the full case studies.
Testing Conditions
Below is a brief of the testing conditions I used.
Gutenberg
To keep the tests fair, Gutenberg was used to build all content wherever possible.
Themes Tested
- Astra
- Genesis
- Divi
Test Conditions
Hosting
- Litespeed server
- Shared hosting on NameHero
- PHP 7.3
- No Cloudflare
- No caching / optimization plugin
Post
- Standard Post page with
- 1 large image
- Share buttons at the top
- Sidebar widgets
- Search
- Recent posts – text list
- Recent posts – 4 images
- Popular posts – 2 images
- Footer widgets
- Bio
- Recent posts – 3 images
- Social follow icons
Plugins
The point of this case study is to test the theme, so the only plugins used were to keep styling the same between all themes and/or to bring theme attributes to the fore as needed to give an accurate assessment of extra fonts and styling they would apply to those functions.
Plugins for Astra Site:
- Astra Pro
- Simple Social Icons
- Ultimate Addons for Gutenberg
- WPForms Lite
Plugins for Genesis:
- Genesis Simple Share
- Simple Social Icons
Plugins for Divi:
- Simple Social Icons
- Ultimate Addons for Gutenberg
- WP Forms Lite
Testing Process
Both a blog post and the home page of each site were tested, as those will each bring different theme aspects into play.
Testers used:
- WebPage Test in desktop mode – as it yields more content loaded and gives in-depth data on specific requests and metrics
- Google PageSpeed Insights in mobile mode – as it yields more Lighthouse test results
Tester and Data Tutorials
See the following posts for a primer on how to run accurate tests and interpret the data.
- How to Run a Site Speed Test Accurately
- Online Speed Testers: How to Read the Metrics
- Google Core web Vitals: What you Need to Know and Do
Image of Test Post and Home Page
Below are screenshots of the post and home page from the Astra theme.
The other two themes were made to look exactly like those shown here.
Post
Home
Blog Post Results
Following are the result graphs for tests run on the blog post, with a brief explanation of what each metric is. A summary of the overall winner is also listed.
WebPage Test
On all results below, lower is better unless otherwise noted.
First Byte – time to the first content fully delivered from host.
Start Render – time to first content visibly available.
FCP – First Contentful Paint – time to the first visible content complete.
Speed Index – calculation of average time for visible display.
LPH – Last Painted Hero – time to complete the largest visible element load.
LCP – Largest Contentful Paint – when the main content has completed its load.
CLS – Cumulative Layout Shift – when the visible content becomes stable.
TBT – Total Blocking Time – delay between when content becomes visible and when it becomes interactive.
Onload Time – time of full content load to the on_load point, or above-the-fold
Onload Requests – number of requests to the on_load point
Onload Bytes – overall weight of the requests to the on_load point
Full Load Time – time of full content load to the end of the page
Full Load Requests – number of requests for the entire load
Full Load Bytes – overall weight of the requests to the end of the page
Winner
For perceived speed – Genesis by a nose, Astra a close 2nd
For overall speed – Astra by a nose, Genesis a close 2nd
Google PageSpeed Insights
Following are the result graphs for tests run on the blog post, with a brief explanation of what each metric is. A summary of the overall winner is also listed.
Score – composite score of all metrics
Square – the first recorded capture of visual content appearing
FCP – First Contentful Paint – time to the first visible content complete.
SI – Speed Index – calculation of average time for visible display.
LCP – Largest Contentful Paint – when the main content has completed its load.
TI – Time to Interactive – delay between when content becomes visible and when it becomes interactive.
TBT – Total Blocking Time – delay between when content becomes visible and when it becomes interactive, similar to TI but calculated differently.
CLS – Cumulative Layout Shift – when the visible content becomes stable.
Render Blocking – how many render-blocking-above-the-fold requests are present.
Unused JS – how much JavaScript is loaded that is not actually necessary for the page to render.
Winner
For perceived speed – Genesis
For overall speed – Genesis, with Astra a close 2nd
Home Page Results
Following are the result graphs for tests run on the home page.
WebPage Test
See notes above for the meaning of each metric.
A summary of the overall winner is also listed.
On all results below, lower is better unless otherwise noted.
Winner
For perceived speed – Genesis
For overall speed – Genesis
Google PageSpeed Insights
See notes above for the meaning of each metric.
A summary of the overall winner is also listed.
Winner
For perceived speed – Genesis
For overall speed – Genesis
Best Theme For You
Here are a few of my recommendations for choosing the best theme for your needs.
Don’t Use Divi
I think it’s pretty clear that Astra and Genesis radically outperform Divi for speed.
On top of that, Michelle Phillips, the designer who created all of these themes said that it was a bear to work with Gutenberg on Divi.
And you’ll be sorry later if you start with Divi because it relies so heavily on shortcodes. They are a major pain and time-suck to remove too.
Gutenberg
The future of WordPress is Gutenberg.
As of 2018 it has been the default editor.
As of 2021, when Gutenberg Phase 2 is complete, it will also be a full theme builder.
Your best bet is to jump on the Gutenberg bandwagon.
Once you see the power of Gutenberg, you’ll be hooked.
You’ll have zero need for a page builder like Elementor. I have yet to see anything created with a page builder that Gutenberg can’t do.
And learning Gutenberg will completely change your mind about which base theme to start with.
Gutenberg Ninja is THE premier course for you to take.
It is updated constantly and full of real-world tutorials. In fact, you learn the editor as you create content.
Astra vs Genesis
Be sure to see the first chat I had with Michelle for deeper insight into which of these themes is the best base for you to use based on your needs and tolerance for change.
But in brief, Genesis is a more mature framework.
They are also more cautious with their Gutenberg integration.
And they have a HUGE community base of groups, designers, and more, should you need help.
The caveat with Genesis has always been that it’s not very end-user friendly with regard to tweaking your styles. It’s likely that even the new Genesis Pro framework, that will integrate with Gutenberg Phase 2 theme builder, you will still likely want to hire a designer to help you.
The other caveat with Genesis is that there is a huge 3rd party child theme group of designers – and they have zero coding standards to adhere to.
Some child themes are bloated messes that will radically slow down your site load time.
Some require that you purchase an extra plugin that must be renewed annually to get all of the features.
So, buyer beware as all Genesis themes are not as fast as the one tested.
Astra is a rising star with over 1 million downloads as of summer 2020. That’s super impressive when you consider that they’ve only been around for about 3 years.
Astra is VERY end-user friendly with regard to customization.
And coupled with Gutenberg, you can create just about any look you want for any page, including the home page – with zero widgets.
That means you don’t need to hire a designer to radically change the structure of your home page layout – or any page layout.
The paid Astro Pro plugin radically expands the theme building capabilities as well and gives you bunches of great features that would normally require a bunch more plugins or a designer’s code to achieve.
The caveat with Astra is that their code is bleeding edge and they are doing their best to not only keep pace with Gutenberg, but outpace it.
So, it may not always be as stable as Genesis.
Bottom Line
To be honest, I don’t have a single money-making site owner client who would even consider designing their own theme.
There’s really no ROI in it compared to spending all of their time focused on what makes them money.
I’m included in that group – and I’m an old coder.
I lay out my content structure in Gutenberg and then turn over the styling and theme speed tweaks to my designer, Marcy Diaz of Amethyst Website Design, who is a Genesis ninja. She chooses the best theme framework base for the project. So far, that’s been Genesis as I need stability above all else.
The allure of building your own theme seems to appeal mostly to new site owners with no budget for design, only sweat equity.
Astra is likely the better framework for that case, and for a higher tolerance of beta-breaks, as the code is constantly being updated with new features.
In any case, starting with Gutenberg will radically cut down on your design costs.
It may be that you will only need a designer for the final tweaks.
In the end, you’ll have a faster theme than if you started with a page builder.
Need More Speed?
Themes are not the only thing that slow down your page load speed.
Resource hog plugins, unoptimized images, and a junky database filled with orphaned tables from plugins you tried and deleted will slow down your site too.
Plus, lack of security allows bad bots to chew up all of your hosting resources that should be reserved for humans, and that will slow down your site as well.
Get a site audit and see ALL of the REAL speed drags on your site so they can be fixed.
Then we add more speed tweaks to take it the rest of the way.
And, gain access to my webmaster designers who know all about speed too.
Hi MaAnna! I was so glad to see the results of the speed tests! Your graphs broke everything down into a clear visual format that makes the results super easy to understand. And as you point out in this post and as we discussed in our live chat, there are pros and cons to any theme chosen.
The speed test results here and feedback from real world experience with these three themes should help people make an informed decision for their next website build. Thanks so much for all the effort you put into bringing these results to us.
Thanks, Michelle!!! I honestly could not have given such an honest opinion about these themes beyond just the data without your help – in both building the test sites and our live chats.
This is a wonderful set of speed tests; I’m really happy to see the results, especially the results for Genesis and Astra. It was interesting to see where one was faster than the other, and how that varied.
I’m so glad you keep us all updated on website speed, MaAnna! And you always present the data in such a clear manner, so we can all understand it.
Michelle did an amazing job building the three sites!
Thanks, Marcy!!! I was delighted to see how well both Genesis and Astra performed and both are super good choices for the base framework.
I’m also delighted to see both keeping pace with Gutenberg, as that is the way forward for us.
As a long-time Genesis user and new Astra user, I was eagerly awaiting MaAnna’s speed test results!
Thank you to all of you for your hard work and generosity in sharing your knowledge. WordPress work is possible for freelancers like me because of community support like yours.
Glad to provide this info, Susan. We need WAY more benchmarks published so folks can make good decisions for their sites!!
THANKS for the testing! I can appreciate how much work goes into doing it well.
I’m a long time Genesis user, operating a couple of site built up from the bare-bone “Sample” theme. They serve us well, and I was pleased to see how well Genesis performs in your tests.
One thing caught my eye… the CLS factor for the Home Page test, using WebPage Test, is way out of line. Don’t know why, but looks like some last-moment content rearranging must be happening for that page. I see something similar with certain pages on one of my sites, and I’m only beginning to investigate. The pages with poor CLS are those that use several image galleries (average 3 images per gallery) that are constructed with the Gutenberg gallery block. Other pages on the site have as many as 19 galleries constructed with the old classic editor and CLS of 0.00 to 0.001. Gutenberg Gallery block? Dunno. Have to construct some test cases.
Thanks again!
I’m glad you found the test results helpful, Bob.
The CLS is THE hardest of all the new Core Web Value issues to nail down. I believe most of them are due to lack of proper image sizes being output as a placeholder until the actual image loads. Most folks are fixing that via the CSS.
There are a few other issues and I’m digging into it with the help of my village of webmasters and site audit clients to gather more info.
I’ll be making a list of them, and fixes, in my webmaster training, but I’m pretty sure I’ll be talking about all CWVs on the blog too for the next year!!!!
Thanks MaAnna. You’re close… but WAIT, there’s more.
So…. I constructed a test case built a blog post. New bare bones site with Genesis and my own version of the Genesis Sample theme. One post is the one shown in the link, built with native Gutenberg. no G’berg addons. The other was built, for identical results, using the Classic Editor plugin. I then used WebPageTest for evaluation.
CLS for the classic version was 0.001. CLS for the Gutenberg version was 0.184. Why?
You were almost right in mentioning image sizing. However, both versions had img elements defined exactly the same, with a ref to the same images and 6 srcset elements of different sizes. Identical size definitions in the img details.
Yet, they behave differently, which can be seen by watching the very helpful videos that WebPageTest creates. Fortunately, the first gallery was between the 1st and 2nd paragraphs above the fold and could be seen in those little videos. In the Classic version, the paragraphs appeared early with space reserved between them, and the images filled in later. In the Gutenberg version, both paragraphs were painted early with NO SPACE reserved between them. After the images load, the paragraphs were separated by painting the images. Thus the CLS!
How’d this happen? SMOP!
The Classic version encodes the images with the parameter loading=”lazy” and that appears to be the cause of the reserved space.
The Gutenberg version has no loading parameter, but uses a rather robust CSS file instead (…block-library/style.min.css). In that file the 259 (Yes, 259) “block-gallery” css defintions manipulate the images using flexbox directives.
So yes, Gutenberg is the root cause of higher CLS for gallery blocks.
It really doesn’t matter for this hobbiest post, but I’ll be cautious with galleries, and Gutenberg, for sites where CLS really matters.
Thanks for the extensive test on the images, Bob. I don’t have many folks using Galleries, so never thought to test that, as I was just wanting to keep it simple. But sure is good to know.
(FYI, I removed the link to your test post, as it may or may not stay there, but had a look.)
Just curious why you didn’t load Ultimate Addons for Gutenberg on the Genesis site. Doesn’t Genesis rely on Gutenberg as well?
All of the sites had content created by Gutenberg blocks.
But, the Astra site required more styling to make them all look the same, and we used the UAG plugin to do that, as it added zero weight.
The Genesis theme already had that block styling in its CSS, so no need for extra plugin with more styling options.
Thanks for the explanation, that makes sense.
I came across this post, good job with the testing, very useful. I’m curious if it wouldn’t also be helpful to test with some basic optimizations, such as caching plugins.
It seems possible that some themes will benefit more than others and thus level the results somewhat. For example, what if Divi benefits a lot from a caching plugin, much more so than the Astra or Genesis. In such a real world case, since most people use a caching plugin, the differences might possibly be much smaller.
I’ve never tested, so I’m not making any claims, just saying it would be interesting to see.
I have several site audit clients who were using Divi and I can guarantee that there is nothing on the planet that can speed it up enough to even where Astra starts. It’s WAY worse than even Elementor or other page builders. And it is a BEAR to come out of. Worst theme mistake any site owner can make.