Magnify Your Magento Experience with these 10 Speed Optimisation Techniques

Magento is a hugely versatile platform known for its robust features and scalable performance. You can virtually pull almost any online store straight out of the box with Magento. But as your business grows and a lot of active shopping cart rules or stores get added with time, you will gradually experience what we call a slow site speed.

Nobody likes a slow website. It kills your online business half-way.  It’s like standing in a long queue waiting for your turn to reach the counter.

If that’s the case, how can you solve the problem after measuring your site’s user experience only to discover a slow site speed?

Here is a quick guide on how to overcome the problem and 10 speed optimisation techniques to help.

Common Problems and Speed Optimisation Tips

The problem, in this case, could arise from PHP. Magento offers a wide range of tools that help to run an online store with flexibility and ease. However, along with the advantage, comes a disadvantage in the form of PHP.

Executing a single line of PHP code does take a finite amount of time. Magento has millions of lines of code in total, so you can imagine how long it can take to build and deliver an entire website into a browser.

#1 – Use Specific Hosting Servers

Your site’s operating speed can largely be affected by the type of hosting solution that your store runs on.

While this is not noticeable to the naked eye, you will realize it upon clicking on a link in the front-end or pressing ‘save’ in the admin. An unsuitable hosting server can take a website page to load and process slower. This appears to be a frequent issue, even when Magento has been set up correctly but the same attention has not been given to the server for accommodating the demands of the platform.

Do not choose some cheap shared hosting service because they tend to get overcrowded with other people using the same server. So you might end up sharing the same resource between hundreds of other users.

Users are recommended to use a hosting server that’s specifically designed to help your store get the best out of Magento. This may cost a bit more but will be much better for your website and the long-term

#2 – Full Page Caching

The second area that you should look into is Magento Caching since that can make a big difference when your website page load matters.

A full page cache will not improve the PHP performance of your website. However, it will drastically reduce the execution of the number of PHP code lines of a page before delivering it to the browser.

Magento Full Page Caching stores the most recent versions of a primary page on the server.

The method reduces load, improves server response time and helps to increase sustainable traffic flow to a website.

You can find this standard feature if you are using Magento Enterprise. Check whether it is enabled in the admin panel. If not, simply go to ‘System’ and click on ‘Cache Management’. You will find it enabled at the bottom of the page.

If you are not using Magento Enterprise, then there are few page caching extensions that you can use for your Magento website instead. Try installing full page cache extensions like –

• Full Page Cache Pro
• Zoom Full Page Cache

There are many others available. Do check them up online before purchasing one for your Magento website.

#3 – Use PHP Accelerators

PHP Accelerator is another form of caching. You can use PHP Accelerators for caching PHP scripts into compiled state. Some of the PHP Accelerators that you can use are as follows –

• Xcache
• APC
• eAccelerator

#4 -Configuring MySQL

MySQL is a powerful open source database management software that helps users to organize, store and retrieve data. It has its own ‘query cache’ that allows a Magento to generate dynamic pages and content, while at the same time improve a website’s overall performance.

#5 – Updating Indexes

Indexes help in speeding up MySQL queries. Though the indexes in every object store are updated by default, there are some updates that need to be done manually. In that case, you need to –

• Navigate to the System and then to Index Management.
• Select all the indexes that you want to update.
• Choose ‘Reindex Data’ and then click to submit.

#6 – HTTP Requests

A typical HTTP page requires every script, style sheet, and image to go for a separate round trip from the browser to the web server. However, the process, in turn, lengthens the display of the page thereby delaying the ability of the users to interact with it. As a result of the latency, it can take time for the HTML page to get delivered itself.

An effective thumb rule for this would be to reduce the number of HTTP page requests. Here are few ways you can do that –

• Combining CSS and JavaScript into Files

By combining CSS and JavaScript into files, you can reduce the number of HTTP requests that are generated. However, the method can get challenging when stylesheets and the script vary from page to page.

