Magento 2 webshop performance optimization: the how and why?

Published by Matthias Geysen 2019-05-28

Magento 2 performance

For an online webshop it is always important to offer your customers a user-friendly and fast experience. One of the most important aspects is speed. Visitors get annoyed when pages need a few seconds to load. This increases the bounce rate and you therefore lose potential customers. Search engines such as Google also play an important role here. In addition to optimizing your content, they also look at speed. The faster your website, the higher you appear in the search results. View your current webshop’s scores on Google PageSpeed Insights.

Although Magento 2 is one of the most powerful platforms, it is also one of the heaviest. The correct configurations and hardware are therefore of great importance. Below you will find a number of tips on how you can optimize your Magento 2 webshop.

 

1. Code optimization

A faster webshop starts with code optimization. If your source code is not implemented correctly or is superfluous, it takes longer for the server to prepare the web page for the user. Here we speak of TTFB (Time to first byte). This is how long it takes for the browser to receive the first byte of data.

 

Extensions

Magento 2 is based on a modular system. This ensures that you can use all kinds of extensions that offer extra functionality. However, this also causes a huge pitfall. The extensions must be compatible with each other and must follow the coding standards of Magento 2.

If this is not the case, problems may arise with critical consequences such as data leaks or non-cacheable pages.

 

Be sure to look out for the following:

  • Large loops: Loops through a large set of data can take a lot of time. Try to avoid this by reducing the dataset and avoiding nested loops.
  • ObjectManagers: Magento prohibits the use of ObjectManagers with a few exceptions. They are not meant to construct other classes, this is the job of Dependency Injection (DI). This is one of the most common mistakes and indicates low quality.
  • One-man-army classes: Classes with too much functionality is not optimal. Break down great functionality and limit each class to their own core functionality

 

Caching

Caching has a major influence on the loading times of your pages. This ensures that pages do not have to be compiled every time and therefore load faster. Pages with customer-specific information, such as the checkout, may not be cached.

Often the cacheable attribute is used in the layout xml files of Magento to indicate whether or not this block may be cached. However, if one block is found on a page with a cacheable="false" attribute, the entire page will not be cached. This must therefore be avoided.

You can check this by looking at the page in your browser to see if it has a no-cache header when you are not using Varnish. If you use Varnish you can analyze this on server level based on the HIT / MISS response with tools such as varnishlog.

If there is a need for non-cached elements on a cached page, we recommend that you go and collect them using AJAX. You can provide a non-cacheable controller for this with which you can specify parameters.

 

AJAX

Via AJAX you can send and retrieve data from the server without reloading the page. Usability is an advantage of this, but it also has a disadvantage for SEO ranking. Texts that have not yet been loaded cannot be recognized by search engines. However, this is a perfect solution for customer-specific elements.

But as Ben Parker once said: "With great power comes great responsibility". Too many requests at the same time can result in longer loading times. Try to limit it to a number of requests per page or to group the requests.

 

Keep calm and code

 

2. Configuration

The admin panel of Magento 2 already offers a number of options that can increase the performance of your webshop.

 

Varnish

Magento strongly recommends using Varnish instead of the built-in caching application. Varnish is much faster and is designed to accelerate HTTP traffic. Varnish is a server sided application that must be installed.

You can easily set this via Stores → Configuration → Advanced → System → Full Page Cache in the admin panel. Once Varnish is selected, additional configurations appear. These are meant to configure Varnish as optimally as possible depending on your hosting and server configurations.

To install Varnish on your server, we recommend that you contact your hosting. They will install Varnish on your server and provide the correct configurations. Magento provides an option to download a standard Varnish configuration.

 

Varnish configuration

Full page caching

Under System → Cache Management you can find all kinds of cache types. Here you can determine which parts should or should not be cached.

All cache types must be enabled for optimum caching.

 

Cache management

 

Flat tables

The database works with an Entity-Attribute-Value model (EAV for friends) that ensures that data is spread over different tables.

This has the advantage that the database is built dynamically. However, a disadvantage is that the retrieval of this data can take a long time.

That is why the so-called 'flat tables' are used. These are simple, generated database tables that contain all required data. This data is provided thanks to indexers.

 

Index management

 

Indexers are processes that ensures that all related data is put in the same flat table. These are performed on a certain action (on save or on schedule).

Ensure that flat tables for the categories and products are enabled via Stores → Configuration → Catalog → Catalog→ Storefront.

If you use the "on schedule" you must also set crontab correctly on your server.

 

Reduce static content

Reducing static content can give a drastic boost to your speed. The less static content needs to be supplied, the faster the page is ready for use. A clear balance must be found here. 5 large files can have the same loading time as 100 small files. The correct configurations depend from webshop to webshop.

 

