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. 

Here’s why: 

I had already designed the RankHox website using Elementor. The performance was fine but some issues needed to be fixed. 

While I was busy fixing those issues, my friend Swadhin Agrawal shared this article by WP Rocket. In that article, they talked about how they designed their entire website using Gutenberg. 

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: 

  • Oxygen Builder has a steep learning curve and I didn’t want to spend my time learning and getting used to the builder. I wanted to design and launch RankHox as fast as possible. 
  • I was very curious about designing a website using Gutenberg and how it will affect the performance of the website. 

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. 

Prerequisites 

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: 

Designing Using Gutenberg

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. 

RankHox - Custom Blog Post Layout

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: 

RankHox - Figma Prototypes

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. 

Gutenberg Blocks Design

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: 

  • I’ve used the Astra theme long before on my personal blog and had a great experience. It’s lightweight and super fast. 
  • The theme offers extensive customization in its free plan. But eventually, I ended up using the Astra Pro plugin as well. 
  • The theme provides its own Custom Fonts plugin which works seamlessly. I tried using this plugin with other themes like GeneratePress but it didn’t seem to work. 

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 

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: 

  • Advanced Heading 
  • Icon List 
  • Advanced Buttons
  • Spacer/Divider

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. 

Kadence Block Controls

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: 

  • Blockquote
  • Table of Contents
  • Inline Notice

Here’s the third plugin I had to install for my whole Elementor to Gutenberg transformation. 

PostX

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. 

PostX - Posts Block

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. 

Block Patterns 

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. 

Block Manager

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. 

Gutenberg Block Manager Plugin

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: 

RankHox PageSpeed Desktop Stats - Pre Optimization

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: 

RankHox PageSpeed Desktop Stats - Post Optimization

The Mobile performance is just as good as the Desktop performance:

RankHox PageSpeed Mobile Stats - Post Optimization

And here are the GTMetrix stats: 

RankHox GTMetrix Stats - Post Optimization

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: 

Gutenberg Mobile Editing - Broken 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. 

Responsively App - RankHox

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. 

Even some of my friends in the blogging community have their own add-ons such as Ultimate Blocks and Affiliate Booster

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!

Conclusion

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.

4 thoughts on “How Designing A Website Using Gutenberg Improves Performance”

  1. Hi bro,

    Many congratulations on the new website. It’s sleek as well as modern and stylish!

    I am so glad you like the experience of Gutenberg. My site also is completely devoid of page builders and I recently switched all in to Gutenberg and some custom coding.

    I am using GenerateBlocks by GeneratePress and they are working fine.

    I loved how your whole site is synced in terms of design and layout… something I need to work on!

    All the best for this new venture.. waiting to see awesome posts like you publish every time!

    -Swadhin

    1. Thanks a lot, Swadhin! I wouldn’t have made the switch to Gutenberg if you hadn’t shared the WP rocket article with me. I also checked your website and it looks so good. The performance is great as well.

  2. It’s an awesome experience to read this article and a walk-through. Thanks a ton for sharing your experiences. The site is now carrying a great UX and speed stats are amazing.

    I read the complete article and from a user per se, suggest considering the following:

    1. Lead us to some CTA for Oxgen Builder and other plugins mentioned
    2. Share the list of Plugins & Theme(s) that are part of this website in one picture or list
    3. If you can spend some time, we need a small tutorial video showing page/post/block designs
    4. if not 3, you can embed a video or a link to understand designing blocks, CTAs, TOC using Gutenberg and plugins.

    1. I’m glad you liked it!

      I will be doing a more comprehensive tutorial guide sharing more details. I just wanted to share this as a case study of how the process went by.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.