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
    • Varnish
    • Static content – JavaScript, CSS files and images
    • Optimizing frontend in terms of design
    • Optimizing image sizes
    • Minimizing elements that may bock frontend appearance load
    • Enabling server side compression
    • Reducing the size of HTML, CSS, JavaScript
  • Summary

 

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:

 

max time of page loading

 

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:

 

page loadtime

 

 

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).

 

promblems in frontend areas

 

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.

 

Note: Conversion takes place when someone clicks on an ad or link and takes an action which is desirable or valuable from the company’s point of view. Such an action can be a product purchase or a telephone call from the visitor.

 

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.

 

We need to examine two significant factors in terms of page speed:

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:

 

Server side

 

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

 

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

 

Static content – JavaScript, CSS files and images

 

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):

 

ecommerce-design-1

Design 1 – minimum width of 1200 px

 

ecommerce-design-2

Design 2 – minimum width of 992 px

 

ecommerce-design-3

Design 3 – minimum width of 768 px

 

ecommerce-design-4

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.

 

optimize-image-ecommerce-store

 

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

 

In practice it means that if the number of JavaScript and CSS files are large, then it takes more time to load them because of the response times needed to be waited for with every single file.

The best measurement solution for this is probably Developer Tools in Chrome where we get the following summary without merging the files:

 

css-downsize-ecommerce-store

 

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:

 

file-reduce-size-ecommerce-store

 

You can see that the system this time processes a lot fewer files. This option is a default operation in Magento and if the JavaScript classes and procedures are coded properly by the developers, then merging should go seamlessly.

You can enable it under System/Configuration/Developer:

 

magento-developer-menu-file-merge

 

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:

 

server-side-compression-online-store

 

Reducing the size of HTML, CSS, JavaScript

 

Remove any unnecessary characters from all three page elements (HTML, CSS, JavaScript), thus reducing the size of the response and speeding it up.

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:

 

magento-validator-class

 

The module transforms it:

 

magento-validator-class-module-transform

 

Result: shorter content, less unnecessary characters, faster load.

 

Summary

In today’s world increasing page speed performance is getting more and more important for websites, especially for ecommerce stores, because users are becoming more demanding in terms of user experience.

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.

 

 

 


  • FrankLuska

    I keep hearing all this BS about load times, like this “83% of users expect a website to load within 3 seconds”. Really, then why does Amazon, Walmart, Sears, J.C. Penny, etc … have any customers at all? Pingdom shows Amazon loading at 4.3 seconds, 4.7 MB page, 71 performance grade. 3.7 seconds @ GTMetrix. What users expect, what users will tolerate are two different things. Since the majority of users are mobile, and Amazon gets a 69/100 from Google for mobile. Ya, EVERYONE is leaving Amazon in droves.
    Google doesn’t want a page to load in .5 seconds, it wants a page to start rendering in less than .5 seconds. That is vastly two different things.
    Lastly, what about connection speeds, not everyone has fast internet service. Are you saying people with 3 MBPS expect the same loading times as those with 100 MBSP?
    The things people put in print, just don’t jive with reality.

  • Pingback: Magento AWS Hosting - The Definitive Guide [+INFOGRAPHIC] - AionHill()

magento_request
Do you need our support?
  • Magento Site Check
  • Magento Code Audit
  • Magento SEO Audit
  • Magento Project Rescue
Request help

NEED A RELIABLE, PROFESSIONAL MAGENTO DEVELOPMENT PARTNER?

Contact us if you have any question or requirement related to the preparation of a new or renewal of an existing online store.

Next