318: Using web browser caching in OpenCart
Basically, all the files your site uses (jpgs, gifs, css, js, etc) need to be able to tell visitors computer how long they should keep them for before checking for a new file. This is called web browser caching. If we don't specify the browser a "cache time" then it will get a new copy of the file every time they visit the site which means more bandwidth usage and increases your page load speeds.
Google Page Speed recommends that files are cached at least a month. If you don't make many changes, set it to at least a month. However, if you make changes to your site or are still working on developing the site, you may want to set your JS and CSS files to something lower such as 24 hours. However, in the example below we have set the caching of all files to 5 weeks.
To leverage web caching you will have to add some lines of code to your .htaccess file in the root folder of your OpenCart installation.
# Turn on Expires and set default to 0 ExpiresActive On ExpiresDefault A0 # Set up caching on media files for 5 weeks <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresDefault A3024000 Header append Cache-Control "public" </FilesMatch> # Set up caching on media files for 5 weeks <FilesMatch "\.(gif|jpg|jpeg|png|swf)$"> ExpiresDefault A3024000 Header append Cache-Control "public" </FilesMatch> # Set up 5 week caching on commonly updated files <FilesMatch "\.(xml|txt|html|js|css)$"> ExpiresDefault A3024000 Header append Cache-Control "proxy-revalidate" </FilesMatch> # Force no caching for dynamic files <FilesMatch "\.(php|cgi|pl|htm)$"> ExpiresActive Off Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" Header set Pragma "no-cache" </FilesMatch>
If you need further assistance please feel free to ask a question on our support center.
Thank you for your feedback!