WordPress caching plugin publisher WP Rocket redesigned their site with Gutenberg and improved site performance. They found that Gutenberg writes surprisingly light code but shared that there are a few things to watch out for.
Screenshot of PageSpeed Insights Score
Editing in Gutenberg is Easier
The goal for Gutenberg has consistently been to create an editing interface that will make it easy for publishers of all skill levels to publish websites.
Creating an intuitive interface lowers the barrier to entry, empowers almost anyone to easily create a web presence and best of all, it helps content creators stay focused on creating content instead of curating and worrying about code.
According to the official WordPress Gutenberg page:
“Without being an expert developer, you can build your own custom posts and pages.”
The WordPress developer page outlines the Gutenberg vision like this:
“Gutenberg reshapes the editor into a tool that allows users to write rich posts and build beautiful layouts in a few clicks — no technical knowledge needed. WordPress will become a powerful and flexible content tool that’s accessible to all.”
The editor uses a concept called “blocks” that can be arranged to form a custom layout.
This focus on making it easy for anyone to focus on content explains why the marketing team at WP Rocket instantly appreciated the new interface.
According to WP Rocket:
“Switching from the Classic Editor to Gutenberg has been effortless for the marketing team. What’s more, we started to enjoy some features that make our job easier and faster.”
Screenshot PageSpeed Insight Score of Home Page
Building With Gutenberg Improved Performance
WP Rocket reports that building a site with Gutenberg resulted in a faster and better performing website.
There were two reasons for why the pages WP Rocket built with Gutenberg performed exceptionally:
- Lighter HTML (built-in to Gutenberg)
- On-Demand CSS and JavaScript (not a Gutenberg feature)
Lighter HTML code is an out of the box feature for Gutenberg.
On the down side, the loading of unnecessary CSS is also a baked-in feature of Gutenberg. Because of that, WP Rocket created a workaround in order to automate on-demand CSS.
Gutenberg is designed to load all CSS that is necessary for every style block. So the first challenge was to create a way to load JavaScript and CSS automatically and only when needed.
Gutenberg is Surprisingly Robust
Frankly, I was a little astonished that WP Rocket went all-in on Gutenberg. The reason for my astonishment was because Gutenberg is not entirely finished.
The full site editing experience is not due to roll out until June 2021. Yet WP Rocket found that redesigning their entire website with Gutenberg was the right choice.
I asked the WP Rocket Team to share their experience.
Interview with WP Rocket
Did the development team face challenges and have to come up with workarounds to deal with them?
“Yes!
First off, we had zero development experience with Gutenberg custom blocks, and everything we read on the topic was very discouraging at first.
Needless to say, the learning curve was quite steep.
For specifics: as a caching plugin, one of our major development concerns was the need for performance. In that regard, a drawback exists with Gutenberg: the default style sheet contains all the native blocks’ CSS.
This was an issue since unused CSS is loaded on all pages (and this does not follow the “Removing unused CSS resources” PageSpeed Insights recommendation).
In our case, we deprecated several blocks that were not used. We created a custom enqueue system to have CSS & JS loaded block only when needed. It took us just a few minutes to develop this system.
We also decided not to use the Gutenberg CSS file. Instead, we “migrated” the CSS we actually needed into our own style sheet, into a dedicated CSS file. That did the trick.”
Does Gutenberg feel like it’s complete and ready for production sites?
“Well, we managed to build our site with Gutenberg (bar the header and footer). I think that says something about how Gutenberg has evolved and its readiness.
With the Full Site Editing planned in June 2021, I believe that one will have the ability to edit all elements of a site using Gutenberg blocks.”
Was there a learning curve to using it?
“Absolutely. And I think that will be the case especially for those used to visual page builders.
That said, we were pleasantly surprised by how visual Gutenberg actually is. The back-end gives a great preview of the front-end meaning that even for non-techie people -like myself – it’s easy to make some changes to a page or build new pages from scratch.”
With the knowledge now gained from your experience, what advice do you have for those contemplating a switch to Gutenberg?
“Go for it!
Our two main takeaways were the following:
- Start working on your new web design with Gutenberg in mind. It will save you a lot of time, and you’ll end up being more efficient. (This is not something we did because we started the design without having made up our mind about the editor…)
- Carefully consider how many blocks you need according to your business. Think about whether or not they all have to be custom. Blocks make a real difference when using Gutenberg. (We came up with over 20 custom blocks which is far from the average. You might just need a couple).
What are the top considerations to think about before switching to Gutenberg?
“Gutenberg is not necessarily for everyone.
If you’re fine with a free theme as it is, then it’s great. You can create all the blocks you want and enjoy Gutenberg.
However, if you want a specific design and specific blocks, you will need a developer to help you with the layout. It probably won’t take you as much time as it took us.
Still, it will make the development of your new website longer and pricier than usual, since you will need some help. You should also be aware of the steep learning curve ahead of you.
That said, Gutenberg is really at the heart of WordPress and, every day, contributors work to improve it.
When choosing another option, you run the risk of it not being updated when WordPress makes a change. Also, it will always be easier to find someone to help you with a WordPress site built with Gutenberg.
We believe that Gutenberg is the future of WordPress, plus it’s free and open-source.”
What kind of publishers should think twice about switching to Gutenberg?
“This is something we mention in our blog post:
If you’re a freelancer or run a small company, you could still be fine with a page builder that doesn’t require any developer help or extra cost.
If you run a bigger company and need a specific development — then yes, Gutenberg is the right solution for you, with no further hesitation.”
Three Possible Inconveniences
As I understand it, there are at least three inconveniences.
- Learning Curve
But that’s part of learning anything new. Nevertheless, because Gutenberg may likely be the future of WP, it may not be a bad thing to create a desktop instance to play around with. - Gutenberg is Incomplete Until June 2021
I believe the navigation menu and widget areas are still under construction for Gutenberg. Full Site Editing is not scheduled for release until June 2021. - Loads All CSS and JS Files
Apparently Gutenberg loads all the style and JS code on every page, including code for blocks that aren’t being used. So that may cause unnecessary bloat.
WordPress Gutenberg is the Future
WP Rocket makes a valid point when they state that Gutenberg is the future. The goal is to allow publishers to focus less on the code and more on the content. Gutenberg full site editing is currently scheduled to debut in June 2021.
Thanks to WP Rocket taking one for the team, we now know that Gutenberg really does have a promising editing user interface and may help to improve site performance.
It may be useful to create a virtual desktop instance and familiarize oneself with creating and publishing a site using Gutenberg between now and June 2021 in order to at least be ready to jump into it on day one should the need arise.
Citation
Read the WP Rocket article about redesigning their website using Gutenberg:
Why WP Rocket Chose Gutenberg and How Performance Improved
