Performance Tuning
May 01, 2020 by Dhaval Khatri

Nowadays, good performance is a key aspect of a successful e-commerce project. It does not only plays a vital ranking factor but also it is highly appreciated by end-users. A fast online store often has a high conversion rate as compared to its competitors.

Symphisys having extensive performance R&D solutions, this knowledge helping customers to improve the site performance to get a better business results.

Thus, it's very important for you are running the latest version of Magento as updates generally contain bug fixes and performance improvements. The 2nd version of the platform differs a lot and requires another approach when it comes to performance improvements.

Magento 2 is much faster, less resource-hungry, and better optimized for high loads as compared to Magento 1. X. Moreover, it provides a lot of new performance features out-of-the-box. For example, you get native support for Varnish Cache, Redis Cache, and Nginx as well as full-page caching in Magento 2. Where in previous versions, all these features were only available through customizations and third-party extensions.

When a browser loads a web page it does certain actions:

  • It receives HTML data from a server.
  • It analyzes data and loads external files you might have on the page (CSS/JS/images/fonts etc.).
  • It builds what is called a DOM (Document Object Map).
  • It renders the page (puts elements on the screen).

We can determine 3 time periods that measure how quickly a webpage loads:

  • Time to first byte (TTFB) or server response time: the time from when a user clicked on a link or typed in a site URL until the first bit of information from the server arrived.
  • Start to render time: the first point in time that something was displayed to the screen. Before this, a user was looking at a blank page.
  • DOM complete or document complete time: the point in time when the browser considered the page loaded (onLoad JavaScript event fired). All the content has been loaded except content that is triggered by JavaScript execution.
  • Fully webpage loaded time: a webpage is loaded and no network activity is performed by a web browser.

The most important time is the start render time. The quicker you show a user that something is happening after he requests a webpage, the faster the site will appear to the user. 3 main time limits factors describe user perception of how quick a web application:

  • 0.1 Second response time – a user feels that a system is reacting instantaneously.
  • 1.0 Second response time – a user notices the delay, but it doesn't bother him.
  • 10 seconds response time – the limit for keeping the user's attention focused. For longer delays, a user will want to perform other tasks while waiting for the computer to finish.

We have to keep start render time around 1 second to make a user feel a website is fast.

Steps to Optimize Magento 2 Performance:

1. Ensure that Magento Runs in Production Mode:

Go Ahead with Make sure Magento is in Production mode. You’ll be surprised how often people forget to switch modes after fixing something in Developer mode or after a new install.

When you install Magento for the first time it will by default run in Default mode. This mode is best used to configure and test your Magento store before you open it to customers.

Default mode – Default mode has a few cool features but doesn’t offer the best performance.

Developer mode – used for verbose logging, bug hunting, and more in-depth configuration of your Magento install.

Production mode – Production mode is optimized for performance. It’s the one you want to use day-to-day since Production mode will get you the best user experience.

Default and Developer modes are slow. Make sure you switch to production before you open for business:

php bin/magento deploy: mode: set production

2. Enable Flat Catalogs:

A Magento product structure will store product attributes across multiple DB tables. This means that when a user wants to see a single product, Magento will have to look up each product attribute in a different table. The more fragmented is this data, the more time it will take to complete each request.

Flat catalogs lead to fewer database queries per action since they will consolidate data and keep it together.

Flattening your category and product catalogs can help you speed up Magento 2. When a large number of products you have, then the faster Magento will work with flat catalogs.

Go to

Stores -> Configuration -> Catalog.

Change both Use Flat Catalog Category and Use Flat Catalog Product setting to Yes.

3. Merge CSS and JS Files:

The next step you need to follow is merging and minifying CSS and JavaScript files, which means making the web page as light as possible for the fast loading.

Please put your Magento 2 store into production mode.

php bin/magento deploy:mode:set production

JavaScript File
  • Go to Adminpanel, Stores -> Configuration -> Advanced -> Developer -> JavaScript Settings
  • Set Merge JavaScript Files Configuration to Yes
  • Set Minify JavaScript Files Configuration to Yes
4. Content Delivery Network:

Content Delivery Network (CDN) is a special system of distributed servers (networks) that can connect all cache servers. In addition to supported geographical proximity, Content Delivery Network will take over the delivering web content and fasten the page loading.

Please follow this configuration to set up CDN for Magento 2 stores.

Go to Adminpanel, Stores -> Configuration -> General -> Web -> Base URLs (Secure)

5. Enable caching:

You can find the cache management system on the following path.

System -> Cache Management.

  • Configuration cache
  • Layout cache
  • Block HTML output cache
  • Collections data cache
  • DDL cache
  • Entity attribute value cache
  • Page cache gathers data
  • Translations cache
  • Integration configuration cache
  • Integration API configuration cache
  • Web services configuration cache
