/blog/index.php?post_id=132
SINGLE POST
[link to all posts]
2017-03-28 20:58:43 - 132
Optimizing an Opencart front page for google pagespeed 100/100
## 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 ONHere 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 CACHINGHere 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
<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..