How to optimize opencart performance

In this post we will show you how to easily get the maximum performance out of your opencart webshop with just 2 extensions and a little guided work yourself.

You just need 2 extensions.

Extension 1.

With this extension you get maximum performance on the following subjects:

Reduce HTTP Request

Combine stylesheets and javascript files

Minify CSS and Javascript

Remove all unnessecary space and characters from files

Reduce Blocking Resources
(CSS + JS)

Load stylesheet(css) i header and javascript before closing body tag

Use CDN for resources

Upload and deliver static files from a content delivery network

Extension 2.

With this extension you get maximum performance on the following subjects:

Use CDN for resources

Upload and deliver static files from a content delivery network

Optimize images

Compress, resize, reduce without loosing quality

the last 3 things you have to do yourself. but it is rather easy and we have made som guides for you to follow

Enable Gzip compression

Set server to compress all content


Optimize server

for best performance you need to load javascripts at the end of your html code. and for the client to recieve a nicely formatted page at first glance. you need to load the stylesheets et the top of the html code.

RewriteEngine On RewriteBase / RewriteRule ^sitemap.xml$ index.php?route=feed/google_sitemap [L] RewriteRule ^googlebase.xml$ index.php?route=feed/google_base [L] RewriteRule ^download/(.*) /index.php?route=error/not_found [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !.*\.(ico|gif|jpg|jpeg|png|js|css) RewriteRule ^([^?]*) index.php?_route_=$1 [L,QSA] # Display ElFinder thumbnails. Usually access to hidden files is forbidden, exclude .tmb folder from that rule RewriteRule "(^|/)(\.tmb)/" - [L] <IfModule mod_headers.c> Header set X-UA-Compatible "IE=Edge,chrome=1" <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" > Header unset X-UA-Compatible </FilesMatch> </IfModule> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> <IfModule mod_setenvif.c> <IfModule mod_headers.c> # mod_headers, y u no match by Content-Type?! <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$"> SetEnvIf Origin ":" IS_CORS Header set Access-Control-Allow-Origin "*" env=IS_CORS </FilesMatch> </IfModule> </IfModule> # ---------------------------------------------------------------------- # Webfont access # ---------------------------------------------------------------------- # Allow access from all domains for webfonts. # Alternatively you could only whitelist your # subdomains like "". <IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule> # ---------------------------------------------------------------------- # Proper MIME type for all files # ---------------------------------------------------------------------- # JavaScript # Normalize to standard type (it's sniffed in IE anyways) # AddType application/javascript js jsonp AddType application/json json # Audio AddType audio/ogg oga ogg AddType audio/mp4 m4a f4a f4b # Video AddType video/ogg ogv AddType video/mp4 mp4 m4v f4v f4p AddType video/webm webm AddType video/x-flv flv # SVG # Required for svg webfonts on iPad # AddType image/svg+xml svg svgz AddEncoding gzip svgz # Webfonts AddType application/ eot AddType application/x-font-ttf ttf ttc AddType font/opentype otf AddType application/x-font-woff woff # Assorted types AddType image/x-icon ico AddType image/webp webp AddType text/cache-manifest appcache manifest AddType text/x-component htc AddType application/xml rss atom xml rdf AddType application/x-chrome-extension crx AddType application/x-opera-extension oex AddType application/x-xpinstall xpi AddType application/octet-stream safariextz AddType application/x-web-app-manifest+json webapp AddType text/x-vcard vcf AddType application/x-shockwave-flash swf AddType text/vtt vtt AddType text/html .html AddHandler server-parsed .html # ---------------------------------------------------------------------- # Expires headers (for better cache control) # ---------------------------------------------------------------------- <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType text/html "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType text/x-component "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/ "access plus 1 month" ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule> <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None BrowserMatch "MSIE" brokenvary=1 BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 BrowserMatch "Opera" !brokenvary SetEnvIf brokenvary 1 force-no-vary <IfModule mod_headers.c> Header set Connection Keep-Alive </IfModule> <IfModule mod_rewrite.c> Options +FollowSymlinks # Options +SymLinksIfOwnerMatch </IfModule> # ---------------------------------------------------------------------- # Suppress or force the "www." at the beginning of URLs # ---------------------------------------------------------------------- # The same content should never be available under two different URLs - # especially not with and without "www." at the beginning, since this can cause # SEO problems (duplicate content). That's why you should choose one of the # alternatives and redirect the other one. # By default option 1 (no "www.") is activated. # # If you'd prefer to use option 2, just comment out all option 1 lines # and uncomment option 2. # IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! # ---------------------------------------------------------------------- # Option 1: # Rewrite " ->". #<IfModule mod_rewrite.c> # RewriteCond %{HTTPS} !=on # RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] # RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] #</IfModule> # ---------------------------------------------------------------------- # Option 2: # Rewrite " ->". # Be aware that the following rule might not be a good idea if you use "real" # subdomains for certain parts of your website. #<IfModule mod_rewrite.c> # RewriteCond %{HTTPS} !=on # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] #</IfModule> # ---------------------------------------------------------------------- # Built-in filename-based cache busting # ---------------------------------------------------------------------- # If you're not using the build script to manage your filename version revving, # you might want to consider enabling this, which will route requests for # `/css/style.20110203.css` to `/css/style.css`. # To understand why this is important and a better idea than all.css?v1231, # please refer to the bundled documentation about `.htaccess`. # <IfModule mod_rewrite.c> # RewriteCond %{REQUEST_FILENAME} !-f # RewriteCond %{REQUEST_FILENAME} !-d # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] # </IfModule> # ---------------------------------------------------------------------- # Prevent SSL cert warnings # ---------------------------------------------------------------------- # Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent # when your cert only allows # <IfModule mod_rewrite.c> # RewriteCond %{SERVER_PORT} !^443 # RewriteRule ^{REQUEST_URI} [R=301,L] # </IfModule> # ---------------------------------------------------------------------- # Prevent 404 errors for non-existing redirected folders # ---------------------------------------------------------------------- # without -MultiViews, Apache will give a 404 for a rewrite if a folder of the # same name does not exist. # Options -MultiViews # ---------------------------------------------------------------------- # Custom 404 page # ---------------------------------------------------------------------- # You can add custom pages to handle 500 or 403 pretty easily, if you like. # If you are hosting your site in subdirectory, adjust this accordingly # e.g. ErrorDocument 404 /subdir/404.html #ErrorDocument 404 /404.html # ---------------------------------------------------------------------- # UTF-8 encoding # ---------------------------------------------------------------------- # Use UTF-8 encoding for anything served text/plain or text/html AddDefaultCharset utf-8 # Force UTF-8 for a number of file formats AddCharset utf-8 .atom .css .js .json .rss .vtt .xml # ---------------------------------------------------------------------- # A little more security # ---------------------------------------------------------------------- # To avoid displaying the exact version number of Apache being used, add the # following to httpd.conf (it will not work in .htaccess): # ServerTokens Prod # "-Indexes" will have Apache block users from browsing folders without a # default document Usually you should leave this activated, because you # shouldn't allow everybody to surf through every folder on your server (which # includes rather private places like CMS system folders). <IfModule mod_autoindex.c> Options -Indexes </IfModule> # Block access to "hidden" directories or files whose names begin with a # period. This includes directories used by version control systems such as # Subversion or Git. <IfModule mod_rewrite.c> RewriteCond %{SCRIPT_FILENAME} -d [OR] RewriteCond %{SCRIPT_FILENAME} -f RewriteRule "(^|/)\." - [F] </IfModule> # Block access to backup and source files. These files may be left by some # text/html editors and pose a great security danger, when anyone can access # them. <FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|tpl|dist)|~)$"> Order allow,deny Deny from all Satisfy All </FilesMatch> # Increase cookie security <IfModule php5_module> php_value session.cookie_httponly true </IfModule> # Cookie free domain for static components <IfModule mod_headers.c> <FilesMatch "\\.(js|css|jpg|png|jpeg|gif)$"> RequestHeader unset Cookie Header unset Set-Cookie </FilesMatch> </IfModule>
Code language: PHP (php)

You May Also Like

About the Author: admin