• Merge CSS and JavaScript Files

Log on to your Magento administrator panel and then follow the steps –

• Click System > Configuration > Advanced > Developer > CSS Settings.
• Select ‘Yes’ to merge the CSS files.

Similarly, for JavaScript, you need to click on CSS Settings> Merge JavaScript and then select Yes.

• Next, click on System>Cache Management> Flush JavaScript/CSS Cache

Tap to save the configuration.

These steps will help you to combine all JS and CSS files to make each page load faster than before.

#7 – Use CSS Sprites

A web page containing images can take time to load and generate multiple server requests. CSS image sprites reduce the number of server requests by collecting all the images and putting them into one single image grid.

You can use CSS background position properties and CSS background-image to display your desired image.

Here is what you can do when using CSS sprites to reduce the total image request load time –

• Inline Images

Inline images use the image data to combine it in an HTML page. This, when combined into cached stylesheets reduces the number of HTTP requests and your page size. It is easy to use inline images because they are supported across all major browsers.

• Format

In this image data here –

The data is encoded as base64. That means, the data is represented using ASCII that encodes the octets present inside the URL characters. It also uses the standard hex encoding of URLs for octets that are present outside the range.

If the <MIME type> is omitted, then it will default to ‘text/plain;charset=US-ASCII’.

Browsers like the Internet Explorer requires the charset to precede the base64 while other browsers like Opera, Chrome, Firefox, Safari require a non-standard ordering.

• Prevent 404s

HTTP requests are very expensive. So making an HTTP request and getting nothing in return is completely unnecessary. Besides, it will also affect your Magento website’s user experience and hence would be best to avoid it.

#9 – Optimizing CSS Codes

Like HTML, CSS has the tendency to get cluttered. If you have a large website, it is necessary to optimize the CSS code.

Here are some rules that you can apply for optimizing the CSS codes –

• Use not more than one external CSS stylesheet
• Use small CSS in the form of style tags above fold of your content
• Don’t use any @import calls and inline CSS
• Place the CSS in the <head> block. This will cause the page to load one at a time beginning with the title, the logo, navigation features and so on.

This leads to sequential loading of the page, which helps to improve the overall user experience of the website.

Putting the CSS files at the bottom of the page does not allow multiple browsers to render the page gradually. Since the browser does not prefer to redraw the elements, the styles can tend to change after the page gets loaded.

#10 – Optimizing Images

• Avoid Scaling Images in HTML

Do not use bigger images just because you can set the width and the height in HTML. If you need a <img width = “100” height = “100” src = “mydog.jpg” alt = “My Dog”/>, then your image size should be of 100x100px and not 500x500px.

#10 – Reduce the size of favicon.ico

It is located at the root of the server. Reducing the size of the favicon.ico will make it cacheable, thereby turning it into a necessary evil since the browser still requests it even if you don’t care about it. Therefore, it is better not to respond to it with a 404 Not Found.

Since it is located on the same server, the cookies are sent every time the browser requests it.

Another thing is that favicon interferes with the download sequence.

In order to mitigate the problem, make sure that –

• Favicon is smaller than 1k in size.
• Set the Expires header to what you feel is comfortable.
• Check the latest favicon.ico update in order to make an informed decision.

#11 – Magento Extensions and Modules

Just like any other CMS platforms, the more extensions and modules you add to your Magento website, the more HTTP requests are run. This also includes loading of additional CSS and JavaScript files.

It is important that you keep your Magento extensions and modules down only to a few numbers.

You can disable the modules that you don’t use any more by –

• Stores > Configuration > Advanced > Advanced.
• Click to disable the modules that you don’t use any longer and save your configuration.

Summary

As you can see, there are many ways you can optimize your Magento website’s performance.  

You can get in touch with us if you are looking for more complex solutions for your Magento website. The choice is yours. Our Magento team of developers and experts are always there to help you when you need us.