How to Reduce CPU Load in Wordpress

[robertzo]

If you are somebody that still insists on using WordPress and doesn't want to convert it into static, then this article is for you.

I had noticed that my site loaded pretty slow and I just didn't know why. I also saw that a lot of people are suspended because of high CPU load. I did some digging around and found out some tips to reduce CPU load

1. Avoid these plugins: 73 Slowest Plugins that Use Up CPU. These plugins are resource hungry and use up CPU very easily. Alternatives include Rank Math SEO for SEO, Gutenberg for Page Builders, WPForms for contact forms, Ithemes Security for Security, UpdraftPlus for Backups etc. The only exception for me is Elementor Page Builder since some features can't be found anywhere else. Another exception for people is Jetpack if YOU NEED ALL OF ITS FEATURES (since installing the plugins one by one uses more resources), otherwise it is a bloated plugin.

2. Use Asset Cleanup to disable useless features and scripts. Some plugins like Elementor and Contact Form 7 put unnecessary scripts on your site. To get started first install the Asset Cleanup Plugin (I know it is another plugin but it is extremely lightweight and makes your site faster more than slower) and enable test mode in the settings. Now you an play around with the settings seeing if your WordPress site functions as before (don't worry since it is in test mode the changes are only shown to you).

3. Use a CDN. CDN takes the strain off your servers and makes your website load faster for international users. I currently use 2 CDNs: Cloudflare and Amazon Cloudfront. Cloudflare is very easy and straight forward to configure. I also use Amazon Cloudfront for my images which is free up to 5K views per month. Go to optimole.com and create an account, copy your API key. Then go to your WordPress dashboard and install the Optimole Plugin and paste your API key. Optimole not only provides a CDN but also compresses your images by 90% without loosing the quality.

4. Block Cloudflare bots if you use Cloudflare. Sometimes Cloudflare puts bots on your site (sometimes saying your site had 300000 visitors when you barely have 200) so you would need to block some of them using their firewall or your site would drastically slow down.

Done. Now this is how fast my website loaded with these optimizations: 

P.S. My main website isn't hosted on Heliohost (I use Heliohost to host my other website) but another free host (3001.host). However my website used to load in 3.5 seconds and now is 774ms.

 

[robertzo]

BTW, you can also use Optimole on static sites or non WordPress sites. Create an account, keep note of the API key. Then paste this code in the head tags:

<script type="text/javascript">
        document.documentElement.className += " optimole_has_js";
        (function(w, d){
            var b = d.getElementsByTagName('head')[0];
            var s = d.createElement("script");
            var v = ("IntersectionObserver" in w) ? "_no_poly" : "";
            s.async = true; // This includes the script as async.
            s.src = "https://d5jmkjjpb7yfg.cloudfront.net/v2/latest/optimole_lib" + v + ".min.js";
            w.optimoleData = {
                key: "Your API Key",
                quality: "85",
                lazyloadOnly: "optimole-lazy-only",
                backgroundReplaceClasses: [],
                nativeLazyload : false,
                scalingDisabled: false,
                watchClasses: [],
                backgroundLazySelectors: "",
                network_optimizations: false,
                ignoreDpr: true,
            };
            b.appendChild(s);
        }(window, document));

        document.addEventListener( "DOMContentLoaded", function() {
            document.body.className = document.body.className.replace("optimole-no-script","");
            if ( "loading" in HTMLImageElement.prototype && Object.prototype.hasOwnProperty.call( optimoleData, "nativeLazyload" ) && optimoleData.nativeLazyload === true ) {
                const images = document.querySelectorAll('img[loading="lazy"]');
                images.forEach( function (img) {
                    if ( !img.dataset.optSrc) {
                        return;
                    }
                    img.src = img.dataset.optSrc;
                    delete img.dataset.optSrc;
                });
            }
        } );
</script>

Make sure to replace your key with your API key. You can also change the settings to your liking.

Then on every image instead of using this attribute:

<img src="your image url"/>

Use this 

<img data-opt-src="your image url" width="800" height="600" />

 

[balloons]

I recently mentioned Cloudflare on Discord. I'll be posting a topic about this on HelioNet or adding it to the Wiki in the near future.

[balloons]

Oh, I'm looking at a bad bot looking for Contact Form 7. Its purpose is to send junk mail.
If not, it wastefully causes access to PHP and MySQL. If your WP is using it, remove it immediately.

[balloons]

Of course, don't forget to update WordPress to the newest version as much as possible.
At the same time, PHP will switch to the new version.
In particular, the newer the version of PHP 7, the faster the processing speed. Perhaps PHP 8 will maintain this as well.
It also helps reduce the heavy load on HelioHost and maintain stable operation.
It's a task that happens almost regularly as long as you maintain WP.