7 Simple Step for optimizing your Magento site 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 software 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 page speed insights.

1. Image Optimization

Make sure all the images used in the site, including banners and product images are saved for the 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 assets would 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, the CSS files for example which will be a single file for the whole website. So after the first-page load the static files will be pulled from the browser's cache making browsing a smooth experience. In Magento, we can do this by 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 thereby 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 page speed insights or Gtmetrix to see if it's 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 of the process that may not 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% foolproof 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. This increases the 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 a 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 content or especially static assets like JS, CSS, and Images to a user from a geographically nearer location and thereby speeding up the delivery. Let's say a user in India is accessing a website hosted in the 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 that 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. The varnish is a web application accelerator. You install it in front of any server that speaks HTTP and configures 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!

Originally published at https://www.2hatslogic.com on May 31, 2017.