I’m a fan of Genesis Framework, been using it for 3-4 years now. But one of our clients told me to take a look at GeneratePress or Astra. They are great themes and are not as bloated as I might think.
Usually, the themes catered to beginners come with hundreds of options. They are not very lightweight but let’s not assume anything and test.
I’ve bought the licenses for both themes and set up some demo sites. I’ve imported some content from my wife’s fashion blog.
Initial tests
Using GTMetrix, the initial tests look like this:
A WordPress install with GeneratePress Premium has 33 KB and makes 13 requests. The load time is 0.7 seconds (I chose the best time from 3 tests).
A WordPress install with Astra Pro theme has 92 KB and makes 14 requests. The load time is 0.9 seconds (best out of 3 tests).
Both are plain WordPress installs, no plugins, but I did install Gutenberg. I think it’s important to test with Gutenberg activated since it’s going to be part of WordPress.
It looks like GeneratePress doesn’t load jQuery and that’s the reason it has less KB that Astra.
Building a real website
That’s great, but I want to see what’s going on when I try to build a real website.
So I’m going to install more plugins, add images and try to build a masonry style website, just for the sake of it, to have a clear goal.
Also, I will make some small tweaks, like I would when building a real website. That means removing the wp-emoji and wp-embed JS, optimizing images and I’m using the Litespeed Cache plugin to optimize CSS and JS and to set up
Customize
Let’s start customizing, doing the exact same changes on both sites:
- setup a logo and site icon
- setup the layout
- setup the colors
I like the simplicity of working in the WordPress Customizer. It’s a great direction where WordPress and the WordPress themes are going, but it’s not 100% for me.
I like to set up some things in the Customizer. But to design every aspect of the website there – too many mouse clicks, I can feel the Carpal Tunnel Syndrome kicking in.
It feels redundant, I have to set the same color in 3 or 4 different places – the main menu, the sticky menu, the mobile menu.
It’s the same menu, why so many clicks to set one color?
I would be more comfortable in a text editor ( I use Atom) doing a search and replace for the HEX color code. But this proves that the themes, both Astra and GeneratePress, are not made for people like me who are comfortable in a text editor and know what HEX is.
Single post
They are made for people who want to build a website very easy, just by clicking around and setting options.
And with this premise in mind, I think that Astra is better because I failed to accomplish what I wanted with GeneratePress.
The thing missing from GeneratePress is the possibility to customize the single post content width. You have to add custom CSS to get it the way you want.
This image below is how I wanted to look. Astra gets it almost right. I wanted a 700px width and there’s a limit in Astra to 768px – but it’s ok.
In GeneratePress, on the other hand, the single post looks like the image below. The content spans to the full width of the container. You can’t set it in the Customizer, you have to add custom CSS.
Also, Astra has better styling for the navigation as well as the single post navigation, its default styles are good enough for me. In GeneratePress I would need to add more CSS to style it the way I want.
So, if the goal is to build a website without touching code, GeneratePress fails there.
Astra also has better styling for the navigation as well as the single post navigation, its default styles are good enough for me. In GeneratePress I would need to add more CSS to style it.
Overall, both are nice themes, great for beginners starting out with WordPress.
Conclusion
From a user experience perspective, I am slightly inclined towards Astra Pro. It felt like less work for me to get it to look like I intended. It has more options and more fine controls, like spacing & custom widths.
The masonry effect is better in GeneratePress though. It changes from 3 columns to 2 then to 1 as the viewport becomes smaller. In Astra, it changes from 3 columns directly to 1 column. Minor detail, but when you want your website to be pixel-perfect it matters.
From a performance perspective, GeneratePress seems better, it has smaller CSS and JS files and makes fewer requests.
One thing that I don’t know how to evaluate is all that inline CSS that both themes generate, Astra more than GeneratePress.
How much inline CSS is too much? If you have data about how this might impact speed, let me know in the comments section.
I can’t see a clear winner, the results are conflicting. Sometimes Astra is faster than GeneratePress, sometimes is the other way around.
The loading speed is pretty much the same for both test sites, around 1.1 seconds.
I’ve tested with GTMetrix, Pingdom Tools and the Chrome DevTools (cache disabled) with both demo websites on the same shared hosting account.
What do you think? What theme do you prefer?
Leave a Reply