We provide Magento development services for you. Get it done from a certified solutions partner who can do the work for you.
Contents
Why Performance Optimization?
Performance plays a key role in the success of eCommerce stores. Conversion rates depend on how fast or slow your website is. Even milliseconds matter.
According to the latest report from Akamai – ‘The state of online retail performance’ –
- Optimal load times for peak conversions range from 1.8 to 2.7 seconds across device types.’
- Just a 100-millisecond delay in load time hurt conversions rates by up to 7%.
- 28% of customers will not return to a slow site.
- The sweet spot for peak conversions is 2.4 seconds.
- Pages that converted were up to 26% faster than those that did not.
The impact of performance on conversions is undisputable.
Performance Analysis
When it comes to performance analysis we usually focus on two parameters:
Time To First Byte (TTFB) and Frontend performance.
TTFB measures how quick the server responds to a browser request. TTFB shows how fast servers execute PHP code. Good TTFB should be under one second.
Frontend Performance shows how fast a browser renders HTML. Before you see images and texts the browser should compose the DOM (Document Object Model). This means that the initial file size of your DOM tree will have a performance cost.
Magento 2 Optimization
According to Magento 2 DIY authored by Khliupko, Viktor – “The approach for optimizing Magento 2 differs from Magento 1 because Magento 2 is faster, less resource hungry and better optimized for high loads than Magento 1.x. Besides, it offers a lot of new performance features out-of-the-box. For instance, you get native support for Varnish, Redis, and Nginx as well as full page caching in M2.
As for the first version of the e-commerce platform, all these features were only available through customizations and extensions.”
There is still a lot that can be done to make your eCommerce as fast as the Magento 2 platform allows. This blog captures some of the popular practices that can be applied for speeding up your eCommerce store.
Optimization Steps
Use Nginx or Litespeed
While the Apache web server is very flexible in its configurations, other web servers are better suited for optimizing memory usage. By replacing Apache with either Nginx or Litespeed, you could speed up the Magento scripts even more.
Caching
Enable all of the available caches from the admin panel System –> Cache Management.
Implement Redis Cache
There are problems while implementing Two Levels Cache Backend(i.e., to use Memcache together with the database).
Redis is an appropriate alternative to resolve this problem. Redis is an open Source, BSD licensed advanced key-value store. It is often referred to as a data structure server since keys can contain strings, hashes, lists, sets and sorted sets.
Redis is an advanced key-value cache which provides top-notch performance. It is considered as one of the superior and most efficient caching mechanisms, particularly for Magento 2.
Implement Varnish Cache
Varnish cache is an open source web application accelerator. Varnish stores (or caches) files in memory; this enables Varnish to reduce the response time and network bandwidth consumption on future, equivalent requests.
The built-in full-page caching (to either the file system or database) is much slower than Varnish.
We strongly recommend you use Varnish (or Redis) in production.
Reduce Server Response Time
We can check the server response time by enabling profiler in admin configuration. This will measure the response time for every block in the specific page and how many times it is loaded from the server. Based on this information, we can identify the specific request that takes more time to respond. Reducing the specific block response time will improve the performance.
To enable this option, navigate to
Admin -> Configuration -> Advanced -> Developer -> Debug -> Enable Profiler
To know more about page response time and the number of times it was requested, you can install DCKAP Profiler for Magento 2. It displays the profiler information at every page level and helps fine-tuning the performance at page level.
Minimize the Number of HTTP Requests
Reducing the HTTP requests as much as possible is critical to improving the page load time of the web page. There are several methods, including using Varnish, that will help reduce HTTP requests and still maintain a high-quality web page.
Merge and Minify (CSS, JS)
CSS and JS file help your frontend look better. However, they are one of the core factors that slow down your site speed.
You can improve the performance of your Magento 2 site by combining, compressing, and caching Javascript and CSS files.
In magento2, we can minify and merge files using admin configuration.
For merging and minifying JS, navigate to
Magento Admin -> Stores -> Configuration ->Advanced -> Developer -> Javascript Settings->Enable Merge javascript, Enable Minify javascript.
For merging and minifying CSS, navigate to
Magento Admin -> Stores -> Configuration ->ADVANCED -> Developer -> CSS Settings->Enable Merge CSS, Enable Minify CSS
Combine Images Using CSS Sprites
By using CSS sprites, a larger number of images can be combined into as few files as possible. It reduces the request overhead and decreases the total number of bytes downloaded by a web page.
Optimize Images
To optimize images, choose an appropriate image file format and compress the images using image compressor.
There are various image compression tools available online such as – Smush.It, jpegtran, OptiPNG, and PNGOUT.
Also, you can get the optimized images from GTmetrix and PageSpeed Insights while checking performance optimization for your site.
Note: You will not be able to check your localhost site performance using the above websites.
Expires Headers or Cache-Control Headers
By using the Expire Headers or Cache-Control Headers, the number of HTTP requests and its size can be condensed to make the web page load faster.
The Expires Header specifies a date after which a resource is invalid. At that point, the browser will once again ask for the resource.
Max-age works much the same way.This setting configures the maximum age that the content may be cached before it must revalidate or re-download the content from the origin server. In essence, this replaces the Expires header for modern browsing and is the basis for determining a piece of content’s freshness.
These features are great because you can configure your web server with a constant value.
Content Delivery Network (CDN)
CDN helps reduce the load on the web servers, by serving the static content like images, CSS files or JavaScript files through a network of servers, which may be closely located to your customer’s geographic locations.
Magento 2 provides support for CDN support, media and static content can be loaded from separate subdomains located on different servers of CDN networks.
To configure CDN, navigate to
Magento Admin -> Stores -> Configuration -> GENERAL -> Web -> Base URLs (Secure)
We can insert our CDN url here and improve the store speed.
Coding Standards
Reduce Unwanted Looping
The unwanted looping in the coding logic will increase the loading time of the page. Removal of unwanted looping and server requests will reduce the page speed and loading time.
We can test the existing unwanted loops and other PHP standard recommendation using MEQP(Magento Extension Quality Program) tool. For testing our coding standard using MEQP, please follow this link https://github.com/magento/marketplace-eqp
Reduce DOM Elements
A high number of DOM elements makes the page more complex and increases the size. Consequently, the increase in download time and slower access to JavaScript makes the web page load slower. Investigate the options to reduce the number of DOM elements. There are free tools available like DOM Monster to analyze your page and provide suggestions for improvement.
Remove Commented Lines
We have to remove all the commented lines from the files. Removal of unwanted commented lines will reduce the loading time of the page.
Remove Inline JS and CSS
Always place CSS calls at the top and Java Scripts at the bottom. It helps to increase the progressive rendering in many browsers, thus increasing load speed of the web page.
Enable Production Mode
Switching to production mode improves store responsiveness and prevents long initial page load times that can occur in default mode.
Run the following terminal command to switch to production mode:
bin/magento deploy:mode:set production
Today, shopping, whether online or offline, is all about the experience. The methods mentioned above are the popular ones and, when implemented, will improve Magento 2 performance.
