Optimizing Opencart website for Google Pagespeed

Optimizing your Whole Opencart Website for Google Pagespeed

This article assumes you have read and applied my previous article on optimizing your Opencart front page for Google Pagespeed

Optimizing an Opencart front page for google pagespeed 100/100

So now we are going to see what else we can do to optimize the rest of the website.

Lets try a category page to start. On the demo we’ll try the Desktops category (Show All Desktops)

Aargh! Here’s the results

74/100 Mobile,  97/100 Desktop.

What went wrong? Well on both Mobile and Desktop, its showing Optimize Images so we know that there are some more images that need optimizing. But by Desktop results that must only account for 3%. Lets quickly take care of that by doing the same process as before, replacing the images on the site with the optimized images provided by Google.

75/100 Mobile,  100/100 Desktop.

Desktop improved by 3% but Mobile only improved by 1%? Lets not worry about that, but now we know that the problem that’s remaining on the Mobile site that its really complaining about is

Eliminate Render-Blocking Javascript and CSS in the above-fold content

Here is the extra info it gives.
“Your page has 3 blocking script resources and 6 blocking CSS resources. This causes a delay in rendering your page.
Approximately 40% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML”

Wow that’s 9 resources, no wonder its complaining.

More to follow..