Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Gutenberg on a badly built WordPress website is very slow
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Gutenberg on a badly built WordPress website is very slow

emghemgh Member
edited September 2022 in General

I host a site with TONS of blocks and containers using Stackable. When inspecting the final HTML, it looks fucking horrible. It's as long as a US court document.

Every text block has like a 1 KM long stack of classes for everything lol.

It's not built with lightness in mind, both by the plugin as well as by me as a user of the block builder.

I might redo it but I don't feel like it.

My issue is: Gutenberg lags like fucking hell. It's extreeeemely annoying.

It lags like a bit ALL of the time, and sometimes freezes, goes for any web browser.

I've got a 16 GB RAM MacBook Pro M2 so it's a really beefy computer, and looking at my activity monitor, when It's lagging, it's usually in high usage (CPU & Memory), but usually not even close to peaking. Safari is lighter on it, but I feel like it's because it's caching less (if I tab to another website and tab back to the Gutenberg editor it's hell).

Apart from rebuilding the whole thing and doing it right, do you have any suggestion for me?

COULD there be anyway that the server is to blame? I host it all on a very small server with a weak CPU, and I noticed that autosaving was the real theif, it was just not workable, it saved every 60 seconds, and while saving, no work could be done for like 20 seconds.

However, still, after turning it off, it's not snappy at all, and often attacks me with lag spikes.

I basically just want any tips I could get apart form rebuilding it, which probably is the best tip.

Also, the server's usage is very high (not a lot of wiggle room), but if that can't have to do with the lagging inside of Gutenberg I don't care honestly.

When autosaving was enabled, it lags enough to make Chrome think the side has stopped responding, when it's disabled, it lags a lot still but not that much. No warnings anymore.

Why it might not be the computer: As said, the usage on my Macbook normally isn't at peak levels on either CPU or RAM when it lags, and if I tab to another tab with like a 4K YouTube video or something, it dosen't lag at all, even with the lagging Gutenberg in the background.

Why it might be the computer: I have a M1 (instead of this M2) that's an Air (instead of this Pro) that has 8 GB RAM (instead of this 16 GB RAM) and it lags MUCH more.

Comments

  • Tagging people I know eat, sleep & breath WordPress:
    @bikegremlin @armandorg @vyas11 @Ympker

    Feel no need to respond :)

  • Scaled up to a much beefier server.

    Clear my memory cache.

    Using 12 GB RAM
    Caching 1,44 GB RAM

    Out of 16 GB RAM total

    CPU Usage about 8 % when doing WP stuff, about 3 % when not.

    Lagging like hell.

  • vyas11vyas11 Member
    edited September 2022

    @emgh

    COULD there be anyway that the server is to blame? I host it all on a very small server with a weak CPU, and I noticed that autosaving was the real theif, it was just not workable, it saved every 60 seconds, and while saving, no work could be done for like 20 seconds.


    Some more information might help; assumption here is that some or most of the below have been checked by you already.
    Server level:

    • OS + version for server?
    • How much RAM/ Disk space/ CPU type and core?
    • PHP version ?
    • Database version
    • Any cron jobs or other processes running?
    • Firewall?
    • Network settings...
    • CPU Steal within sane levels?
    • Disk health?

    Coming to the WP Installation,

    • WP Version?
    • Any rogue scripts?
    • Any Panels used (DA/ CPanel, etc?)
    • Have you tried disabling all plugins and checking if there is still a lag?
    • How about revisions to posts? How often are they cleaned? I have a blog with 390 odd posts- even 2 revisions per post added overhead.
    • How about cloning the site to a new server? Does the lag occur there also?
    • Alternative: Clean WP install, with same theme + plugins; merely import the posts + pages + media + templates via WP all import, etc..
    • Gutenburg for all its shortcomings still offers a relatively lean and clean code base compared to many other pagebuilders
      ( consider this as a before coffee/controversial, ubsubstantiated statement, but this has been my personal experience all along)
      -Heavy media files slowing the site down? Can image compressions/ offloading images to a CDN help? Likewise for video- served locally versus Vimeo?

    Much to mull open, much to ponder.

    Best wishes.

    Thanked by 1emgh
  • Just code your own CMS like any insane dev that doesn't check options outside of wordpress :wink:

  • Thanks, must have taken time!

    @vyas11 said:
    @emgh

    Some more information might help; assumption here is that some or most of the below have been checked by you already.

    Server level:

    • OS + version for server? Ubuntu 20.04 LTS
    • How much RAM/ Disk space/ CPU type and core? 512 MB RAM, 1 vCPU, 20 GB SSD (tested with 4 GB RAM, 2 vCPU, 80 GB SSD as well, same issue)
    • PHP version? 8.1 (tested with 7.4 as well, same issue)
    • Database version? MariaDB 10.6
    • Any cron jobs or other processes running? Really noting major
    • Firewall? Default AWS but with HTTPS & RunCloud ports opened
    • Network settings? Nothing done manually, RunCloud is the stack

    WP Installation:

    • WP Version? WordPress 6.0.2, newest
    • Any rogue scripts? No
    • Any Panels used? RunCloud
    • Have you tried disabling all plugins and checking if there is still a lag? Inactivating my 8 plugins removes any lag. However, it makes most Gutenberg blocks invalid. Starting a new page with the plugins and without any blocks removes most lagging as well. Inactivating all plugins but Stackable yields the same results, a lag-free experience. However, since it's lag-free with Stackable as long as there's not too many blocks, I'd say the issue is the amount of Stackable blocks and not the plugin in itself
    • How about revisions to posts? There's A LOT of them. The longest and most lagging post had 348. Once I deleted them all, it still lagged about the same.
    • How about cloning the site to a new server? Snapshotted it to a beefier server with the exact same amount of lag. Would there be a point in doing this again but with a completely different stack maybe?
    • Heavy media files slowing the site down? No videos, longest post is basically 12 light images

    It even lags so that the "saving posts" animation looks like a GIF with 3 stages in it.

  • vyas11vyas11 Member
    edited September 2022

    @emgh

    I'd say the issue is the amount of Stackable blocks and not the plugin in itself

    Could be the root cause here. Are you aware of any plugin other than Stackable that can give same look and feel ?

    (you know best why you need/ specifically need Stackable)

    There was a guy in a FB group who had created a template site- essentially same look + feel as many elementor blocks, but based on Gutenburg Code was available - Open source, I believe GPL. Cannot recall the name.

    @emgh said: Would there be a point in doing this again but with a completely different stack maybe?

    How about cloning the site to a new server? Snapshotted it to a beefier server with the exact same amount of lag. Would there be a point in doing this again but with a completely different stack maybe?

    Just a hunch at this time, (say, Webinoly on a fresh install VPS) but the Stackable issue seems more interesting.

    must have taken time!

    Speech to text + dog walking, fresh air = helped think better :-)

    Best regds,

    Thanked by 1emgh
  • emghemgh Member
    edited September 2022

    @vyas11 said:
    @emgh

    I'd say the issue is the amount of Stackable blocks and not the plugin in itself

    Could be the root cause here. Are you aware of any plugin other than Stackable that can give same look and feel ?

    (you know best why you need/ specifically need Stackable)

    There was a guy in a FB group who had created a template site- essentially same look + feel as many elementor blocks, but based on Gutenburg Code was available - Open source, I believe GPL. Cannot recall the name.

    @emgh said: Would there be a point in doing this again but with a completely different stack maybe?

    How about cloning the site to a new server? Snapshotted it to a beefier server with the exact same amount of lag. Would there be a point in doing this again but with a completely different stack maybe?

    Just a hunch at this time, (say, Webinoly on a fresh install VPS) but the Stackable issue seems more interesting.

    must have taken time!

    Otter + dog walking, fresh air = helped think better :-)

    Best regds,

    Found this which seems to be the issue here: https://wordpress.org/support/topic/browser-performance-issues-on-long-posts/

    Still open to ANY tips that can help with this issue that I can do myself, in the meantime, I've sent them an email with the same content that they asked Vadim to send on the topic above.

    I think one main issue is that I have 12 Stackable blocks, all doing the SAME thing but with different content in them. So browser probably loads and tries to cache all of their values seperately (padding, margin, all of the customizable things).

    I use Stackable for more stuff, but mostly for that. The blocks look like this:
    https://imgur.com/a/cm91stN

    And scales vertically on a smaller screen. It's a really neat look.

    Thanks for the link, I'll check it out!

  • Honestly might just redo all of the easy-to-redo things with Gutenberg & Pure CSS and keep Stackable only for special occasions (like max 2 blocks per page) that i CBA to redo better manually for my specific use-case.

  • There's a plug-in called Ultimate Add-ons for Guntenberg or UAG,

  • bikegremlinbikegremlin Member
    edited September 2022

    Some ideas:

    1)
    How much PHP RAM is available? Maybe increasing it to 512 MB could help.

    2)
    LiteSpeed plugin can help a lot.
    In addition to disabling auto-saves (or at least making them run at 5+ minute intervals), LiteSpeed lets you use GUI to configure:

    Toolbox -> [4] Heartbeet ->
    Frontend, Backend, and Editor Heartbeat intervals. You can set them to 120 seconds to reduce DB and server load, or completely disable them (if it doesn't break any functionality). With separate settings for F, B, and Editor.

    Another thing LiteSpeed can do, and it helps more often than not (for most WP sites) is convert the database table engine from MyISAM, to InnoDB.

    3)
    WordPress and Gutenberg (the default editor) can get slow with long posts, but that has been greatly improved with the latest WordPress versions. I write some marathon-long posts with thousands of words, and even with Grammarly browser extension running while I'm editing, it's nothing outrageously slow - i.e. not as the problems you're facing.

    4)
    Of course, it always makes sense to build stuff properly - especially in the long run.

    Edit:
    Theme and plugin choice (and the number of plugins) can also play a part.
    WooCommerce and multilingual plugins can put a lot of load even when "just" editing backend (depending on what is being edited).

    Thanked by 2emgh ariq01
  • @bikegremlin said:
    Some ideas:

    1)
    How much PHP RAM is available? Maybe increasing it to 512 MB could help.

    2)
    LiteSpeed plugin can help a lot.
    In addition to disabling auto-saves (or at least making them run at 5+ minute intervals), LiteSpeed lets you use GUI to configure:

    Toolbox -> [4] Heartbeet ->
    Frontend, Backend, and Editor Heartbeat intervals. You can set them to 120 seconds to reduce DB and server load, or completely disable them (if it doesn't break any functionality). With separate settings for F, B, and Editor.

    Another thing LiteSpeed can do, and it helps more often than not (for most WP sites) is convert the database table engine from MyISAM, to InnoDB.

    3)
    WordPress and Gutenberg (the default editor) can get slow with long posts, but that has been greatly improved with the latest WordPress versions. I write some marathon-long posts with thousands of words, and even with Grammarly browser extension running while I'm editing, it's nothing outrageously slow - i.e. not as the problems you're facing.

    4)
    Of course, it always makes sense to build stuff properly - especially in the long run.

    Edit:
    Theme and plugin choice (and the number of plugins) can also play a part.
    WooCommerce and multilingual plugins can put a lot of load even when "just" editing backend (depending on what is being edited).

    Thanks so much!

    Honestly I've settled on rebuilding it, simply with Gutenberg & Custom CSS. Skipping block plugins as a whole.

    Thanked by 1bikegremlin
Sign In or Register to comment.