Opencart Cache System

• Increases the performance of the store.
• Provides both module wise caching and caching of the complete site.
• Creates cache files for the product page of Opencart.
• Creates cache files for various modules (Category, Latest Product, Featured Product, store location, Information, Category Filter).
• It also has an option to create a cache as soon as any customer logs into the store.
• Further, the admin can combine and minimize the size of the files (CSS and Javascript).
• Can enable the load from CDN which will provide a swift retrieval of the file (CSS & JS).
• The admin can compress various files like CSS, Javascript, Html.
• The image compression quality can be set as desired by the admin(from 0-100).
• Creates cache files for the various list(Manufacturer, Category Menu List).
• Creates cache files for Banner Module (SlideShow + Banner + Carousel).
• The admin can set the cache to expire time for each module.
• The store owner can enable or disable the cache of each module separately.
• Also, the admin can display the cache panel on the website along with the countdown which depicts the cache deletion time (for testing purposes only).
• Can optimize the images and convert them into WebP file format.
• Reduces page loading time by using browser cache for the users who are visiting again and again.
• The admin end option to compress xml, xml-xhtml, xml-rss file formats automatically.
• A reserving option is available to serve the already compressed cache content.
• Prefetch and Preconnect can be enabled or disabled by the admin. It’s where you’ll find fonts and icons.
• Admin can allow for preload as enable or disable.
• A database cache supplements your primary database by removing unnecessary pressure on it, typically in the form of frequently accessed read data.
• The defer attribute is a boolean attribute. If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

After purchasing the module you will receive a zip file. After unzipping the files you will receive the following folders- admin, catalog, ocmod, system, and composer.json.

First of all, you need to upload admin, catalog, system, and composer.json folders to the root directory of the website.

Run Commands

After uploading the files, run the following commands in the terminal for installing the composer.json file.

curl -s http://getcomposer.org/installer | php

php composer.phar install

Note: 

1. You have to increase post_max_size to 200M.

2. Please note that if you have not installed the composer then only follow these steps. If you have already installed the composer then you just need to run a single command i.e ” php composer.phar install “

Once you have uploaded the folders then login to admin and navigate to Extensions> Extension installer and upload the XML file. The XML file can be found in the ocmod folder.

On uploading the XML file go to the Extensions > Modification and click on the refresh field.

After that in the admin panel go to System -> Users -> Usergroup and edit ‘Administrator’ and select module-related options for both Access and Modify Permission then save it.

After that you also need to go under Extension > Extensions > Modules install the Opencart Cache System Module like this way.

After installing the module, the admin can click on the Edit button present against the module under Extension > Extensions > Module(s), to configure the module.

Further, the admin can enable/ disable the module and set the default time zone for the module under the setting tab.

Under the Setting tab, the admin can set a time for the cache to expire for each layout and set their status individually. The admin can also particularly clear the cache for each layout.

Combine+Minify Section

Under the Combine+Minify section, if the admin enables the Combine CSS (Combine all CSS files to a single CSS file).

Likewise, if the Minify CSS is also enabled then the CSS files which are combined into a single file will minimize in term of size, reducing the time in opening it.

Disable combine CSS will separate the files as shown below

After enabling the Combine and Minify CSS files, the file will get combined and minimized as shown in the image below.

Load CSS from CDN will load all the CSS files from the CDN. Thus enabling a swift process to load the file.

A content delivery network (CDN) is a system of distributed servers (network) that will load the file and delivers pages to a user, based on the geographic locations of the user, the origin of the webpage, and the content delivery server.

By default, the admin chooses loading for Bootstrap and Font Awesome.

The admin can enable and disable the Combine Javascript & Minify Javascript. If both are ‘enabled’ then it will combine the Javascript files into a single file.

Also, it will minimize the size of the files. This way the pages will load in no time.

When Combine Javascript & Minify Javascript is ‘enabled’ the Javascript files are ‘combined’ and the file size is minimized as shown below

If the Load Javascript from CDN is enabled then the Javascript files will be loaded from the CDN which will faster the loading rate of the pages.

Image Optimization

The admin needs to navigate to the Image Optimization tab as shown in the image below, where the admin configures the fields such as Convert image in webp format, Image Lazy load, Image Compression, Image Compression Quality, etc.

The configurations of the fields under Image Optimization tab is as follows-

Convert Image in .webp Format – By enabling this the file format of all the images will get converted in .webp.

Image:-

• Lazy load –  This will allow the store owner to enable lazy load for the images. This means only the images that are visible on the screen will get loaded.
• Compression: The admin set Enabled against this field. Image compression help reduce the size and storage costs of the images.
• Compression Quality: The admin can define the image compression quality.

Note:

• WebP is an image format like PNG, this will decrease the size of the image without affecting its quality losslessly.
• This feature will work only when the WebP is enabled on the server.

