How to nail Google Pagespeed score in OpenCart [Part 2 of 3]
This blog post is part 2 of 3 of a series which explains how you can achieve maximum performance for your OpenCart store with the help of NitroPack by iSenseLabs.
If you have not read part 1 of this article, you can find it here.
NitroPack is among the most feature-rich optimization engines for OpenCart. In this blog post we will cover how you can use NitroPack and other tools to increase your Google PageSpeed score.
Google PageSpeed Insights is a service created and provided by Google. You can use it to inspect the performance of specific pages from your website. PageSpeed provides you with detailed information how to optimize your website.
In part 1 we talked about how to increase the following parameters, which are reported by PageSpeed Insights:
In this blog post we will cover the following topics:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Reduce server response time
- Prioritize visible content
Let’s jump in!
Eliminate render-blocking JavaScript and CSS in above-the-fold content
The above-the-fold content is the top-most content of your website. In other words, this is the content which is visible on the browser screen after the page loads.
If PageSpeed reports that you need to eliminate render-blocking resources in the above-the-fold content, this means that there are .js and .css files somewhere in your <head> tag, which are slowing down the website loading. This means that in order to resolve this point, the .js and .css files need to be moved somewhere to the bottom of the page.
Optimizing this point could lead to bugs on your website if you are not careful. For example, there might be a theme-specific piece of inline JavaScript code somewhere on your website, which relies on code in your <head> tag. As soon as you move your .js files from the <head> tag to the bottom of the page, the theme-specific code could break.
How to optimize: NitroPack has an experimental feature which can automatically detect .js and .css files, as well as inline JavaScript and CSS code. Note that this experimental feature has been developed and tested on a standard OpenCart store, as well as most popular OpenCart themes, but we cannot guarantee that it will be compatible with your store. To use the experimental features, in your OpenCart installation navigate to Admin > Nitro > Settings > Minification. Use the following configuration:
- Use Minification > Enabled (this is a global switch for the Minification)
- Combine CSS files > Yes (this will combine the detected CSS resources into a single file)
- Improved CSS detection algorithm > Yes (this will detect inline .css files and <style> tags)
- Parse import statements > Yes (if some of your .css files have @import, it will be parsed and included in your final .css file)
- JavaScript files > Combine JavaScript files > Yes (this will combine the detected JavaScript resources into a single file)
- JavaScript files > Improved JavaScript detection > Yes (this will detect inline .js files and content of <script> tags)
- JavaScript files > Move detected JavaScript to > Bottom of page
- JavaScript files > Defer detected JavaScript > No/Yes (by preference)
If your website appears broken after applying the settings above, this most probably means that some of the settings are incompatible with your theme. Try to disable one or all of the experimental settings and see how this will affect your website.
Note: The experimental CSS and JavaScript detection feature of NitroPack does not guarantee that PageSpeed will give you the highest score for this point. Depending on your theme and installed modules, NitroPack may not be able to collect all resources and minify them properly. In such cases the best option is to manually modify your HTML.
Reduce server response time
This point means that your server takes too long to return the HTML contents.
How to optimize: This point will be optimized to the maximum if you enable the NitroPack page cache. Page cache optimizes your website response speed by serving already cached versions of your website pages. Enable page cache from the following setting:
Admin > Nitro > Settings > Cache systems > Page cache > Page Cache Status > Enabled
Note: In order for your server to serve cached pages, these cached pages first need to be created. Usually this is done by accessing a page for the first time. The first time you access a page, NitroPack will save the HTML content, and serve this same content on each subsequent page access. NitroPack allows you to generate cached content by simulating first page visits with the help of pre-caching.
Admin > Nitro > Settings > Cache systems > Page cache > Pre-cache sitemap pages
Make sure to run the PageSpeed tests after you have generated a cached version of your website pages.
Tip: You can check if your website is serving cached pages if there is a response header Nitro-Cache: Enabled. Here is how to check this header with the Google Chrome developer tools:
If the header Nitro-Cache: Enabled is not visible, try to clear your wishlist and your cart. If you are logged in as a store customer, you will need to logout. Afterwards refresh the web page twice. The reason for this is that page cache is by design disabled when you have items in your cart, your wishlist, or if you are logged in as a customer.
Prioritize visible content
If PageSpeed reports this point, it means that some of your resources (CSS or JavaScript) are preventing the page content to display right away.
How to optimize: NitroPack allows you to defer the NitroPack-generated JavaScript files. Defer means that your JavaScript files will be executed after the web page finishes loading. Most browsers load deferred JavaScript at the end, which helps to prioritize visible content. To enable the NitroPack defer, use the following settings in Admin > Nitro > Settings > Minification:
- Use Minification > Enabled (this is a global switch for the Minification)
- JavaScript files > Combine JavaScript files > Yes (this will combine the detected JavaScript resources into a single file)
- JavaScript files > Improved JavaScript detection > Yes (this will detect inline .js files and content of <script> tags)
- JavaScript files > Defer detected JavaScript > Yes
Note: Enabling defer may not be compatible with your theme. If your website appears broken after enabling defer, then this means that a manual intervention will need to be done to prioritize the visible content on your website.
Final words
We hope you found the above tutorial useful. Stay tuned for Part 3 which will cover:
