Skip to main content

Website speed is one of the most important factors in E-commerce development

E-commerce has several key factors that influence customers purchasing decision and one of them is the page-download speed. 

According to the studies, if the website loads 1 second slower than the optimal rate of 1.8 seconds, then the conversion is reduced by more than 20%. It means that the modern user will not wait for the end of the download and if your website is too slow, the customer will look for an alternative - another store.

At the same time, in our practice sometimes we hear the opinion that supposedly websites on Magento are slow. It’s hard to imagine where the legs grow from this “myth”. Over the 7 years, we are working with the Magento platform and have created an effective path that at times increases the page speed of the website. We are Magento Website Agency and want to give our clients clear and simple technical tools to increase the page speed of their website.

First, we suggest dividing the optimisation into two stages. After all, any web project has two components:

  • back-end - the server side of the site,

  • front-end - user interface.

Below we consider each stage.

  1. Work with the back-end

Download or page speed is the time from the moment the user entered the request in the address bar of the browser and pressed Enter (or clicked on the link) until the moment when the page completely loaded. First, the processes take place on the backend, and only then the data is sent to the browser - where the page is loaded and drawn. The task of the backend is to collect what we mean by page. And the task of the frontend is to download it.

In working with the back-end, we use two tools:

- caching

- off-cache process optimisation

First and most effective way to increase speed is caching. This function allows the back-end to remember the page skeleton and do not to collect it again at repeated requests, but to send to the front-end the already assembled page. To understand: on average, the back-end loads 10 seconds without a cache, and half a second, or even less, with a cache. If your caching is configured correctly, then the download speed will be excellent.

You can save to the cache as whole pages or individual HTML blocks. To start the function, use the Full Page Cache module. He is responsible for ensuring that all pages are cached. The figure below clearly shows how much time was spent loading the page not from the cache.

magento_website_agency_london.png

When working with the cache, it is important to consider the following factors:

- if the admin changes some data on the page, for example, the price of a product or its availability, then the cache will be deleted and the page needs to be re-cached.

- The server has limited caching capabilities. The more computing power he has, the more pages he can cache. We are working with the Cache Crawler module. As a rule, we set to cache 70 pages in 50 minutes. If we set the bar too high, then the server simply can not cope and users will notice delays while loading the pages.

- High traffic on the website generates a cache faster than the Cache Crawler module. When a user loads a new page that is not in the cache, the FPC module saves the page skeleton and will be able to give the cached version to the next user. As a result, the number of pages in the cache will be much larger than Crawler could have done during this time.

- There are pages and blocks with dynamic (personal) data that cannot be cached. For example, the checkout page, a block with information about the discount for the user or with a list of products that you may like. The content of these pages and blocks depends on the user, so they are not cached. We advise customers to reduce the number of dynamic blocks.

Now we will analyse the second part of working with the back-end - process optimisation is not in the cache.

In our Magento website agency, we use AOE Profiler, a module that analyses the download speed of the back-end and all its elements. This information allows you to precisely solve the problem.

Magento website agency UK

Additionally, Magento has the option Flat-catalog, which in this context can be attributed to optimisation tools. What does that give? Product information is stored in separate tables and when the user requests the product page, the server searches for all the data in several tables. It takes time. To speed up the process, you need to enable the Flat-catalog in the website settings. It will combine all the data in one table, where each row contains information about the product or category. To receive only one product, only one request is required.

  1. Work with front-end

After optimising the processes on the back-end, we can go to the front-end. First, let's recall what the website consists of.

Any web project contains a huge number of files that are filled with three types of code:

  1. HTML code - forms the "skeleton" of the page

  2. JS code - makes HTML markup interactive / li>

  3. CSS code - responsible for the styles of all elements (colors, sizes, etc.) / li>

We optimise those files in two ways: quantity and weight.

To reduce the quantity there are two main tools:

  1. Combining JavaScript and CSS files. It significantly reduces boot time. Since the number of active connections (the number of simultaneously downloaded files) in the browser is limited, it turns out faster to load one file.

  2. The formation of CSS sprites. Pictures are grouped and uploaded as one. But this tool can only be used with static interface pictures.

To reduce the weight of the files we use:

  1. Minification.
    When compressing files, code comments, line breaks and spaces are deleted. As a result, save up to 20% of the original file size.

  2. Pictures compressor.
    Allows you to reduce the weight of images to 70%. Why is it important? Just imagine, according to statistics, images on average occupy 64% of the size of a web page. Your site will only win after applying the compressor. We use Kraken, but there are many others. There are also free utilities on the server that can compress all front-end pictures.

Magento development agency

Another life hack we use in our Magento website agency for working with the front-end - is to pay attention to the order in which files are uploaded. For business, it is important that the user begins to see the page of the website as early as possible. Even if it has not fully loaded, he is already ready to consider the goods. Therefore, it is better when all the "heavy files" are downloaded later. And first of all, goods appear. We often use the Lazy Load plugin in projects. It loads images only when the user views them, and the rest after scrolling down the page. Lazy Load significantly speeds up image processing.

Conclusions:

Website speed optimisation is a multi-component process. It is important to consider both the technical characteristics of the project and marketing tasks. For example, to compress the weight of images, but so that the product does not lose its selling look, connect the website to a CDN network so that audiences in other countries have quick access.

If your website is delivered in 1.8 seconds, then be calm. For Google - this is the value at which a website is considered as fast. Page speed, as we know, is taken into account when ranking a website in searching results.

We are experienced Magento website agency and ready to solve your current problems in the project or create a new website on the Magento platform. 

Share this post

Comments (0)