Optimizing Magento for Speed and Performance

Magento is a very good ecommerce solution at the same time as they call it ‘an over engineered’ system which is not very light. But can we rule it out from the list of ecommerce softwares we would consider? Definitely not. Reasons are anything from Magento being open source to the community help and plugins’ availability. We help many of our clients with site speed optimization and performance boosting of their webshops. Here we will share some techniques we generally use. Most of these suggestions you can see from Google pagespeed insights.

1. Image Optimization

Make sure all the images used in the site, including banners and product images are saved for web. If you are using photoshop there is an option to save for web and devices. If the product images are high in size that will considerably slow down the site.

2. Leverage Browser caching

Browsers download all assets of a webpage when it loads. Assets like CSS, Images, Javascript etc. Most of these static assetswould be the same for all the pages of that website which the browser need not download again. Using browser caching is, enabling the caching of these files, CSS file for example which will be a single file for the whole website. So the after the first page load the static files will be pulled from the browsers cache making browsing a smooth experience. In Magento we can do this with adding some code to the .htaccess file in the root of the installation.

Browser caching using mod_expires
This is used in most dedicated/vps servers. Add the following code to htaccess and it will enable browser caching.

 <IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType image/jpg "access plus 1 year"
	ExpiresByType image/jpeg "access plus 1 year"
	ExpiresByType image/gif "access plus 1 year"
	ExpiresByType image/png "access plus 1 year"
	ExpiresByType text/css "access plus 1 month"
	ExpiresByType application/pdf "access plus 1 month"
	ExpiresByType text/x-javascript "access plus 1 month"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType image/x-icon "access plus 1 year"
	ExpiresDefault "access plus 2 days"
</IfModule>

Browser caching with mod_headers
This is the method to use when working on a shared server.

<IfModule mod_headers.c>
	<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
		Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
		Header set Cache-Control "public"
	</FilesMatch>
</IfModule>

3. Enable Gzip compression.

Read more about what is Gzip compression. Gzip compression allows the web servers to provide lower size files and there by decreasing the page load time. We need to have mod_deflate turned on in Apache. Add the following code to your .htaccess file in the root and check google pagespeed insights or Gtmetrix to see if its working properly.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

4. Merge CSS, JS if possible or defer loading of Javascript

This is a tricky part in the process which maynot always be solved on the fly. Magento has a feature to Merge CSS and JS (Goto System > Configuration > Advanced – Developer). You can try merging your JS and CSS here. But after enabling each, please go and check if the site works perfectly as before. Also check the add to cart function and checkout functions as that contains javascript operations. The product page has additional JS. Again this is not a 100% fool proof stuff by just enabling the magento settings. Sometimes you might need to go in and manually merge some files and add it back to page.xml layout file if you really want to merge without conflicts with other javascript files.

Another way of optimization is by deferred and/or async loading javascript. In defer loading the javascript will be loaded asynchronously along with loading page elements. So the rendering of dom elements will not be blocked for the loading and execution of javascript. Which increases speed of delivery of the page initially and users will get to see the page quickly. If a javascript needs to be executed before page load it shouldn’t be defer loaded.

We can achieve this by adding a parameter like this -defer to the javascript include handle like below.

<action method="addItem"><type>skin_js</type><name>js/custom.js</name><param>defer</param></action>

5. Minify CSS, JS and HTML

Minifying CSS, JS and HTML will give us additional gain in saving the page size. There are plugins available like here that will help minifying JS, CSS and even HTML. This will remove all the whitespaces in the css and Js files and reduce considerable amount of size.

6. Use a Content Delivery Network

A content delivery network or CDN is a system of distributed servers that deliver web contents or especially static assets like JS, CSS and Images to a user from a geographically nearer location and there by speeding up the delivery. Lets say a user in India is accessing a website hosted in USA, the content delivery will have the latency to communicate with the server placed at a far location. If the website uses a CDN service which has its servers somewhere in India, then the contents will be delivered to the user from the CDN server in India reducing the latency.

Use a CDN for your site especially if you are targetting global consumers or if your server is hosted somewhere far than your target country.

7. Use Varnish caching to improve delivery performance.

Using varnish is an effective way to improve site performance. Varnish is a web application accelerator. You install it in front of any server that speaks HTTP and configure it to cache the contents. It will increase the delivery speed of the website by multiples.

We can help to speed up your magento store to load in less than 3 seconds. Need help implementing any of these? Contact us here!