Why do I get a lower PageSpeed score after I "eliminate render-blocking resources"?

Question

I'm brand new to PageSpeed and trying to get a grasp on the various aspects it wants me to optimize. Is there a guideline I can follow, such as what code can be removed, deferred, etc.? I am by no means a developer.

My score fluctuates with each .js file I defer. Sometimes it gets better, sometimes it gets worse. This doesn't make sense to me and is rather frustrating.

I expect the PageSpeed score to improve, but instead it fluctuates and sometimes gets worse with each .js file I defer.

Answer 1

While PageSpeed shows some interesting statics such as first contentful paint, time to interactive etc. It's hard to figure out what is going under the hood without looking at a timeline of the page loading process. The screen shot below shows how your page loads in google chrome. You can view this yourself by following this guide: https://developers.google.com/web/tools/chrome-devtools/network/

One of the major holdbacks is your server response time, the server takes at least 2 seconds to handle the request for the website, which is quite high and leads me to believe that you maybe on a cost effective plan on hostmonster. In contrast StackOverflow.com responds in 300ms. An easy way to benchmark your webhost is by running this test on a fresh wordpress installation. It will tell you whether an inefficient wordpress setup on your part is causing the delay or whether the host is inherently slow at serving php. I have a feeling that there is significant bloat in your php code causing this.

Next you have a css file that takes 880ms and is 200kb compressed but 1.9Mb uncompressed (shown as 1 860 013 bytes in the coverage tab) This is extremely big and should not exceed 1Mb even on the largest of websites. 98.6% of your CSS file is unused. It is not uncommon to have over 90% unused CSS when using a generic framework, but generic frameworks never have a css file that is close to 2MB. A css bundle is below 500kb on most websites. Not only does this add to the download time, it also adds to the time required for the browser to parse that file and render the page.

There's also the header image which is 423KB in size an takes 1.3s to download. Usually, an image of that resolution can be compressed to less than a 100kB.

The red line on the water fall indicates when the page is considered to be fully loaded. The oversized header is adding a lot to it. While the entire process of loading is pushed back by 2.2s due to the server response time. You'll see that the script loading times are marginal compared to the effect that these two have. This may by why you observed an indifference in loading times when you changed the tags to defer.

To summarize, look into why it takes 2+s for the server to respond, clean up your CSS. Aim for half the size. Compress your header image. Aim for around 100kb. Once you fix these, you can look into deferring scripts to achieve the optimal loading time.