Does the WordPress Block Editor (Gutenberg) slow down my site?

Q. Is Gutenberg slowing down my website?

Nope. In my tests, I noticed less than half-a-second difference in page speed between the classic and block editors. For this minute difference, you gain a lot of control over layout and design of your page/post content. You are more likely to slow down your site if you add unnecessary plugins to add features that you may hardly use or need.

Load TimesView Page Speed Test Results below for more details.

Classic Editor1.104 seconds
Gutenberg Editor1.143375 seconds

Based on feedback from Thanh, I have published an update to this post.

What is Gutenberg?

The WordPress Editor changed in WordPress v5

Classic EditorNew Gutenberg Editor
As a quick refresher, here’s what the Classic WordPress editor looked like:And here’s what things look like in the new WordPress Gutenberg editor:
The WordPress Classic Editor (TinyMCE)The New WordPress Block Editor also known as Gutenberg

Essentially, Gutenberg replaced the single edit field of the Classic editor with lots of individual “blocks”. These blocks then allow you to build more complex designs than those allowed in the current WordPress editor.

Click on Add Block button. You can Search for blocks or select them from categories (most used, common, formatting, layout, widgets, embeds, reusable etc)
Gutenberg introduces the block concept, everything is a block!

While it was easy to add content using the classic editor, the block editor gives you lot of control over layout and design of your page/post content.

You can use Gutenberg blocks to Create an awesome landing page in WordPress in just 15 steps without using code or shortcodes.

Page Speed Tests – Gutenberg vs Classic Editor

I performed the test to check if Gutenberg the block editor slows down your website compared to the classic editor.

Themes

I tested two of my favourite themes: GeneratePress and Astra. Both are lightweight, well supported, feature rich and extremely fast loading.

The two themes I tested, Astra and GeneratePress.

Plugins

page speed tests plugins - Does the WordPress Block Editor (Gutenberg) slow down my site?

I only used 2 plugins.

  1. Classic Editor plugin restores the previous (“classic”) WordPress editor.
  2. SG Optimizer plugin helps to speed up your sites – it provides caching, minification of your HTML, JS and CSS resources, removes the Emoji support and remove the query strings from your static resources.
    I host all my sites on SiteGround since they offer quality hosting and great customer service at an affordable price. This plugin is provided and works only if you host yours sites on SiteGround.

Process

I set up a demo site for this test. As mentioned above, I kept the plugins to bare minimum and chose fast loading themes.

  1. Activate one of the themes
  2. Run page load speed tests across Pingdom, GTMetrix and Google Page Speed Insights
  3. Activate the Classic Editor plugin
  4. Run page load speed tests again
  5. Repeat steps 1 to 4 for the other theme
  6. Tabulate the results

Results

Table Comparing page loading times – Gutenberg vs Classic Editor

EditorThemePingdomGTMetrixGoogle MobileGoogle Desktop
ClassicGP870ms1.3s2.3s.7s
GutenbergGP1.02s1.2s2.3s.7s
ClassicAstra862ms.7s1.6s.5s
GutenbergAstra727ms1.2s1.5s.5s

Screenshots

I provide screenshots as evidence below. This simple test is not in any way conclusive proof. Someone needs to perform a more through test multiple times.

GeneratePress Theme

Gutenberg Editor
Gutenberg GeneratePress Pingdom - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Pingdom using Gutenberg Editor
Gutenberg GeneratePress - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on GTMetrix using Gutenberg Editor
Gutenberg GeneratePress Google Desktop - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Google Page Speed Insights for Desktop using Gutenberg Editor
Gutenberg GeneratePress Google Mobile - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Google Page Speed Insights for Mobile using Gutenberg Editor
Classic Editor
Classic GeneratePress Pingdom - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Pingdom using Classic Editor
Classic GeneratePress - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on GTMetrix using Classic Editor
Classic GeneratePress Google Desktop - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Google Page Speed Insights for Desktop using Classic Editor
Classic GeneratePress Google Desktop 1 - Does the WordPress Block Editor (Gutenberg) slow down my site?
GP on Google Page Speed Insights for Mobile using Classic Editor

Astra Theme

