Fix Slow Gutenberg Post Editor in WordPress

WordPress replaced the classic editor and introduced Gutenberg editor with the release of version 5.0. Since many users like the easiness of the old classic editor, WordPress still offers a “Classic Editor” plugin to continue using the old classic editor interface. However, Gutenberg is the future of WordPress and you have no other options to start using it sooner or later.

Though Gutenberg editor has drag and drop blocks, it loads very slowly impacting the content publishing. Slow Gutenberg editor is one of the biggest problems holding back users to go for it. If you are struck with ever loading Gutenberg editor, here are the reasons and fixes on how to speed up the editor.

Fix Slow Gutenberg Post Editor in WordPress

Try the followings to fix slow Gutenberg editor:

  1. Check your internet connection
  2. Remove blocks you are not using
  3. Disable meta boxes
  4. Stop autosave and revisions
  5. Avoid large tables
  6. Use light theme and plugins
  7. Update WordPress
  8. Check your hosting
  9. Use classic editor

1. Check Internet Connection

Gutenberg will load many scripts and styles needed for each block element. So, the initial loading needs proper internet connection. If you have very slow or interrupted connection, you will see some error messages on the editor. For example, the slow connection will lead to failure in the autosave and show message like “Updating failed. Error message: The response is not a valid JSON response”.  

Gutenberg Editor Issues
Gutenberg Editor Issues

Check your Wi-Fi network is strong enough or try to use network cables to have stable connection. Also ensure that you have free internet without blocking services. Otherwise, you need to use VPN to have unblocked internet.

2. Stop Autosave and Revisions

In Autosave is a core function in WordPress that helps to retain different versions of the post. When you have a problem like internet connection failed, you can retrieve the latest version from the autosaved revisions. Though this is a useful function from data recovery perspective, saving the content every few minutes in the editor will impact your speed. As shown in the above screen, you will get JSON error when autosave fails in the editor.

You can see the process running in the background indicated as “Saving”. During this time, WordPress will also disable the “Publish” or “Update” button affecting your work. In our opinion, many of us don’t need this autosave function and you can learn in our earlier article on how to disable autosave and revisions.

3. Disable Blocks in Gutenberg Editor

Gutenberg editor has more than 50 default blocks and plugins like Yoast SEO also add custom blocks in the editor. The editor needs the resources for each block when it loads which may lead to long loading time. For sure, you don’t need to have all the blocks on all posts. Fortunately, you can disable the blocks that you no longer use:

  • Click on the settings icon and choose “Manage Block Editor”.
Manage Blocks and Meta Boxes in Gutenberg
Manage Blocks and Meta Boxes in Gutenberg
  • Disable all the blocks you never use on your site.
Disable Blocks in Gutenberg
Disable Blocks in Gutenberg

Learn WordPress: Check out 300+ free WordPress tutorials.

4. Meta Boxes on Post Editor

Do you have lots of meta boxes in the post editor? Many plugins and themes will add meta boxes in the post editor to setup specific options for that page. Each meta box on the post editor will impact the loading speed. For example, plugins like Yoast SEO, WP Review and WP Rocket all add meta boxes in the editor.

  • Click on settings icon and choose “Options” from the dropdown.
  • Disable meta boxes that you don’t want to load on the editor.
Disable Meta Boxes
Disable Meta Boxes

After disabling the blocks and meta boxes, you can feel the editor will load faster.

5. Avoid Large Tables

The table block in Gutenberg will respond slow when you have large amount of content in the table. Though the recent versions improved the performance, it still lags the typing when you have large table content. Make sure you have reasonable rows / columns in the table. Otherwise use separate table plugins like TablePress to create tables outside the editor and embed on the post using shortcode.

6. Use Light Theme and Plugins

This is a generic solution to fix many WordPress problems. As mentioned, most of the commercial themes will add meta boxes in the post editor. This will help to have post specific settings like different background, disabling advertisements or having different layouts. If Gutenberg editor loads very slow, revert back to one of the default WordPress themes like twenty-twenty and check. If that resolves the problem, you should consider changing the theme or ask the theme developer for help.

Many of us think plugins only affect the loading time of the frontend pages. However, similar to themes, many plugins also add heavy loads to the editor. For example, the popular Yoast SEO plugin adds a meta box in the editor. It will take long time to load, especially with the slow internet connection. If it goes beyond the acceptable level, you need to consider replacing the plugin with alternate options.   

Yoast SEO Meta Box Loads Slowly
Yoast SEO Meta Box Loads Slowly

SEO Offer: Get special 14 days free trial with SEMrush to analyze your site.

7. Update WordPress

Recent WordPress updates primarily focused on improving the performance of the Gutenberg editor. Therefore, ensure to update your site to use the latest WordPress version. In addition to core WordPress, also use the latest PHP version (>7.3) and keep your themes and plugins up to date.

This will help to resolve some of the old problems and improve the editor speed.

8. Check Your Hosting

In our previous article, we have explained how the hosting affects the admin pages. Poor shared hosting also will impact the loading time of the Gutenberg editor, especially when you are editing the content during peak traffic to your site. Check with your hosting company to understand the resource utilization from PHP files like admin.php. in most situation, you should upgrade the hosting depending upon the traffic and load on your server.

9. Use Classic Editor

Unfortunately, you can’t implement some of the above fixes like replacing theme or certain plugin. If this is the case, you should consider going back to the classic editor. Remember, Gutenberg is not integrated with WooCommerce and bbPress forms. Also, most of the custom post types in WordPress will still use the classic editor interface. Therefore, going back to Gutenberg is a good option for online store and forum sites. This will help you to have the same classic interface for all editors.

However, Gutenberg being part of the core will still load the resources on the editor. You may need to analyze and deque these files to completely stop Gutenberg and use classic editor.   

Final Words

As many users complained, WordPress pushed Gutenberg without complete preparation. Though there are many updates to improve the performance, it does not make sense to load two editors when you have WooCommerce or bbPress. However, if you have a larger blog or spend long time on the post editor then Gutenberg is the way to go. We hope the above mentioned points address the reasons for slow Gutenberg editor and help you to speed up the editor loading time.   

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment