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 2.3.0.2 (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 3.0.0.0 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[678] 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).
## LEVERAGE BROWSER CACHING ExpiresActive On ExpiresByType image/jpg "access 1 week" ExpiresByType image/jpeg "access 1 week" ExpiresByType image/gif "access 1 week" ExpiresByType image/png "access 1 week" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 month" ExpiresDefault "access 1 week" ## END LEVERAGE BROWSER CACHING
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
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Now it starts getting a little more complicated. We are gonna need to change some file loading somewhere to get rid of the blocking Javascript. In this instance I will inline the jquery.js file but there are more elegant ways to resolve this issue without the extra overhead of this inlined code being loaded with every single page.
Locate catalog/view/theme/default/template/common/header.tpl find the following line
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
and replace it with
<script type="text/javascript">
<?php $jq = file_get_contents("catalog/view/javascript/jquery/jquery-2.1.1.min.js"); echo $jq;?>
</script>Now here are the scores, another significant improvement!
84/100 Mobile, 
87/100 Desktop.
Whats left? We just have Optimize Images and Minify Javascript. Lets deal with the minified Javascript first. There are online and offline minifiers for this type of thing but google even does this for you. Look for the link;
Download optimized image, JavaScript, and CSS resources for this page.
This gives a zip file with several optimized resources in for your convenience. Open the zip file and look in the js folder. So lets take the minified version of common.js and substitute that version instead in my cart. Extract that file and rename it to common.min.js and upload it to the catalog/view/javascript folder. Again, we then edit the header.tpl file we edited above, find
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
and replace it with
<script src="catalog/view/javascript/common.min.js" type="text/javascript"></script>
Now the scores are very healthy. Interestingly Mobile and Desktop are now the same as Desktop did not change with that last one, it obviously penalizes that un-minified Javascript for Mobiles only.
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..
Lets start by replacing the optimized images with the ones that google just provided us also. In the zip of optimized files we got the Javascript from, there is also a folder called image with optimized versions of our images in. They will all be in there with their original filenames, just not in subfolders, so we will have to search to find where they all belong. If we look in the media information of the website (Firefox – click in the info icon just to the left of the url bar, then > on the right, More Information and then Media Tab, Chrome – hover over list in Networking Activity in the Developer Tools) we can see the relative paths to copy them into, The default installation has images in:- image/catalog. image/cache/catalog, image/cache/catalog/demo, image/cache/catalog/demo/banners, image/cache/catalog/demo/manufacturers
Replace the files in their native folders and retest..
Result
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.
Leave a Reply
You must be logged in to post a comment.