About Google Pagespeed Insights and Opencart
Out of the box, Opencart 2 is mobile friendly and is one of the better performing shopping carts out there, but since page speed is increasingly being taken into account in google ranking, it makes sense to optimize it as much as possible and of course to make most efficient use of resources.
There are various elements to page speed according to google, plus there are other factors rated highly by other page speed analysis websites, but we are going to concentrate on googles criteria for obvious reasons!
Also, this articles is based on a standard LAMP setup (Linux, Apache, Mysql, Php) and cPanel based hosting account although for other setups, much can be reused.
Google Pagespeed Insights Ranking Criteria
For an overview of the aspects that google uses to rank your website page speed, please see the following article, but I cover most of it as I go through..
Optimizing an Opencart Website front page for Google
So lets go! We are starting with a fresh install of Opencart 18.104.22.168 (the results are virtually identical on all 2.x versions) on a shared server with caching switched off, default theme.
* UPDATE – This method has also been tested with latest verision 22.214.171.124 alpha 1 with the same results!! There are a couple of changes though as version 3 uses a twig template system so I will post an update after it gets officially released! *
We are using Google Pagespeed Insights website to scores although extra functionality can be achieved through API access.
Here are the lousy scores for our initial install with no optimizations. (I actually switched off some optimizations that are normally enabled by default on my hosting so as to better show the improvement of each stage but also because certain other optimizations can conflict with each other. Your initial results may be better or worse than these!).
58/100 mobile, 64/100 Desktop.
7 out of the 10 criteria are flagged up as problems, the 3 that pass at this stage are:-
Avoid Landing page redirects
Self-explanatory, you are simply visiting a page so not redirects should occur. If you add www. redirect or https in the future, ensure you update all incoming links and sitemaps to the full new URLs to avoid redirects as much as possible.
Prioritize Visible Content
Fortunately on the default Opencart theme this is taken care of already by the default structure. Watch out in future for poorly written themes or extensions that break this or other rules.
Reduce Server Response Time.
By default google expects a page to start producing output within 0.2 seconds. A good host should achieve this, although I know even some hosting companies advertised on Opencart website fail this task miserably! As your store grows and more db queries etc. are required to render a page, this will be more likely to flag up as an issue. You may consider optimizing db tables and implementing a caching solution to reduce this issue.
The issues we need to fix.
So, working through the 7 issues that are flagged as a problem.
The top of the list as a priority to fix is Enable Compression so lets add a few lines to .htaccess and see how it improves. There are numerous combinations of this code but this one seems to allow for old browsers and most importantly exclude (already compressed) images. Source (http://stackoverflow.com/questions/2835818/how-do-i-enable-mod-deflate-for-php-files)
## SWITCH COMPRESSION ON <IfModule mod_deflate.c> SetOutputFilter DEFLATE <IfModule mod_setenvif.c> # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0 no-gzip # MSIE masquerades as Netscape, but it is fine # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary </IfModule> <IfModule mod_headers.c> # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule> </IfModule> ## END SWITCH COMPRESSION ON
Here are the new results now
68/100 Mobile 76/100 Desktop.
That’s a huge improvement already and the warnings are now orange instead of red!
Wait, we also just got rid of Minify HTML & Minify CSS. Of course because they are all now being transferred in compressed form, even though they have not been minified, Google is now happy with these! So we are down to 4 issues remaining.
Next on the list is Leverage browser caching, lets add a few more lines to .htaccess (there are various variations of these lists but I have tweaked to satisfy google, you can adjust for your own preference).
Here are the scores after that optimization
77/100 Mobile, 84/100 Desktop.
Another huge improvement and we are already about half way there.
Next we’ll deal with
Locate catalog/view/theme/default/template/common/header.tpl find the following line
and replace it with
Now here are the scores, another significant improvement!
84/100 Mobile, 87/100 Desktop.
and replace it with
87/100 Mobile, 87/100 Desktop.
A slight improvement on the mobile so that just leaves the Optimize Images now.
The next (final) step is a little more complicated..
Replace the files in their native folders and retest..
We made it! – Didn’t we?
What’s that I hear you say? What about the rest of the website? That’s cheating! what about other images?
Well, the title of the article does say the Front Page and i’ll be honest now, this article alone is not going to get every single dynamic page on your Opencart website 100%, especially if you’ve made modifications. But most of what i’ve shown already will apply to the rest of your website so its all probably a significant improvement on what it was previously. But you’ve made a fair point, so i’m following this with another article to see what else we can do and what else we can consider for getting the rest as good as possible.