Magento offers JavaScript Bundling, an option that bundles all javascript files together so the browser has to request fewer packages. We recommend using Advanced JavaScript bundling instead.



Note: you can only view these settings if your webshop is set to 'developer' mode and may differ for your webshop.

 

CSS

  • Navigate to Stores → Configuration → Advanced → Developer→ CSS Settings
  • Set Merge CSS Files to Yes
  • Set Minify CSS Files to Yes

 

Javacript

  • Navigate to Stores → Configuration → Advanced → Developer→ Javascript Settings
  • Set Merge JavaScript Files to No
  • Set Enable JavaScript Bundeling to No
  • Set Minify JavaScript Files to Yes

 

Reduce static content

 

3. Optimizing images

Make sure that images are uploaded in the correct format and dimensions. Large images where a smaller format already complies must be optimized. For example: 4K (4096px on 2160px) images that are never shown larger than 1920px at 500px.

 

Yep, these could lose a few kilo(bytes).

 

Therefore, think carefully about the importance of the photos. Product images can convince the customer and must therefore look good.

An image on a privacy policy page, on the other hand ... Well, who's going to look at a privacy policy page anyway?

The format can also help you to store your images as optimally as possible. Try to save as many images as JPG / JPEG. Wrong formats can still result in high loading times. JPEG2000 is one of the newest formats, but has poor browser support.

 

Lazy loading

Another well-known method to improve the loading of your pages is with lazy loading. This technique ensures that the images are only loaded as soon as they appear on the screen.

There are different JavaScript libraries and all kinds of extensions available for Magento 2.

 

 

4. Fonts

Fonts are often an important part of the design. They provide the right feeling and impression when reading the text. Although they are only letters, they are not innocent for your page speed.

Google Fonts are often used for various reasons. They are free, unlimited and quick to load.

 

But what if a font loads slow, or worse, not at all?

I'm glad you asked! If a font cannot be loaded, no text will be visible.

Even though Google Fonts load fairly quickly, it still takes a certain amount of time to download the chosen fonts. This period is visible on the website and influences the First Contentful Paint (FCP).

Fortunately, there is something like font display: a CSS feature for font faces that determines how to display a font based on whether they are downloaded and ready for use.

 

But there is also a catch... Google Fonts does not support font display. Therefore, download the google fonts in .woff files to use the font display.

 

5. Hosting & server configuration

It all comes down to this!

As cherry on top, good hosting with optimal hardware is ultimately needed. Without this, the previous steps have basically no effect.

The right hardware is required to run a Magento 2 webshop. To give you an estimation, you would use the following hardware for a Magento 2 webshop with 500 products and 100 visitors per day:

 

Minimum:

  • 4GB DDR4 Ram
  • 512MB PHP memory limit
  • 50GB SSD
  • 4 CPU Cores with multi core processing

 

Recommended:

  • 6GB DDR4 Ram
  • 1GB PHP memory limit
  • 100GB SSD
  • 8 CPU Cores with multi core processing

A good host is essential for good loading times. We therefore recommend Combell. Combell is an excellent hosting partner that offers Magento optimized hosting. Satisfied with the loading speed of this website? This website runs on their hosting! Often when a webshop grows they change hosting according to the needs. Combell provides hosting packages from starting webshops to large multinationals with a 99.999% uptime guarantee and an excellent support service. We therefore recommend this hosting to all our customers.

 

SSL Certificate

An SSL (Secure Sockets Layer) certificate ensures better security between the server and your internet browser.

You can easily recognize websites with an SSL certificate if the URL starts with HTTPS://. This is not only better for SEO ranking, but this shows to visitors that your webshop is reliable.

Visitors will feel safer while navigating through your webshop and convert to customers faster.

To request a free SSL certificate, you can request one from Let’s Encrypt.

 

SSL Certificate

 

Gzip compression

Gzip compression is a method that forwards smaller packages (compressed)  to the browser (like sending a .zip to each other). This results in faster loading times and happier visitors. Hooray for compression!

To use this method on your server, it is best to contact your hosting company.

 

HTTP/2

This new protocol ensures faster and smarter data transfer via the internet. These are the most important improvements:

  • Multiplexing: Multiple files can be sent over a single connection. With HTTP / 1.1 this was limited to just one file.
  • Header optimization: You receive header information with every HTTP request. Thanks to HTTP / 2, these are compressed and the superfluous removed.
  • Server push: The server can proactively send the correct files to the browser. This means that the server already knows what resources the page needs before the browser requests it.

For more information it is best to contact your hosting.

 

 

Do you have any questions or would you like to stay informed about the CompactCode Blog? Contact us or sign up for our newsletter!

 

 

Author profile picture
Matthias Geysen Webdeveloper

Webdeveloper with a passion for design & gaming.

Need more?

We go further.