How Designing A Website Using Gutenberg Improves Performance
By: Ahfaz Ahmed
I’ve been designing websites for over 5 years now. I design websites for myself and I design websites for clients.
And I always use the Elementor page builder for this. It’s my favorite page builder and makes web design in WordPress fast and simple.
But recently, I’ve been concerned about Elementor and how much of a performance hog it is. No matter how well you optimize your website, pages designed using Elementor are still somewhat slow and full of bloat.
With Google’s Core Web Vitals, this concern became even more serious. So serious that I delayed the launch of this blog for over a month.
I had already designed the RankHox website using Elementor. The performance was fine but some issues needed to be fixed.
I was intrigued by it. Before reading that article, I checked their newly designed website weeks ago. It was beautiful.
To find that it was designed entirely using Gutenberg piqued my interest. I wanted to learn more. And as I learned more, I decided that I will redesign RankHox using Gutenberg entirely.
In this article, I’ll be sharing the complete story of how I did it and how you can design your website using Gutenberg as well.
Before that, let’s first talk about the problems with page builders.
Problems With Using Page Builders For Building Websites
Page builders are awesome. Whether it’s Divi, Elementor, or Brizy, these page builders can help you design pretty awesome websites.
But there is one problem which is perhaps the biggest problem with page builders:
Page builders add too much bloat to your pages. This negatively affects the performance. This bloat is hard to remove.
Even with speed optimization plugins like WP Rocket or Autoptimize, you cannot remove this bloat fully.
Now, I’m not a page optimization freak who wants to hit a score of 99/100 on different page speed tools.
But I am concerned about how performance affects UX and SEO. That’s why Google’s Core Web Vitals are so important.
A lot of people see them as performance indicators but here’s how I view them:
They are indicators of how good your website’s UX is. Metrics like CLS and LCP although related to performance, really indicate how good or bad a website’s UX is.
And with page builders, you can sometimes not pass the Core Web Vitals requirements. If you have a very simple design with only a few elements on the page, then sure, you might pass the Core Web Vitals test.
But if a website is heavy, especially a WooCommerce site, then you might run into performance issues.
Now, not all page builders are like this. Oxygen Builder is a very fast and powerful page builder that doesn’t add any bloat to your pages.
For example, a button element in Oxygen Builder only adds a single line of code whereas, in Elementor, it adds several lines of code.
This is one of many examples of how page builders, especially Elementor in my case, were a problem.
I wanted to break away from this bloat cage. I thought about choosing Oxygen Builder for designing RankHox but eventually decided not to because of the following reasons:
That being said, I finally decided it’s time to design my website using Gutenberg. And that’s where my challenge began.
Designing A Website Using Gutenberg
I had to spend a lot of time researching how I could design my pages using Gutenberg. Page building using Gutenberg is still growing and there aren’t a lot of resources for this.
Thankfully, I knew my needs which helped me make this process a bit simpler.
Before getting started, I made sure I know what I need. For this, I made a list of requirements. In particular, I made a list of elements I’d be using on my pages and blog posts.
Here’s what this list looked like:
I also wanted these elements to look and feel like my design. I wanted to customize them according to my needs.
Besides that, I wanted to build the website’s header and footer the way I want. Fortunately, for this website, my design wasn’t too fancy or complex.
I wanted simple headers and footers which could be made using any WordPress theme.
Moving on, I wanted a custom layout for my blog posts. This was more than just having custom elements in the article which I knew could be added using various blocks.
This was more about replacing the default layout or template of the theme and creating a new hero section for the articles.
Lastly, I wanted to make sure the website I design looks good on mobile devices. I’ve been using Gutenberg for a while now so I was aware they have responsive editing.
But I was skeptical about how good it will be when designing pages.
With all these requirements in place, I moved on to the next phase.
My Design Approach
As a web designer, I never jump directly into designing the website live. I first design a prototype which helps me finalize the layout and look of the pages.
So, I designed prototypes of my important pages on Figma. I designed a prototype for the homepage, blog page, single post page, and the about page.
I feel it’s important to mention here that I had already designed prototypes of the website when the website was initially built using Elementor.
But this time around, I decided to make a few tweaks to the design and improve it a bit more.
These are the prototypes I designed on Figma:
Apart from the prototype, I also designed a few important elements that would be used in the articles. This included the Table of Contents, Pros & Cons box, and the Note element.
After designing all this in Figma, I was fairly confident that I would be able to design these prototypes in Gutenberg easily.
The next step for me was to find the right tools for the job.
Theme & Plugins I Used
Let’s first talk about the theme I used. Then we’ll get into the nitty-gritty details of the different plugins.
I chose the Astra theme by Brainstorm Force for the website. Here are some reasons why:
From all the themes I tested, Astra proved to be the best one. If you’re wondering which other themes I tried, here are their names along with why I didn’t end up choosing them:
GeneratePress: I’m already using this theme on some of my blogs and I love it. But for this kind of website, the theme lacked some of the customization options I wanted. Moreover, adding custom local fonts in GeneratePress isn’t very straightforward.
Kadence Theme: I was excited to use this theme because I was already using their blocks plugin on the website. But again, for using custom fonts, you’d have to purchase their membership plan which costs a whopping $169/year. I ain’t dropping that amount of dough for something that I could do for free using the Astra theme.
Blocksy: I heard good things about this theme so I decided to give it a shot. Although I liked the theme, I was running into some bugs and issues while designing my pages.
The above 3 themes are very good but for my use case, it didn’t work well and win against the Astra Theme.
So, now let’s talk about the blocks. Just like themes, I tried and tested various Gutenberg block plugins. Currently, I’m using 5 Gutenberg plugins on RankHox. I know that’s a lot of plugins but each one serves its own purpose.
Here are the plugins I used to design this website:
Kadence Blocks is the backbone of this website and the plugin that helped me design all the pages.
It comes with a Row block that lets you design create sections as you would do in Elementor or any other page builder.
Besides the Row block, it comes with many other useful blocks but I only use a handful of them. Here are the blocks in Kadence Blocks that I use extensively:
As you can tell from the above list, I’m not using a lot of blocks. That’s because I use Kadence Blocks mainly for its Row block that lets me create beautiful sections.
For more advanced elements, I use other Gutenberg block plugins which I’ll get into in a minute. But first, I want to talk about why I chose Kadence blocks.
Many block plugins come with a Row block. But I loved Kadence because of its simplicity and customization options.
First of all, I was able to set Global Colors in Kadence blocks. This saved a lot of time and helped me work more efficiently.
Moreover, Kadence also allows you to set default settings for each block. So, you won’t have to apply the same setting to a block again and again.
When it comes to customization options, no other block plugin even came close. From typography to color customization, Kadence comes with lots of options and settings that too in the free version.
Ultimate Addons for Gutenberg
While Kadence Blocks helped me create beautiful sections, it lacked some elements such as the inline notice element, blockquote element, and a few other elements.
And if they had those elements, I couldn’t customize them the way I wanted. That’s why I decided to choose Ultimate Addons for Gutenberg.
This plugin is also developed by Brainstorm Force, the guys behind the Astra Theme. So, I knew I was in safe hands as their team works very hard in keeping up with the competition and introducing new features.
I was using the following blocks from Ultimate Addons for Gutenberg:
Here’s the third plugin I had to install for my whole Elementor to Gutenberg transformation.
I had to use this plugin out of utter lack of compromise. I’m using this plugin to display the posts on my Blog and Homepage.
But why use a separate plugin when you have a Posts block in both Kadence Blocks and Ultimate Addons?
Good question. Here’s the reason why:
Both the Posts blocks in Kadence and Ultimate Addons don’t have an option to set a border-radius for the featured image.
I know it sounds nitpicking but the whole design aesthetic for RankHox is rounded corners and I couldn’t have my blog post images have no border-radius.
Now, I could’ve added a small CSS to make this change. But my challenge was to completely design this website using Gutenberg and not touch a single line of code.
I wanted to show bloggers how they can design their blogs or websites using Gutenberg and not rely on page builders or writing code.
Plus, I’m sure Kadence or Ultimate Addons will eventually add this option so it’s not a big deal for me. The moment they add this option, I’m uninstalling this plugin.
Since I’m using a custom hero section for my blog posts, I have to add it to every post I write. I could use reusable blocks but I decided this use the Block Patterns plugin.
With this plugin, you can save any block as a pattern and use it anywhere on your website. Just like how you would save a template in a page builder.
I have created a couple of block patterns that I use regularly in my posts.
If you plan to use Gutenberg for designing your website, I would recommend skipping this plugin as reusable blocks can do the same job.
But as of recent, there is a bug in reusable blocks that prevents them from converting it to a regular block. This can be frustrating which is why I installed this plugin.
The last Gutenberg plugin I use is the Block Manager plugin. It allows you to enable or disable any block in Gutenberg.
Gutenberg itself has a block manager functionality but it doesn’t work on a global level. You can only disable or enable blocks for individual pages or posts.
This plugin, on the other hand, disables a block on the global level. I really love this plugin as it helps me clean up my block list and makes it easier to find blocks.
So, these are the 5 block plugins that helped me build this website. I tried several other block plugins but they didn’t work well for me. Some of them lacked customization options while others didn’t have the blocks I wanted.
Overall the 5 block plugins are more than enough for me to operate this blog. My goal going forward is to strip down some of these plugins and use at most 3 block plugins.
Optimizing For Speed
There’s not much I did in terms of speed optimization. Without any caching plugin, the site was already very fast and didn’t have any serious performance issues.
Here are the PageSpeed Insights stats without any caching plugin installed:
With such stats, I knew I could improve the performance a lot by using a caching plugin. I installed WP Rocket as its best WordPress caching plugin.
It can be a little tricky setting up a WordPress caching plugin. Thankfully, Tom from Online Media Masters has a great article on setting up WP Rocket.
I still tweaked some settings as WP Rocket was causing some CLS issues. This was mainly due to the Optimize CSS Delivery that was turned on.
Another helpful tip is to not lazy load your logo as it can also cause CLS issues on your website.
After setting up WP Rocket for caching and EWWW Image Optimizer for optimizing images, the PageSpeed Insights stats looked something like this:
The Mobile performance is just as good as the Desktop performance:
And here are the GTMetrix stats:
These stats are pretty impressive because I’m on shared hosting by VapourHost. Before designing this website using Gutenberg, I assumed the performance gains will be good but I didn’t imagine it to be this fast.
Color me surprised!
There’s A Long Way To Go For Gutenberg
By now, you might also be thinking about using Gutenberg for designing your blog or website. But it’s important for you to know the downsides of using Gutenberg.
Overall, it was a smooth process of designing the website using Gutenberg, I still faced some issues that might make you think again before pulling the plug on page builders.
Editor Lags A Lot
This has been my problem since the inception of Gutenberg and the reason why I was so skeptical about it.
Although I didn’t face any serious lags while designing pages, I did experience noticeable lag when editing my blog posts.
Tasks such as adding a new block almost felt annoying because of the lag. Moreover, even typing in Gutenberg is very slow. It’s a good thing I don’t write articles directly on Gutenberg.
Now, this lag also depends on the device you’re using. I currently use a laptop with 8GB RAM which I think should be sufficient enough for such work.
Still, I face lag when using Gutenberg and many others do as seen from this issue on Github. If you already use Gutenberg, you might get used to it.
But if you’re moving from a very fast and smooth page builder like Elementor, you may not appreciate the choppy experience of Gutenberg.
You can reduce this lag by disabling blocks using the Block Manager plugin but it’s still not perfect at the moment.
Can’t Design Archive Pages
One of the downsides of using Gutenberg is that you can’t design archive pages. That’s because Gutenberg still doesn’t have any full site editing capabilities that many page builders have.
Also, Gutenberg currently doesn’t have dynamic blocks that let you add dynamic content. Blocks such as Page Title, Post Title, Post Meta, etc are still not present in Gutenberg or any Gutenberg addon plugin.
But this is going to change soon as WordPress is working on adding full-site editing to Gutenberg. Based on various demos and examples, it looks very promising and will change the way we use Gutenberg.
For now, you can’t do much with archive and other similar pages using Gutenberg. You can still design them by adding custom CSS to your theme.
Mobile Editing Is A Mess
The biggest problem for me with Gutenberg is the mobile editing. It’s totally a mess right now.
Yes, you can edit your pages for tablet and mobile devices in Gutenberg but it’s a nightmare to do so.
For example, here’s how my Gutenberg editor looks when I switch to the mobile editing view:
As you can see, the interface breaks completely and leaves a disappointing taste. Even if you look past that, there are still many other problems.
In some instances, the changes are not visible in real-time. One example of this is when I tried changing the border of a section for mobile devices but it didn’t reflect the change.
I had to preview the page on mobile to test if the changes are being applied. There were many similar cases where the changes were not being reflected live.
To prevent going back and forth with previewing the pages and making sure the design looks good on all devices, I used the Responsively app.
This helped me a lot in finding out any issues or problems on the website on different devices.
Besides this issue, the mobile editor also lags a lot. So much so that I had to close the other tabs on my browser.
I hope in future updates, WordPress optimizes the mobile editing experience and makes it better.
Is Designing A Website Using Gutenberg Worth It?
Now, the question you might have after reading my experience:
Was it worth it? Is designing a website using Gutenberg worth the time?
Yes, and no.
For me, designing RankHox on Gutenberg was a challenge and something I wanted to experience. As a web designer, I’m always curious and excited to try new tools and approaches for designing websites.
With this experience, I learned a lot about Gutenberg and how one can design their entire website using it.
And my verdict is that if you’re someone who wants all the functionality of advanced page builders like Divi and Elementor, then Gutenberg is not for you.
It’s still not as mature as page builders and there’s a lot of features and functionality missing. RankHox is a very simple website in terms of design. If you want to design really complex and advanced websites, then Gutenberg won’t even come close to any page builder out there.
On the flip side, if you can live with the limitations of Gutenberg and bet it on its future, then you should give it shot and try building your pages using this editor.
Again, you won’t be able to design really advanced stuff, but it’ll still get the job done. You’ll also face a few hiccups here and there while using Gutenberg, but they won’t seem as significant in the longer run.
Because from what I’ve seen, Gutenberg has come far and so has the community around it. There are already so many Gutenberg addons and this number is only going to increase.
As Gutenberg grows and adds new features and functionality, we’ll see even more powerful and advanced addons.
Today it’s mostly block-based addons. Tomorrow, we might see addons that focus on the editor, performance, or design.
There’s one thing I can say confidently and that is:
The future of Gutenberg is bright!
Until then, if you want to get into Gutenberg without truly ditching page builders, then you should look like Oxygen Builder.
It delivers on both fronts: design and performance. To top it off, they natively integrate with Gutenberg so that you can edit your Oxygen Builder sections and elements inside Gutenberg.
This way you get the best of both worlds!
There was a time when I laughed when people said “Gutenberg is going to replace page builders”.
But after going through the experience of designing a website using Gutenberg and learning all about what’s coming in the future, I am sold.
I also think that Gutenberg has the potential to replace page builders. There’s a long way to go but the dedication of the WordPress team and the push from the Gutenberg community leads me to believe that this pipe dream might soon become reality.
Now, I want to hear from you. What do you think about Gutenberg and page builders? Do you think Gutenberg can replace page builders soon?
Comment below your thoughts.