WordPress Gutenberg Improved Site Performance

  1. Editing in Gutenberg is easier
  2. Building with Gutenberg Improved performance
  3. Gutenberg is surprisingly robust
  4. Interview with WP Rocket
  5. Three possible inconveniences
  6. WordPress Gutenberg is the future
  7. Quote

WordPress caching plugin publisher WP Rocket redesigned their website with Gutenberg and improved the website’s performance. They found that Gutenberg writes surprisingly light code, but shared that there are a few things to look out for.

Screenshot of the PageSpeed ​​Insights Score

Editing in Gutenberg is easier

Gutenberg’s goal was consistently to create an editing interface that would make it easier for publishers of all levels of difficulty to publish websites.

advertising

Read on below

By creating an intuitive user interface, it lowers the barrier to entry, almost anyone can easily create a web presence, and best of all, content creators can still focus on creating content instead of worrying about code.

According to the official WordPress Gutenberg site:

“Without being a skilled developer, you can create your own custom posts and pages.”

The WordPress developer site describes the Gutenberg vision as follows:

“Gutenberg is turning the editor into a tool that allows users to write extensive posts and create beautiful layouts with just a few clicks – without the need for technical knowledge. WordPress is becoming a powerful and flexible content tool that is accessible to everyone. “

The editor uses a concept called “blocks” that can be arranged in a custom layout.

That focus on making it easy for everyone to focus on content explains why the WP Rocket marketing team immediately appreciated the new user interface.

According to WP Rocket:

“Moving from Classic Editor to Gutenberg was effortless for the marketing team. In addition, we have used some functions that make our work easier and faster. “

advertising

Read on below

Screenshot PageSpeed ​​Insight Score of the start page

wp-rocket-home-page-6024f2f0548b9 WordPress Gutenberg Improved Site Performance

Building with Gutenberg Improved performance

WP Rocket reports that building a website with Gutenberg resulted in a faster, more powerful website.

There were two reasons why the pages built with Gutenberg did exceptionally well in WP Rocket:

  1. Lighter HTML (integrated in Gutenberg)
  2. On-demand CSS and JavaScript (no Gutenberg function)

Lighter HTML is a ready-to-use feature for Gutenberg.

On the other hand, loading unnecessary CSS is also a built-in feature of Gutenberg. Because of this, WP Rocket created a workaround to automate on-demand CSS.

Gutenberg is designed to load all of the CSS required for each 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

To be honest, I was a little amazed that WP Rocket went all-in on Gutenberg. The reason for my astonishment was that Gutenberg is not quite finished yet.

The full editing of the website will not be introduced until June 2021. Still, WP Rocket found that redesigning the entire website with Gutenberg was the right choice.

I asked the WP Rocket team to share their experience.

Interview with WP Rocket

gutenberg-wp-rocket-6024f724df539 WordPress Gutenberg Improved Site Performance

Did the development team face challenges and did they need to find workarounds to address them?

advertising

Read on below

“Yes!

First off, we had no development experience with custom Gutenberg blocks, and everything we read on the subject was very daunting at first.

The learning curve was of course pretty steep.

For specifics: As a caching plugin, one of our main development problems was the need for performance. In this regard, Gutenberg has a disadvantage: the standard stylesheet contains the CSS of all native blocks.

This was a problem because unused CSS is loaded on all pages (and it does not follow the PageSpeed ​​Insights recommendation of “Remove Unused CSS Resources”).

In our case we discarded several blocks that were not used. We have created a custom queuing system that only blocks CSS & JS when needed. It only took us a few minutes to develop this system.

We also decided not to use the Gutenberg CSS file. Instead, we “migrated” the CSS actually required into our own stylesheet, into a dedicated CSS file. That worked.”

advertising

Read on below

Does Gutenberg feel complete and ready for production facilities?

“Well, we managed to build our site with Gutenberg (apart from the header and footer). I think that says something about how Gutenberg turned out and how ready it is.

With full site editing scheduled for June 2021, I think you can edit all elements of a site using Gutenberg blocks. “

Was there a learning curve to use it?

“Absolutely. And I think this will be especially the case for those who are used to visual page builders.

Even so, we were pleasantly surprised at how visual Gutenberg actually is. The back end offers a great preview of the front end, which means it’s easy for even a non-tech like me to make changes to a page or create new pages from scratch. “

Given the knowledge you now have from your experience, what advice do you have for those considering joining Gutenberg?

“Do it!

Our two main takeaways were as follows:

advertising

Read on below

  1. Work on your new web design with Gutenberg in mind. You save a lot of time and are more efficient in the end. (We didn’t do this because we started designing without choosing the editor …)
  2. Think carefully about how many blocks you will need for your business. Consider whether or not they all need to be custom. Blocks make a real difference when using Gutenberg. (We have developed over 20 custom blocks, which is far from the average. You may only need a few).

What are the top considerations to think about before moving to Gutenberg?

“Gutenberg is not necessarily for everyone.

If you’re okay with a free theme the way it is, then it’s great. You can make any blocks you want and enjoy Gutenberg.

However, if you want a specific design and blocks, you need a developer to help you with the layout. You probably won’t need as much time as we do.

Even so, your new website will take longer and more expensive than usual to develop because you need help. You should also be aware of the steep learning curve that lies ahead of you.

That said, Gutenberg is really at the heart of WordPress and every day contributors work to make it better.

If you choose any other option, there is a risk that it will not be updated when WordPress makes a change. Plus, 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 and that it is free and open source. “

advertising

Read on below

What kind of publishers should think twice about moving to Gutenberg?

“This is something we mention in our blog post:

If you’re a freelancer or run a small business, a page builder that doesn’t require developer help or additional costs might be fine.

If you run a larger company and need a specific development, then without hesitation Gutenberg is the solution for you. “

Three possible inconveniences

As I understand it, there are at least three inconveniences.

  1. Learning curve
    But that is part of learning something new. Since Gutenberg is likely to be the future of WP, creating a desktop instance to play around with might not be a bad thing.
  2. Gutenberg is incomplete until June 2021
    I think the navigation menu and widget areas for Gutenberg are still under construction. Full site editing is not planned until June 2021.
  3. Loads all CSS and JS files
    Apparently, Gutenberg loads all of the style and JS code on each page, including the code for blocks that are not in use. This can lead to unnecessary bloating.

WordPress Gutenberg is the future

WP Rocket makes a valid point when they say Gutenberg is the future. The goal is to enable publishers to focus less on the code than on the content. The full revision of the Gutenberg website is currently planned for June 2021.

advertising

Read on below

With the addition of WP Rocket to the team, we now know that Gutenberg really has a promising UI for editing and potentially helping to improve website performance.

It can be useful to create a virtual desktop instance and get used to creating and publishing a site with Gutenberg between now and June 2021, in order to be ready to access it when needed, at least on the first day.

Quote

Read WP Rocket’s article on redesigning their website with Gutenberg:

Why WP Rocket chose Gutenberg and how the performance has improved

April 2, 2021