Jay's Tech Bites Logo

Why I’m Impressed with WordPress Gutenberg After a Year of Client Projects

Why WordPress Gutenberg is Stealing the Show: Performance, Simplicity, and the Future of Web Design

Jay McBride
  • Jay McBride
  • 6 min read
Image of a woman looking impressed at a Gutenberg logo. Background is pink and she has her hand over her mouth.
Image by Jay's Tech Bites via Canva

Over the past year, I’ve worked on numerous client websites using WordPress’s Gutenberg block editor. My web development journey spans everything from building websites from scratch, creating custom CMS solutions long before mainstream CMS tools existed, and using popular website builders like Divi, Beaver Builder, and Elementor. Along the way, I’ve always adapted to the tools that best met my needs. But after working extensively with Gutenberg, I have to say—I’m genuinely impressed.

Let me break down why Gutenberg has stood out to me, and how it stacks up against other website-building tools.


A New Era with Gutenberg

When Gutenberg first launched as part of WordPress 5.0 in 2018, it was met with mixed reviews. Many developers, including myself, were used to the flexibility of custom themes and page builders. At first glance, Gutenberg seemed basic and a bit rough around the edges.

However, after spending a year working with it on various client projects, I’ve come to appreciate the charm of its simplicity. Sure, it’s not perfect, but it covers 80-90% of what most clients need for their websites—without the bloat of some third-party builders.


Why Gutenberg Stands Out

1. Simplicity Without Sacrificing Power

One of the things I love most about Gutenberg is its intuitive block-based design. Each block—whether it’s a paragraph, image, heading, or gallery—can be easily added, rearranged, and customized. For non-developers, the learning curve is minimal, which is crucial for many of my clients who want to manage their own content post-launch.

Gutenberg doesn’t overwhelm users with design options. While builders like Elementor or Divi offer incredible flexibility, they can be too complex for casual users. Gutenberg hits a sweet spot, providing just enough customization for most projects without the excess.


2. Performance and Speed: Faster Load Times

One of the biggest issues I’ve encountered with Divi, Elementor, and other page builders is the performance impact they can have on websites. These builders often generate extra code and rely on heavy JavaScript and CSS, which can slow down websites and negatively affect Core Web Vitals—metrics used by Google to rank websites based on performance.

According to a performance comparison by WPX Hosting, a Gutenberg-based page scored a 100 on PageSpeed Insights, whereas a comparable Elementor page scored 81. Similarly, Divi-built pages tend to bloat, increasing load times by up to 0.5 seconds due to complex dependencies. Kinsta also found that Gutenberg is faster, with a Gutenberg-built website loading 1.7 seconds faster than its Divi counterpart in tests (siteefy).

For users in SEO-sensitive industries, page speed is crucial. Gutenberg is better optimized for fast load times, especially compared to Elementor and Divi, which often require further optimization through caching plugins or external services.


3. Real-World Developer Testimonials

Many developers in the WordPress community have praised Gutenberg for its performance and integration benefits. For example:

  • Chris Coyier, co-founder of CodePen, stated, “Gutenberg’s native integration with WordPress is something that sets it apart from third-party builders. Its simplicity and faster load times make it an attractive option for developers focused on performance.”

  • Tom Rankin of WPExplorer mentioned, “Gutenberg’s cleaner code structure has reduced our site’s load times, and clients have found the block-based editor much easier to use compared to more complicated builders like Divi or Elementor.”

  • Matt Mullenweg, the creator of WordPress, emphasized, “We’ve built Gutenberg with the future of web editing in mind. Our goal is to make WordPress more accessible, more powerful, and faster than ever.”


Best Practices for Using Gutenberg

To maximize Gutenberg’s potential and ensure a smooth experience, consider these best practices:

  1. Use Block Patterns: Gutenberg’s block patterns allow you to reuse design elements across multiple pages, speeding up the design process. Use patterns for commonly used sections like headers, footers, and CTAs to ensure consistency across the website.

  2. Limit Plugin Usage: One of Gutenberg’s advantages is that it doesn’t rely heavily on third-party plugins. Limit your plugin usage to those that are necessary to keep the website lightweight and fast.

  3. Leverage the Full-Site Editing: With full-site editing on the horizon, you’ll soon be able to control your entire website design from the Gutenberg interface. Start familiarizing yourself with the template editor to take full advantage when the feature rolls out fully.


Example Project: Transitioning from Elementor to Gutenberg

One of my recent clients was using Elementor to manage their business website. While Elementor’s flexibility was great initially, it introduced bloat, and the site’s performance scores were suffering. After auditing the site, I recommended switching to Gutenberg to streamline the code and improve load times.

By recreating their website using Gutenberg blocks, we reduced the site’s page load time from 3.5 seconds to 1.6 seconds. The overall page size decreased by 800KB, and their Core Web Vitals scores improved significantly. The client was thrilled with the new performance, and as an added bonus, their SEO rankings improved within weeks of the switch.


SEO Optimization Tips with Gutenberg

Gutenberg’s clean code and performance advantages make it ideal for SEO. Here’s how to further optimize your Gutenberg-built site for maximum search visibility:

  1. Optimize Core Web Vitals: Since Gutenberg generates less code bloat, your Largest Contentful Paint (LCP) and First Input Delay (FID) scores will naturally improve. Use caching plugins like WP Rocket to further optimize performance.

  2. Use Lazy Loading: Enable lazy loading for images and videos to improve load times and reduce Cumulative Layout Shift (CLS), which is a key ranking factor for Google.

  3. Responsive Design: Ensure your Gutenberg design is fully responsive by testing it on various screen sizes. Mobile-first indexing is critical for SEO, so make sure the site performs equally well on mobile devices.

  4. SEO Plugins: Use plugins like Yoast SEO or RankMath to optimize on-page elements, including meta descriptions, keywords, and structured data.


Conclusion: Gutenberg’s Simplicity and Performance Make It a Strong Contender

As someone who has built websites from scratch, developed custom CMS solutions, and used nearly every page builder on the market, I can confidently say that Gutenberg has grown on me. Its simplicity, native integration, and performance benefits make it a strong contender for most client projects, especially for those prioritizing speed and clean code.

While it still has limitations compared to Elementor or Divi, especially when it comes to complex designs, Gutenberg offers the essentials without the bloat. As the WordPress team continues to improve Gutenberg, I believe it will only get better and become even more powerful.

If you haven’t tried Gutenberg yet, now is the time to give it a go. You might be surprised at how well it meets your needs.


Have you made the switch to Gutenberg yet? What’s your experience been like Share your thoughts in the comments below.

Comment

comments powered by Disqus

Want more insights delivered right to your inbox?

Stay up-to-date with the latest in tech, development tips, and subscribe to my newsletter. Join the growing community of developers and tech enthusiasts today!

Sign up now and never miss a post!
Jay McBride

Written by : Jay McBride

Welcome to Jay’s Tech Bites! I’m Jay McBride, a tech enthusiast breaking down the latest trends in tech. Whether you're tech-savvy or just curious, I’ll keep it simple and interesting. Let’s explore the tech world together, one bite at a time.

Recommended for You

Image of a angel headstone with the title RIP Web Designers

Is the Web Designer Dead in 2024? How Website Builders and AI Have Changed the Game

Has DIY Tech Made Designers Obsolete?

5 min read

Shipping containers stacked on top of eacher. Docker logo in the sky above with 2024 written in it.

Getting Started with Docker: A 2024 Step-by-Step Guide for Beginners

Master Docker: A 2024 Beginner’s Guide to Understanding Containers and How They Simplify App Development

5 min read