Image optimization is the most important part of any e-commerce web store as the major part of the web stores is covered by the images.

So to increase the performance of the website image optimization is a must.

Browser Cache

This will allow the store owner to enable browser cache. After that, the store owner can add a time period for the browser cache.

Also, this process reduces the page load time for regular visitors on any e-commerce website. It will follow the below format for setting the caching parameters. Here the file type will change accordingly.

Note:

• One can check caching parameters by navigating to .htaccess file.

# Images
ExpiresByType image/jpeg “access plus 1 years”
ExpiresByType image/gif “access plus 1 years”

For Videos the code will be like –

# Vedios
ExpiresByType video/mp4 “access plus 1 years”

For JavaScript the code will be like –

# Javascript
ExpiresByType text/javascript “access plus 1 years”

For CSS the code will be like –

# CSS
ExpiresByType text/css “access plus 1 years”

For others, the code will be like –

# Others
ExpiresByType application/pdf “access plus 1 years”
ExpiresByType application/x-shockwave-flash “access plus 1 years”

Compression Section

The admin can enable/ disable the Compression of the files.

CSS Compression – The admin can enable/disable the CSS file compression which will reduce the file size.

JS Compression – Enable/disable the Javascript compression of the files

HTML Compression – The admin can compress the Html files by enabling the compression.

Pro Settings

The Pro Setting will be visible as shown in the image below.

Image Compression – The enable/disable compression of the images for swift retrieval.

XML:-

• Compression – By enabling this the store owner can compress all the XML file formats.
• xhtml Compression – This will help in the compression of xml-xhtml file format.
• rss Compression – This will compress the xml-rss file format.

Reserving

Serves the Compressed Content –  The store owner can enable this by using the already compressed files again and again.

• If disabled,  then the file needs to be compressed before using it every time.

Full Page Cache

The admin can clear the full page cache by clicking on the Clear Cache button.

Page Cache Status – The admin can enable/disable the full Page cache status.

Expiry Time –The admin can set the expiry time(in seconds). Once the time is complete, it will clear the cache and reload the page.

Db Cache –  A database cache supplements your primary database by removing unnecessary pressure on it, typically in the form of frequently accessed read data.

Defer JS – The defer attribute is a boolean attribute. If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

NOTE – We’ve simply deferred the static scripts that aren’t required at page load time.

Allow Prefetch and Preconnect – Admin can enable or disable Prefetch and Preconnect. It is for fonts and icons.

Allow Pre Load – Admin can allow for preload as enable or disable.

On Customer Login – The admin can set the cache to save whenever the customer login by enabling the Customer Login

Ignored Route – The admin can add the routes of the pages. This route will not cache the page.

For example:- If the admin does not want to save cache for the order page, then the admin can set the route for the Order list(account/customer partner/order list).

Cache Panel

After enabling the cache panel on the frontend under this tab, the admin can assess the cache panel functionality ( for testing purposes only) and configure its property (such as panel position, color, and font).

The Cache Panel is visible to the customers as shown in the image below.

The following elements are visible on the Cache Panel-

• Cache Countdown – It is the countdown on the front end that shows the time after which the cache will clear automatically.
• Clear Cache – A Clear cache button is also present on the frontend using this the customer can clear the cache instantly.

Thereafter, theadmin can check cache system information and cache file information under the information tab.

Here the admin can click on ‘Cache System info’ to check Cache Driver Type, Total cache file size, Total number of cache files, Global Expire Second, and Expire DateTime.

The admin can click on the ‘cache file info’ to see the file path of the layout cache files.

Under the Clear Cache tab, the admin can clear the cache of the Opencart store for various options (Ocmod, Long File, Image, All Store).

In our Live Demo home page, you can check the featured and latest product layout. The latest product layout contains 500 products and once it saves on the home page with more than 500 products, it will open lightning fast.

On the category page, you can check the category menu list, Category page, product, and banner layout.

On navigating to the category Fashion->Dresses, one can find 3989 products that belong to that respective category.

Also, the page shows 100 products in one pagination. Once it is save in the cache the page loads lightning fast.

In the same way, the product page opens lightning fast once it is saved in the cache.

The information module and the pages of the information module uploads through caching. For e.g. you can open the contact us page.

Website Performance Test

Optimizing a website is extremely essential, and OpenCart Cache System is one solution to solve your website performance issue.

This module adds on to create a cache of various pages and layout of your OpenCart store, which in turn helps boost your site performance scoring.

Moreover, with the integration of the OpenCart Cache System, one can experience a reduced bounce rate and thus a better ranking in the Search Engine Result Page.

Given Below are Performance Reports of an OpenCart website.

Performance Test Report: as on the GTmetrix site

Web Page Performance Test Report

That’s all for the Opencart Cache System module. If you still face any issues, feel free to add a ticket and let us know your views at HelpDesk Support to make the module better.