The publisher of the WordPress caching plugin, WP Rocket, recently redesigned their site using Gutenberg and achieved notable improvements in site performance. They observed that Gutenberg generates surprisingly lightweight code but identified a few areas to monitor.
PageSpeed Insights Score
Editing in Gutenberg is Easier
Gutenberg’s primary aim is to provide an editing interface that simplifies website creation for publishers of all skill levels.
An intuitive interface lowers the barrier to entry, enabling nearly anyone to establish an online presence. It also allows content creators to focus on their content without worrying about code. According to the official WordPress Gutenberg page:
"Without being an expert developer, you can build your custom posts and pages."
The WordPress developer page describes the vision for Gutenberg as follows:
"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’s "blocks" can be arranged to form custom layouts, which helped the WP Rocket team appreciate the new interface immediately.
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."
Home Page Performance
Building With Gutenberg Improved Performance
WP Rocket found that using Gutenberg resulted in a faster and better-performing website due to:
- Lighter HTML (built-in to Gutenberg)
- On-Demand CSS and JavaScript (custom solution by WP Rocket)
While Gutenberg naturally produces lighter HTML, it also loads unnecessary CSS by default. WP Rocket overcame this by automating on-demand CSS to load styles and scripts only when needed.
Gutenberg is Surprisingly Robust
Despite concerns about its unfinished state, especially with full site editing set for release in June 2021, WP Rocket successfully redesigned their entire website using Gutenberg. The WP Rocket team shared their experience:
Interview with WP Rocket
Did the development team face challenges and need to create workarounds?
"Yes! Initially, we had zero experience with Gutenberg custom blocks, and the learning curve was steep. Performance was a concern due to the default stylesheet containing all native blocks’ CSS, meaning unused CSS was loaded on all pages. We solved this by creating a custom system to enqueue CSS and JS only when needed and migrating necessary CSS into our own stylesheet."
Does Gutenberg feel ready for production sites?
"We built our site using Gutenberg (except for the header and footer), which speaks volumes about its readiness. With Full Site Editing planned for June 2021, users will soon be able to edit all site elements using Gutenberg blocks."
Was there a learning curve?
"Absolutely. This is especially true for those used to visual page builders. Nonetheless, we were pleasantly surprised by how visual Gutenberg is. The back-end provides a great preview of the front-end, making it easy for even non-techie users to make changes or build new pages."
Advice for those contemplating a switch to Gutenberg?
"Go for it! Two main takeaways: Start your web design with Gutenberg in mind for efficiency. Carefully consider the number of custom blocks needed according to your business."
Top considerations before switching to Gutenberg?
"Gutenberg may not be suitable for everyone. If a free theme suffices, Gutenberg is great. For specific designs and blocks, a developer may be needed, making the development longer and more expensive. Nevertheless, Gutenberg is central to WordPress and is constantly improved. Choosing another option risks future compatibility issues. Gutenberg is the future of WordPress, and it’s free and open-source."
Considerations for publishers who should think twice about switching to Gutenberg?
"Freelancers or small companies might be better off with a page builder that doesn’t require additional developer help or cost. Larger companies needing specific development should choose Gutenberg without hesitation."
Three Possible Inconveniences
- Learning Curve: Necessary for anything new, and it’s useful to create a desktop instance to get familiar with Gutenberg.
- Incomplete Until June 2021: Navigation and widget areas are still under development, with Full Site Editing scheduled for release in June 2021.
- Loads All CSS and JS Files: Gutenberg loads all style and JS code on every page, causing potential bloat.
WordPress Gutenberg is the Future
WP Rocket rightly points out that Gutenberg is the future, aimed at allowing publishers to focus on content rather than code. With full site editing expected in June 2021, Gutenberg promises an improved editing experience and better performance.
Creating a virtual desktop instance to practice with Gutenberg before its official release can help users familiarize themselves and be ready for the transition.
Citation
Read the WP Rocket article about redesigning their website using Gutenberg:
"Why WP Rocket Chose Gutenberg and How Performance Improved"