6. Use Lazy Loading for Images:

The selective approach with page loading order offers a significant performance boost without a lot of investment.

Lazy loading is a pattern that can help you load images, gifs, and other heavy media as they enter the viewport. This means that the browser will not try to load the whole page at once, instead it will prioritize loading visible content first.

As the user scrolls to the bottom of the page, new content gets loaded on the go. First Lazy Load shows a lower-resolution image or a placeholder image, then it will switch on the fly to the high-quality source image.

For the user, the lazy loading implementation will mean:

  • Smoother perceived resource performance especially on low-end machines and tight bandwidths
  • Faster images load for media that the user can already see (inside their viewport)

For a Magento 2 store lazy loading means:

  • Better perceived page load speed which is important for user experience
  • SEO friendly implementation with images (search engines will crawl images as usual)
  • Bandwidth savings – since not all users will scroll to the bottom of the page
7. Image Optimization:
  • Upload files that don’t exceed image requirements for a specific field.
  • No need to use a 500×500 image where a 200×200 image will do.
  • Although Magento 2 will resize images automatically when you save a product, preparing your images is a good idea.
  • Minify large images before upload. TinyJPG, Kraken.io, and other services are your best friends here. You can also download your existing images, tinify them, and upload them to the store.
  • Cloudflare CDN will help you a lot.
  • A fast website is a small website.
8. Use HTML <picture> Tag:

HTML <picture> tag is most useful for responsive designs and pages with lots of images. With this tag, you can define multiple image sources within a single <picture>. The right image selection will depend on the viewport and the min-width parameter of the image.

This is useful when you want to offer the browser the ability to choose the best fitting image for a certain dimension. The most common example would be desktop vs mobile browsing experience where the viewport value will fluctuate quite a bit.

It can be time-intensive to implement <picture> tags from the ground-up for the entire website since you will need to teach other extensions on your store how to work properly with the <picture> tag.

But the result will be a faster, more responsive website on all devices.

9. Expires Headers or Cache-Control Headers:

Downloading static resources all over again every time a user visits a page is a monkey business. Due to the necessity to resend requests, speed may suffer. Besides, users have to waste a large amount of traffic. That is why reducing HTTP requests should be among your prime concerns when you are seeking ways to increase Magento site speed.

By using Cache-Control Headers, as well as Expire Headers, it is possible to condense the number of HTTP requests and its size to make the page load much faster.

Cache-control is an HTTP header that is used to specify browser caching policies in both server responses and user requests. Policies define how and where a website is cached, as well as specifies its maximum age before expiring. After expiring, a browser refreshes its version by sending another request to a server. It is a common practice for caching static resources.

Static Magento components, like images, Javascript, and CSS files, should have far-future expiry headers (no less than 1 year). There will be no problem with clearing the browser cache so it can download the new version because Magento automatically changes the paths for static components with every deployment. This forces the browser to load the new version of the files.

By default, this feature is enabled. To find the configuration for this feature, go to Stores -> Settings -> Configuration -> Advanced -> Developer> Static Files Settings.

10. Enable Compression:

Let’s change nginx compression directives from:

Change gzip_types: text/plain application/x-javascript text/javascript text/xml text/css image/x-icon image/bmp image/png image/gif;
To
gzip_types: *

11. Turn on Varnish Cache Tool:

Make sure your hosting provider supports Varnish. After you do the following configuration

Stores -> Configuration -> Advanced -> System -> Full Page Cache, transfer Caching Application to Varnish Cache.

Unchecked “Use system value” and turn on Varnish. You can leave Varnish configuration options as they are.

And with this fix done we are finished with the Developer mode. Use the command to return to Production:

php bin/magento deploy:mode:set production

The varnish is placed between users and a Magento site as shown below:

How Magento works with Varnish

Magento 2 can use Varnish natively.

But… You still have to install it on your server.

After you do that, enter host/port and other parameters at M2 Stores -> Configuration -> Advanced -> System> Full Page Cache:

On that page at the end of the page you will see the Export Configuration buttons.

Export the VLC file for your version of Varnish and ask your system administrator to upload it to the server.

Now go and browse your website to see if it is fast enough.

12. Optimize Time to First Byte:

Server response time, or time to first byte (TTFB), consists of the time a browser's request goes to the server and the server response goes back to a browser (latency) and the time a server generates HTML. Google recommends having TTFB around 200ms. 1s TTFB is considered bad.
To decrease the server response time Magento codebase needs to be inspected

We will see the more techniques in second part of this article.

Share
Tags
Categories

Dhaval Khatri
Magento Technical Lead
Symphisys
May 01, 2020