Magento Performance: How to Measure and Increase Page Speed [CASE STUDY]
It is of extreme importance in ecommerce, and basically for all websites, that load speeds are fast to achieve flawless user experience. How can you increase load speed on frontend? Please read on…
We’re going to cover the following topics:
- If speed goes up, sales go up
- Load speed and search results rankings
- Enhancing frontend speed performance in Magento
- Server side
- Optimizing frontend in terms of design
- Optimizing image sizes
- Minimizing elements that may bock frontend appearance load
- Enabling server side compression
Let’s suppose you search for something, but the page you selected loads slowly. Now you need to answer the following questions for yourself:
- How long do you wait before you say you won’t wait any longer and return to the search engine page?
- How likely is it that you will return to that same page later knowing it loads slowly?
- Will you recommend the website to your friends?
- What would happen if you needed to use your smartphone to visit the page?
The answers are quite obvious. As a website or ecommerce store owner, you need to eliminate exactly these kinds of problems in order to make sure more and more users will visit your website.
Your company’s reputation greatly depends on load speed. If load times are too long, your visitors will not return, but will find other websites quickly that offer better user experience.
Load speed has always been an important factor, but as time goes on, speed requirements are stricter and stricter.
Statistics from 2011 provided such data:
Nowadays web pages need to load a lot faster than that.
This video by Google tells you that in 2016 an online store should load within 2 seconds, whereas for Google a good result is 0.5 seconds.
A recent study by Financial Times mentions the following tendencies in article views:
It is clear that if you have a faster website than your competitors have, you have an advantage and the other way round.
The next table shows the problem areas of online stores that UK users find considerable (Econsultancy, 2012).
It is clear that the number 1 problem of the users questiond is load time. 66.8% of them are not satisfied with it.
Some other important figures in relation to load speed:
- If load time is longer than 3 seconds, 40% of users abandon the site
- An average user is willing to wait max. 2.078 seconds for a page to load
- If the page loads between 1 and 2 seconds, visitor numbers rise by 2%
- If load time is under 1 second, this increase is 4.6%
If speed goes up, so does revenue
Generally speaking, a page speed increase of 1 second brings about a 7% rise in conversion.
Especially in the case of ecommerce stores, the relation between conversion and page speed shows in numbers. Walmart and Amazon, for instance, have both realized that if even a 100ms page speed increase equals a 1% rise in revenue. With such huge companies, 1% is an enormous sum.
Some numbers for online shop users:
- 83% of users expect a website to load within 3 seconds
- If they need to wait longer than 3 seconds, 44% of them leave the page
- 79% of users think it over to ever return to the given website
- 46% tells their friends about this unpleasant experience
It is truly worth considering speeding up your website, since 1 second increase will probably bring you a 7% rise in income, which means that if your daily revenue is $1000, your yearly extra revenue can reach $25,0000 (1000 x 0,07 x 365). It would be nice wouldn’t it?
Page speed and ranking in search results
SEO expert John Mueller examined the topic and in one of his articles he wrote about the fact that slower websites are ranked lower, but a difference of milliseconds with fast websites do not make any difference in ranking.
1 – What the user feels, i.e. how fast or slow page load is for him or her,
2– What Google measure: so that they can make a difference between slow and normal/high speed websites. They have also communicated that the faster your site, the more users it attracts, therefore the visitors can view more sub-pages in a given time, thus encountering more pieces of information.
Enhancing speed performance on frontend in Magento
Since Google is by far the number 1 search engine, it is wise to meet the requirements they set up. Their own speed test solution, Google PageSpeed, is definitely worth checking out, not to mention taking a close look at their suggestions should you have any detected issues with your site’s page speed.
Our first project where we thoroughly took into account all the solutions for achieving better speed performance was the Fradi Football Club online store. We implemented the following solutions:
For frontend content to show faster in browsers, a number of optimization processes on the server side need to be followed to achieve as low response times as possible.
Varnish is one of the most popular caching solutions for serving dynamic content. We have covered this topic in one of our previous posts: Varnish: the secret weapon for boosting page speed
For caching these, we use Amazon’s AWS CDN solution.
Optimizing frontend in terms of design
Based on recent technology and trends, responsive design is preferred where image sizes are changing according to the size of the browser. In the examples below we show you that design and sitebuild vary after the specific breakpoints (AionHill uses the breakpoints of Bootstrap when creating webdesign):
Design 1 – minimum width of 1200 px
Design 2 – minimum width of 992 px
Design 3 – minimum width of 768 px
Design 4 – maximum width of 768 px
It is important that the image size to be displayed equals the area dimensions where it is displayed. This would not be a problem if we didn’t care about responsiveness, since in Magento we can get the resized versions of images:
$this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710);
It means that we need to achieve that the images are resized depending on the browser size. In our opinion the best solution for this is <picture> HTML tag
Basically, it can be set which image to show with a specific resolution, and, if the browser does not yet support this standard, the <img> tag itself is used:
<picture> <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(360, 365); ?>" media="(min-width:1200px)"> <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(293, 297); ?>" media="(min-width:992px)"> <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710); ?>" media="(min-width:768px)"> <source srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(710, 710); ?>" media="(min-width:300px)"> <img class="img-responsive" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(360, 365); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/> </picture>
Optimizing image size
It can be seen that the majority of images can be downsized with different software solutions that do not deteriorate image quality. This is monitored by Google and you can see a report in Google PageSpeed Insights which images can be optimized.
We haven’t created a separate module for that because thanks to a number of free Magento extensions, this task can be easily performed. Our choice was Image Optimizer for Magento, which is a free and easy-to-use solution for this problem.
What it does is basically collecting the pictures in the media, skin and frontend directories and then, using cron, it optimizes them in arrays with the help of image manipulating directories located on the server (jpegoptim, optipng).
Minimizing elements that may bock appearance load
The best measurement solution for this is probably Developer Tools in Chrome where we get the following summary without merging the files:
It can be seen that it takes a lot of time to load all the files. If we enable file merge in the Magento admin panel, then this same page looks like this:
You can enable it under System/Configuration/Developer:
Enabling server side compression
PageSpeed describes in detail what steps to follow with different web servers, what modules to install in order to enable compression in the case of
It’s easy to test the results, for example with Chrome, in inspector mode (Ctrl+Shift+i). On the network tab, in the header of the HTML page, the following can be seen:
For this we have chosen another Apptrian product, Minify HTML CSS JS for Magento, which, after installation and some simple administrative configurations, makes the file modifications to reduce their size.
It’s important to note that it is not about downsizing or encrypting, but removing unnecessary elements.
Here we can see a section of the Magento Validator class:
The module transforms it:
Result: shorter content, less unnecessary characters, faster load.
I have described how to speed up load times in Magento 1.x with recommending a number of solutions.
As for Magento 2 frontend performance, I’m planning to write a post about the same topic in which I’ll describe how to decrease page load times for online stores already built in the Magento 2.x platform.