This blog post is part 1 of 3 of a series which explains how you can achieve maximum performance for your OpenCart store with the help of NitroPack by iSenseLabs.

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. If you do not have NitroPack purchased, feel free to access the product demo page to follow along:

http://nitropack.demo.isenselabs.com/admin/index.php?route=tool/nitro

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. The information is distributed in the following categories:

• Optimize images
• Leverage browser caching
• Enable compression
• Eliminate render-blocking JavaScript and CSS in above-the-fold content (discussed in part 2)
• Reduce server response time (discussed in part 2)
• Prioritize visible content (discussed in part 2)
• Minify JavaScript (discussed in part 3)
• Minify CSS (discussed in part 3)
• Minify HTML (discussed in part 3)

​

​Optimize images

For best user experience your website images need to load as fast as possible. In order for this to happen, the images need to be optimized for web transfers. This means that your images must occupy the least amount of disk space, while at the same time have the highest possible quality.

Google PageSpeed reports the images which can be further optimized. When we talk about images, we will separate them in two categories - Local and Remote. Both categories require different approaches for optimization.

Local images

They are located on your web server. In OpenCart such images are typically in the folders /image/ and /catalog/view/theme/<theme>/ but they can be in other locations as well. You will recognize the local images by their domain name - it must match the domain name of your website.

How to optimize: Local images can be easily processed with the NitroPack image optimization tool. This will losslessly reduce the size of your images. In your OpenCart installation navigate to Admin > Nitro > Settings > Image Optimization to use the NitroPack smusher.

Remote images

These images are located on remote web servers. Typically such images are required by third-party libraries (like Twitter, Facebook, etc.), or if you are using a CDN service.

How to optimize: Since these images are located on third-party servers, they must be optimized manually (if you have access to them), or you may consider removing the third-party plugins which require them.

Leverage browser caching

When customers access your website, they receive CSS, JavaScript and image resources. In most cases your OpenCart store will have the same collection of resources throughout the website. In this case it makes sense for your user browsers to cache these resources in order to save web traffic.

Google PageSpeed is able to detect which resources can be cached on your customers’ browsers.

Local resources

These are resources located on your web server. In most cases these are static files like .css, .js, .png, .jpg, etc. You will recognize the local resources if they start with the domain name of your website.

How to optimize: NitroPack allows you to set up browser caching, which instructs your customers’ browsers to cache the resources locally on their hard drives. In OpenCart navigate to Admin > Nitro > Cache systems > Browser cache and configure browser caching to your preference.

Note: In order for this option to work, NitroPack must have write permissions to your .htaccess file. This also means that you must run Apache web server (or a web server which can use .htaccess files). If you are using NGinx server, the browser caching rules must be set manually.

Remote resources

These are resources located on remote web servers. Typically such resources may appear from third-party libraries (like Twitter, Facebook, etc.), or if you are using a CDN service.

How to optimize: Since NitroPack does not have permissions to edit the browser caching settings of these resources, this must be done manually. If you do not have access to the third-party resources, consider removing the third-party libraries which require these resources.

Enable compression

Compression means that resources get “zipped” before they are transmitted to the browser. The browser first “unzips” the resource before processing it.

Google PageSpeed Insights detects which CSS, JavaScript and HTML files can be optimized by enabling compression.

How to optimize: NitroPack allows you to set up compression for CSS, JavaScript and for your web page. In your OpenCart store navigate to Admin > Nitro > Settings > Compression and configure the CSS, JavaScript and HTML compression to your preference. We recommend enabling compression for all resources with a compression level 4.

Note: In order for this option to work, NitroPack must have write permissions to your .htaccess file. This also means that you must run Apache web server. If you are using NGinx, the compression rules must be set manually.

Compression requires the NitroPack page cache to be enabled. Enable it from Admin > Nitro > Settings > Cache systems > Page cache.

Final words

We hope you found the above tutorial useful. Stay tuned for Part 2 and Part 3 which will cover:

• Eliminate render-blocking JavaScript and CSS in above-the-fold content (discussed in part 2)
• Reduce server response time (discussed in part 2)
• Prioritize visible content (discussed in part 2)
• Minify JavaScript (discussed in part 3)
• Minify CSS (discussed in part 3)
• Minify HTML (discussed in part 3)