I was having website browsing problems with slow page loads, Gateway Timeout errors, and very slow and non-functioning WordPress admin post and page updates.

After clinically switching off non-critical plugins, other plugins I thought may be causing the CPU over usage and switching themes to the WordPress twentysixteen and twentyfifteen themes, I eventually realised that is was the theme causing the issue.

So I re-enabled all the plugins that I was originally using and left the twentysixteen theme active for an hour or so until the next update of the CPU usage graph in the hosting cPanel.

...And yes, the most recent CPU usage reduced.

As I wanted to use the main theme, I switched it on and it came to mind that it may be the zoom animation on the page headers and blog archive entries that were the only CPU intensive aspects of the theme.

I thought that the browser and hence the device hardware the browser was running on that would be "doing the work " to perform the animation.

However, after researching online, I found an article on CSS-TRICKS that seemed to have the solution.

It seemed that I was using CSS code that has three ways of animating one zoom effect and the three seemed to be trying to cater for different browsers.

Here is the main excerpt of the CSS animation code that is relevant:

.post img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.page-image {
  -webkit-animation: zoominout 50s;
  animation: zoominout 50s;
}

On the CSS-TRICKS article, it seemed that only the simple "transform: scale (1.1);" and "animation: zoominout 50s;" are required.

So, I commented out all but the simpler code for the CSS zoom animation code sections, re-saved the CSS, and tested the site on Chrome, FireFox and Internet Explorer.

The animations related to the CSS I had updated worked on all three browsers.

I also reduced the length of zoom animations in seconds throughout the code so that zoom animations ended quicker.

With the above code, the changes look like this:

.post img {
  /* -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1); */
  transform: scale(1.1);
}

.page-image {
  /* -webkit-animation: zoominout 50s; */
  animation: zoominout 20s;
}

I then went through all the CSS code and commented the code that was not required, re-saved the CSS, and tested all the zoom animations related to the code I had updated, and they were all OK.

If your site has high CPU time usage and has image animation effects that may use CSS, then try the above technique to see if it helps reduce the CPU time usage.

Remember to keep a backup of the original CSS code.

Best wishes.