Improving performance during development

I've recently installed a new test site with a Lot of plugins, and I'm working on themes with Upfront. It's all very slow, working on a remote shared host. (For production I'll almost certainly move to a faster private server, sooner if it's too painful, later if I can defer until I'm sure the site is worth it.)

I'd like to know what caching and other optimizations I can apply while I'm doing development, without getting conflicts where I can't see live updates to active changes. There is a lot of advice in forums and blogs about caching and plugins to help improve performance, but rarely mention about this (unwarranted?) concern I have.

A blog isn't normally a highly dynamic environment, so to-the-second updates aren't usually required. But as we use WordPress more as a CMS, including Ajax queries, and as we use live tools like Upfront in editmode, I'm wondering if some of the advice out there might be outdated.

So I'd like to compress and cache as much scripting and styles as possible, since most of that isn't changed too frequently but I suspect this is where most of the pain is found. Is that accurate? And what other areas should be targeted?

Or should I turn on all possible optimizations and let Them decide what's stale and needs to be refreshed?

Thanks!

  • Adam Czajczyk

    Hello Tony,

    I hope you're well today and thank you for your question!

    I'm not sure about plugin's that you're using but this may be worth reviewing, especially plugin's of "all-in-one" kind (please note that I'm not referring to the brand as in All-in-One Seo Pack here but to the "general purpose" plugins, e.g. adding a bunch of shorcodes that you only use a few of them).

    Other than that, the most crucial part here would be to implement caching with e.g. W3 Total Cache, WP Supercache or - I admit I personally prefer this one, but that's just my personal opinion - Wordfence (that includes caching engine and security tools at the same time).

    The downside is that any changes made may be cached and blocked by caching plugin. Unfortunately, although there are a few tools around that e.g. add version numbers to stylesheet's and/or JS files, there's no universal solution. From my own experience, it's best to keep caching totally disabled during development and only enable it after all changes are made.

    Adding CDN (Content Delivery Network) often helps a lot also, however it's worth checking what kind of cache is implemented there as well. This poses less problems though than server-side caching, usually.

    In case you had further questions, please ask and I'll be glad to assist.
    Best regards,
    Adam

  • Tony G

    I think you're confirming my understanding, that optimization is good for giving us "old" data very quickly. :slight_smile: ... and that's not good when we're doing live development, changing the theme/CSS, configuring plugins, etc.

    I think one initial and obvious target would be to try to minimize and cache header scripts and CSS files which are not modified.

    I will try Wordfence and the others but I suspect they'll interfere with development. I have CloudFront too, turned off at the moment. I might just try these all and see if they really do interfere but I was hoping to benefit from some hands-on experience.

    Hold onto your hat, so far I have 75 active plugins and 13 still inactive - almost all of them are from WPMU. I understand that just adding plugins can cause delays, but I will be needing the functionality so eliminating plugins is not desirable. But aside from extra server time, any of these plugins add scripts and styles to every site page even when it's totally unnecessary. It would be great if there were code that could make a server-side decision not to export what's not being used - especially for mobile users.

    Since all of those .js and .css files are coming from my single test server, I'm sure there are delays due to browser limits for the max number of concurrent queries per server. CDN should help with that too.

    I think this info from the WPMUDEV Blog is timely and valuable. I'll check that out. But other suggestions are welcome.

    Thanks again.

  • Adam Czajczyk

    Hello Tony,

    Thanks for your replay!

    I think you're confirming my understanding, that optimization is good for giving us "old" data very quickly. :slight_smile: ... and that's not good when we're doing live development, changing the theme/CSS, configuring plugins, etc.

    You're right, caching and similar techniques usually get's in a way of development. I agree that's not particularly fortunate but I don't think there's much that could be done about it except server-side optimization. That however would mean switching from "remote shared host" to a bit more resourceful and configurable environment.

    I think one initial and obvious target would be to try to minimize and cache header scripts and CSS files which are not modified.

    Actually, as far as I remember, W3 Total Cache allows you to exclude some CSS/JS files from cache/minimize engine. That's obviously not updated dynamically but is at least a workaround. Other than that, instead of turning cache on you could try this plugin:

    https://wordpress.org/plugins/autoptimize/

    This is meant to optimize JS, CSS and HTML and includes white-listing feature.

    Hold onto your hat, so far I have 75 active plugins and 13 still inactive - almost all of them are from WPMU. (...) It would be great if there were code that could make a server-side decision not to export what's not being used - especially for mobile users.

    That's a lot of plugins! Regardless whether these are our plugins mostly or 3rd-party I suppose such a huge repository will significantly affect site's performance so a reliable server would be a must here :slight_smile:

    As for CSS/JS loaded. I agree that it would be better if all the plugins loaded those only when necessary. I'll pass this suggestion to our developers however since we're constantly rewriting/improving our plugins I'm sure they're considering it already.

    That said, there is a way to change this but this would require a lot of custom work. Not that complicated I think but surely... boring :slight_smile: The idea would be to

    - de-register all styles and scripts coming from plugins
    - compile a single mu-plugin that would
    - identify on what page we're currently on and then
    - wp_enqueue() proper styles/scripts eg. (pseud-code):

    if ($page == "courses") {
    wp_enqueue_script('coursepress','coursepress.js');
    }
    // etc

    So, that's doable in my opinion and in case of complex site with a heavy traffic may be quite beneficial in terms of resources.

    Since all of those .js and .css files are coming from my single test server, I'm sure there are delays due to browser limits for the max number of concurrent queries per server. CDN should help with that too.

    CDN and cache should surely help with that but again, that will work best on "live" stage and not during "development" stage. I think though that CDN+ Cache could be combined with the idea mentioned above and furthermore - all the scripts and styles assigned to particular plugin could also be (after development is done) combined into single files. This all together would limit number of queries significantly :slight_smile:

    I think this info from the WPMUDEV Blog is timely and valuable. I'll check that out. But other suggestions are welcome.

    That's definitely up to date and very valuable knowledge. It comes from our own CTO and was presented recently during WordCamp US so it's absolutely worth giving some attention.

    Best regards,
    Adam

  • Tony G

    Update: I activated WordFence cache but had to turn it off. For some reason the environment was running Much slower and yet the cache logged zero bytes of storage. I really need to do something about the performance because with only me in this environment for development it's snail-slow and pages are randomly aborting as described here.

    While other WordFence features are welcome for production, I don't think it's of too much value for this kind of caching since it runs within the same server instance, IP, etc.

    About CDN: After some reading it looks like the free CloudFlare service could be ideal, for my purposes anyway. I use DreamHost which provides an easy switch to enable CloudFlare, and that eliminates the need for the WPCloudFlare plugin. They cache files by extension, including .css and .js, not other dynamic content. For a developer with stable CSS, just stying/theming a site, that should be OK. They have a dashboard with a Developer Mode switch to completely disable caching temporarily, and Purge options if we feel a need. For a live WordPress site the free services include spam comment protection and bot and threat protection, which may allow some sites to eliminate a plugin or two.

    I'm going to create another test environment, starting with just a few required plugins, adding only as required, and following guidelines and options as discussed.

    Thanks.

  • Adam Czajczyk

    Hello Tony!

    Update: I activated WordFence cache but had to turn it off. For some reason the environment was running Much slower and yet the cache logged zero bytes of storage.

    I can confirm this happens sometimes but it's an extremely rare situation and, strangely enough, I'm aware of cases where with identical setups on various hosts W3 Total Cache slowed down the site and Wordfence worked great on one of them and the scenario was quite the opposite on another one. I admit I'm not sure why would that be so.

    You may then want to give a try to other cache plugins instead, however since your host provides you with a caching engine, this may be a best shot here, indeed.

    In case you'd need further assistance, let me know please and I'll be glad to help.

    Best regards
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.