As well as optimizing the images, we minimize and concatenate the Javascript and CSS files.
Shopify does some minification natively, but it still leaves opportunities to improve the page-load speed.
This is because Shopify does not minify the liquid files which contain the theme settings. And that’s where SpeedBoost Ninja comes in. Our app minifies the liquid files to improve your store’s page-load speed.
However, your store may have some files which cannot be minified due to the code structure, in this case, SpeedBoost Ninja skips those files. But ideally your store’s code should be clean, other third-party apps or customizations are usually the cause of bad code.
Also, we can’t minify inline javascript or CSS. This occurs where they are specified in the theme files instead of separate javascript or CSS files (inline styles are not good practice).
The concatenation works like this; each file which is specified in the code (image, javascript or CSS) creates an extra server request which slows your site down.
So we concatenate the CSS and javascript files into one CSS and one javascript file – decreasing the number of server requests which makes the website load faster.
However – there are 2 cons:
1) This is pretty risky functionality which may break your CSS or javascript if the code doesn’t follow best practice. So, if you get issues, please revert your theme from the backup, turn off the concatenation options in the preferences and run the app again.
2) Your Google PageSpeed Insights score may go down – this does not mean that your website has become slower.
Google scores your site for each of the optimization options, for not obeying the recommendations Google takes off the points.
One of the optimization recommendations is not to have CSS/JS files at the beginning of the HTML file, because it blocks rendering (you do not see the page until it completely loaded). Google prefers users to see some content while the website continues loading. In this case, when the CSS/javascript files were on top, and they were pretty massive, the concatenation process creates two single files (one for javascript one for CSS) which are huge, so it takes more time blocking rendering, and the points which were given by Google for concatenation are less than the points which were taken off because of render blocking.
So, on one hand, you get fewer requests to the server, but on another, you get more time render blocking. However, the overall page-load time may be lower because of the image compression and because there are fewer server requests.
In cases when you have the initial score +/- 50, and after you run the app you did not see significant improvement, you have to check following:
Were your images too big? We are optimizing your images very carefully so as not to lose too much quality, so if you had super big images, they might not have been optimized as much as possible. If your images are ok, try to restore your theme from the backup and run the app again without concatenation.
If nothing improves, your theme might not be coded to best practice standards, or maybe another third-party app is causing the issue.
Why the score goes up and down sometimes
SpeedBoost Ninja shows the overall score from the Google PageSpeed Insights tool.
Unfortunately, Google doesn’t give us a breakdown of how the score is calculated. There are many things which can influence the score:
- The connection status of the Google servers, even Google servers may have some issues from time to time.
- Any connection issues or traffic spikes with Shopify’s servers.
- Technical issues with the Shopify servers (i.e. GZip being turned off for a short time by Shopify’s tech team.)
- Technical issues with external services; modern themes use a lot of external services. which take time to load, and all of them are influencing your score. For example, we’ve seen a lot of issues with GetResponse, sometimes it takes up to 15-secs to load, which will push your store’s score into the red zone.
How to determine if your store has these issues:
First, re-run the optimization in 1-2 hours, usually Shopify/Google will fix any server issues pretty fast, otherwise they notify that there is an issue on their side. However, some of the third-party services may have the permanent issues (like GetResponse does), in this case you need to get technical support to review your website.