Google Page Speed

[ecomshopsite]

I have been using a few google tools to check the page speed of the site as it has slowed down and is impacting our s.e.o - free traffic.

https://developers.google.com/speed/pagespeed/insights/

See results here:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.pharmacy-nz.com&tab=mobile

I fixed the usual suspects:
Minified the css file
Optimised images and javascript files.
Made sure most of the files had caching settings but I am stumped on the part that is still red regarding the javascript and css

Any advice on how to fix this so the website loads faster.

Background
I am using Bootstrap Shopsite Template.


"Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
None 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.
Remove render-blocking JavaScript:
https://www.pharmacy-nz.com/publish/bootstrap-ss.js
https://www.pharmacy-nz.com/media/en-NZ/javascript/jquery/jquery.js
https://www.pharmacy-nz.com/…dia/en-NZ/javascript/jquery/json2.min.js
Optimize CSS Delivery of the following:
https://www.pharmacy-nz.com/publish/bootstrap.min.css
https://www.pharmacy-nz.com/publish/bootstrap-ss.css
https://www.pharmacy-nz.com/publish/bootstrap-habits.css
https://ajax.googleapis.com/…eryui/1.8.3/themes/blitzer/jquery-ui.css"


Any help or advice would be greatly appreciated

[ShopSite Lauren]

Lucy, the fact that your website is already at almost 90% for desktop and in the 70's for mobile is awesome. I use Google's speed test just about every day on websites all over the place and on many different platforms and rarely do I see scores that high. They are only ever even close to there if the merchant has hired a company (or done the work themselves if they know how) specifically to improve that. So good job.

That said, there are a few easy-ish changes you can make, and some that would require a lot of work (or would not be worth it) in order to change.

Easiest first:

blitzer/jquery-ui.css
The CSS file that is part of your search module can be moved to the bottom of the page (you can talk with your host about how to do this). This file is only used for formatting the search suggestions for a customer typing in the search bar. It is uncommon for customers to start typing in a search field before a page is done loading, so this can easily be loaded after the rest of the page loads.

jquery/json2.min.js
The JSON file is also a small file, and its main use is for real-time inventory display. If you are not displaying the "in-stock" "out of stock" notifications on product pages, you can likely remove this without any issue. To remove it you will need to first add an include file called "Head" into ShopSite (Merchandising > Custom Templates > Includes). In that file you will want to place the following code:

Code: Select all

<script type="text/javascript" src="//www.pharmacy-nz.com/media/en-NZ/javascript/jquery/jquery.js"></script>
<script type="text/javascript">var ss_jQuery = jQuery.noConflict(true);</script>
</head>

Next, in your page and product templates (Bootstrap-Page.sst and Bootstrap-Tabs.sst), you will want to replace </head> with [-- INCLUDE Head --]. Then regenerate (Utilities > Publish > Regenerate).

Other 3 CSS files
You could combine these into a single CSS file. OR (what would be better but more time consuming) would be to leave them as just 2 files, taking the CSS for anything in the header, navigation, carousel and top of the page on category and more information pages, and placing that into the bootstrap-habits.css file. Then putting everything else in the bootstrap.min.css file and moving that to the bottom of the page. A word of caution here, make sure you don't mess up any responsive design aspects, so check your site on multiple devices when you do this. CSS is often in a particular order so that is behaves a particular on various screen sizes.

Other 2 JavaScript files
You don't want to move the jQuery.js file, even though if you do, this will produce the biggest impact for the page speed. This file is used for many elements on the page including the navigation, search module, cross sell items, carousel on the home page, product image zoom, etc. This is such a widely used file you want to leave it in a place it can be used widely .
The bootstrap-ss.js file could be moved, but would require re-writing some elements (such as the navigation feature) so that even though this file is loaded after the page loads, the navigation still looks correct on mobile and desktop (I do this with a cookie or localStorage, or even just setting the breaking point with CSS since you know your own store's navigation breaking point).

Hope that helps.