Gutenberg Editor
Gutenberg Astra Pingdom - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Pingdom using Gutenberg Editor
Gutenberg Astra - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on GTMetrix using Gutenberg Editor
Gutenberg Astra Google Desktop - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Google Page Speed Insights for Desktop using Gutenberg Editor
Gutenberg GeneratePress Google Mobile 1 - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Google Page Speed Insights for Mobile using Gutenberg Editor
Classic Editor
Classic Astra Pingdom - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Pingdom using Classic Editor
Classic Astra - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on GTMetrix using Classic Editor
Classic Astra Google Desktop - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Google Page Speed Insights for Desktop using Classic Editor
Classic Astra Google Mobile - Does the WordPress Block Editor (Gutenberg) slow down my site?
Astra on Google Page Speed Insights for Mobile using Classic Editor

Update 28 March 2020

Thanks to this feedback…

It is not real test when gutenberg css still loaded when you use classic editor plugin . You must add dequeue_gutenberg_block_library_css into function.php to prevent loading “style.min.css” or “theme.min.css”. Read this article for more information https://www.makedo.net/blog/improving-performance-when-using-the-wordpress-classic-editor/

Thanh Nguyen

Basically the classic editor continues to load a 6KB (gzipped) CSS file that was enqueued by the Gutenberg editor; specifically, the block library.

To ensure that this CSS file is not loaded, I added the following snippet.

/**
 * Dequeue the Gutenberg Block Library CSS.
 */
function dequeue_gutenberg_block_library_css() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_gutenberg_block_library_css' );

I decided to test again and got the following results.

EditorThemePingdomGTMetrixGoogle MobileGoogle Desktop
GutenbergGP2.6s2.2s1.1s0.4s
ClassicGP1.29s2.2s1.3s0.3s
Classic with code snippetGP1.51s1.0s1.6s0.4s

GT Metrix seems to improve page speed by 1 second though Pingdom and Google seem to have slowed slightly. I need to test more thoroughly. Even a half-a-second gain is still a gain for high volume sites!

Conclusion

This simple test highlighted a few things for me…

There is less than half-a-second difference in page speed between the classic and block editors. For this minute difference, you gain a lot of control over layout and design of your page/post content

Dequeuing unnecessary CSS files can further improve performance. Perhaps look to improve performance by compressing and lazy loading images, as well as unnecessary plugins which is usually the main culprit for slow sites.

When to choose Classic Editor vs Gutenberg vs Page Builders?

  • If you are an experienced WordPress user and your priority is a simple text editor, then the classic editor is intuitive and better choice.
  • If you like your posts and pages to be visually stunning, then Guthenberg is a powerful alternative.
  • If you are after pixel perfect design, then page builders like Elementor, Beaver Builder, Brizy or Divi may offer far more features. Watch out, Gutenberg is rapidly catching up!

I prefer Gutenberg since it allows me to design my pages/posts without having to rely on third party page builders.

If you want a blazing fast website, I can do other optimisations to make your site load fast.

VJ - Vijay Rudraraju

Vijay Rudraraju (VJ)

I am web design and SEO consultant with over 12 years experience. I am obsessed with SEO, web design, WordPress, productivity hacks and page speed optimisation. I publish articles and tips to help you improve your online presence.

3 thoughts on “Does the WordPress Block Editor (Gutenberg) slow down my site?”

  1. Something wrong with pingdom and gtmetrix server in the new test . 2.6s for new test vs 1.02s for old tested is can’t acceptable . I prefer testing with webpagetest too . Choice the nearest server with your site and chrome beta for webpagetest and gtmetrix. At least webpagetest run with 3 times one test for easy compare

    Old test result:
    Gutenberg GP 1.02s 1.2s 2.3s .7s
    Classic GP 870ms 1.3s 2.3s .7s

    New test result
    Gutenberg GP 2.6s 2.2s 1.1s 0.4s
    Classic GP 1.29s 2.2s 1.3s 0.3s
    Classic with code snippet GP 1.51s 1.0s 1.6s 0.4s

    Reply
  2. It is not real test when gutenberg css still loaded when you use classic editor plugin . You must add dequeue_gutenberg_block_library_css into function.php to prevent loading “style.min.css” or “theme.min.css” . Read this article for more information https://www.makedo.net/blog/improving-performance-when-using-the-wordpress-classic-editor/

    Reply
    • Hi Thanh,
      I did not know about the additional css that was getting loaded.
      I did a quick check and added an update to the post.
      Looks like we could reduce page load time by a further .5 to 1 seconds.
      Thanks for your feedback.

      Reply

Leave a comment

 

Get in touch


VJ Design - Web Design Melbourne
Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000