Speed up Magento 2: The Ultimate Guide (Updated 2023)

Speed up M2

This year, the need to perform a Magento 2 migration has become more urgent than ever. However, with so many new websites being migrated to Magento 2, the next thing that many store owners seem to focus their attention on is website speed optimization. Meaning, Magento store owners want to know how to increase magento website speed.

When you finish your migration, ask yourself this:

Is your Magento website loading very slow?

If it is, then you are in luck. In this guide, I will show you how I was able to speed up my magento website on for both a desktop and mobile website.

Speed Up Magento 2 Website:

There are many different ways that you can perform a Magento 2 speed optimization. Here are the best practices.

1. Optimize Time to First Byte (TTFB)

One of the first steps you should take toward Magento 2 speed optimization is optimizing the TTFB. The TTFB is the time it takes for the user’s browser to download the HTML of a page. During this time, a lot of internet users are met with a blank screen, like the one below:

Start Render Time

During this, the backend of the website is rendering the HTML out and preparing to send it to the user’s browser. The HTML file roughly exists as a skeleton to the actual page. The other files, such as images, CSS files & Javascript, will be loaded on the site later.

The TTFB may sound like an easy fix to speed up Magento 2, but with every customization update, code tends to build up. This means that the website can take longer to load.

To optimize the TTFB means that you will need to inspect the Magento codebase.

If you do not have a deep understanding of programming language, then it will be better to use some of the many online monitoring tools that can help you debug a high TTFB.

2. Do NOT Use JS Bundling

JavaScript bundling is a practice that groups up separate files in order to reduce the number of HTTP requests to load a page. In short, if there are fewer files, there are fewer HTTP requests, which means the webpage has to spend less time loading.

On the surface, this sounds like a great idea. However, one horrible side effect of JS bundling is that grouping your files would leave you with large JS files that can seriously slow down the performance of your site.

In the end, the time you tried to save by lowering HTTP requests was spent on loading the large files you now have on your computer.

In fact, what would really help lower HTTP requests is enabling HTTP/2. Later in the article, we discuss this and other benefits of HTTP/2.

Therefore, it is recommended that you do not practice this tactic and you instead try other strategies to speed up Magento 2.

3. Consider a Content Delivery Network (CDN) Plan

A content delivery network (CDN) is an online service that transfers static content (such as images, CSS/JS files, and HTML pages) by using a group of regional servers. These servers work together to provide faster delivery of internet content.

From a business perspective, if you have a global customer base, wouldn’t it be great to have servers spread throughout multiple parts of the world? It would certainly help serve content fast, regardless of where the user is.

4. Go with ElasticSearch

ElasticSearch is a search engine that is designed to make searching for products easier. With Magento 2.3.0 and other releases from thereafter, ElasticSearch comes as a built-in extension for all Magento sites.

When customers are able to search for products at a faster rate, they are more likely to convert into sales. However, aside from the obvious benefit of having a faster search engine for your products, ElasticSearch also handles the following:

• Multiple Language Support: ElasticSearch is able to understand multiple languages, so websites can interact with customers on both a local and global scale.

• Search Support: ElasticSearch supports stop words and synonyms. The software also makes autofill suggestions and product suggestions. With this feature, your customer can find what they are looking for before they can even finish their search.

• Indexing, Simplified: When a customer conducts a search, ElasticSearch will return search results based on its last generated index. If a new index happens while a customer is searching for something, then that index won’t affect the customer’s search results at all.

5. Setup Varnish

Varnish is a program that caches content. Some also describe it as an HTTP accelerator. However, what makes Varnish so unique is that it stores files or fragments of files, in the memory and those files are used to reduce the response time for a website.

A big benefit of Varnish is that it has shown itself to be flexible. You can go into the code and write out your own caching policies in Varnish’s language. The language is translated to C code and compiled, which makes the website go really fast. It is also known to work well on both small and large servers.

Varnish Book

6. Think About Your Hosting

Magento just cannot run on a cheap hosting plan. Many certified Magento developers will advise you to invest in a good hosting plan. I’ve had clients approach me about cheap hosting specials from different services and I always give them the same advice: don’t buy it.

Shared plans often confine you to a limited amount of space and Magento is a type of platform that needs a lot of space in order to fulfill your website’s needs. Running your Magento 2 website on a cheap hosting plan would already give the website potentially slow loading time. However, as traffic starts to pick up, the loading time will get slower and slower. Therefore, the best type of hosting plan to invest in is a premium hosting plan.

It is also important to pick a service that specifies Certified Magento Hosting.

A really great idea would be to host your Magento website in a VPS network. A VPS (Virtual Private Server) is essentially your own server space that provides more storage than a cloud hosting plan would. As a site owner, VPS would give you a little more freedom to manage your website.

Unlike cloud hosting, VPS hosting doesn’t provide server space that is dependent on a certain amount of traffic. You would have the liberty of using as much site space as you would need.

It is important to weigh out all of your options efficiently. Therefore, I recommend that you do your research and look for quality over quantity.

7. Optimize CSS Delivery

CSS is, arguably, the most important thing to think about when creating your Magento website. CSS is the programming language that determines what the website will look like. While your browser loads your CSS, the site user just sees a white, blank screen.

Naturally, you want to load your website as fast as possible. This will minimize lost traffic. In which case, it is important to optimize the CSS delivery on your site. To ensure that the blank, white screen goes away as fast as possible, here are some tips that can help you optimize the website’s CSS delivery.

1. Place your above-the-fold content high in your HTML. When you do this, a browser will pick up and render the above-the-fold content.

2. Move all the other CSS resources down at the bottom of the page. That content shouldn’t have to load until the user scrolls down.

However, these processes must be done manually. When looking through online CSS services, I found that their promises to separate above-the-fold CSS did more harm for your website than good. Worst of all, the website itself would be left with a lot of mistakes that you would have to fix manually.

8. CSS & JavaScript

When running a Magento website, there will be many occasions that you, or your developer, will be working a lot with CSS & JavaScript. To speed up Magento 2, I suggest that you do the following with your CSS & JavaScript:

• Minify the JavaScript/CSS

• Merge CSS & JavaScript Files

We can actually do these two things by going to the backend of the website.

“Configuration” → “Developer” → JavaScript Settings.

Your screen should look like the one below:

CSS and JS settings page

Once you have reached the JavaScript settings, you will look for the setting that says “Minify JavaScript Files” and you will find a drop-down menu. Select the option that says “yes”.

Now, you can move on to the CSS settings. Under “Merge CSS Files” & “Minify CSS Files”, select “yes”

Developer Page

9. Third Party Extension Audit

About 90% of the time, Magento 2 websites run slow because:

1. There are just so many third-party extensions installed on the website.

2. Your site has third-party extensions that are poorly coded.

This is because when you have extensions on your website, your website needs to not only load your site content but also your extensions need to load as well. When your website has too many extensions, you may find that the loading time will seriously slow down. The situation would get worse with a poorly coded extension.

The best way to combat this would be to make an audit of all the extensions that you use. If your site is running too slow, take the largest extensions, go through each one and evaluate whether or not you really need them.

If you need a good extension that can help you speed up Magento 2, then I recommend the Google PageSpeed server extension.

Once you have sorted out what are your most and least important extensions, start deleting your least important extension and check your website speed. If you noticed a change in site speed, be sure to make a note of it. It is important to note the benchmark speed every time you install and uninstall a new extension. Continue deleting your unimportant extensions until you are only left with the extensions that you have deemed essential. After benchmarking the speed, you will see that your website should be running much faster.

Speed up Magento 2 Mobile:

Now that we have established practices on how to conduct Magento 2 speed optimization for a desktop website, it is time to talk about how to speed up Magento 2 for a mobile website.

In our digital age, a mobile website has become more necessary than ever. If you do not have a mobile website, search engines will actually keep your website lower in rankings because your site will be considered outdated.

Below are some of the things you should do to speed up your Magento 2 mobile website.

1.Progressive Web Apps

If you do not have a mobile version of your website, or you have just migrated to a Magento 2 website, then the first thing to do is make sure you have a mobile version of your website up and running.

Manually shifting your site to mobile can be a risky task to handle on your own.

The easiest way to go about this is to build a progressive web app, which is a mobile version of a website that is built to look like a phone application. A quick search will show you some great websites that will have a free progressive web app built for you in minutes.

However, if you have the latest release of Magento 2.3, you may have access to PWA studio, a Magento program that carries a set of developer tools needed to build a progressive web app. In short, it is specifically designed for building a progressive web app for your website.

Some qualities of a great PWA are as follows:

• Fast: PWA uses a lot of performance optimization strategies to load content fast.

• Secure: HTTPS connections are always used for the best security.

• Responsive: PWA sites are meant to provide a consistent experience on phones and tablets.

• Cross-Browser Compatible: Works equally well with browsers such as Firefox, Chrome, and Safari

• Offline Mode: Content is cached to ensure that content can be served while user is offline.

• Mobile Perks: PWA sites can be added to home screens and push notifications can be enabled.

• Shareable Content: Each PWA site has a unique URL that can be shared with other apps or social media

The PWA studio provides the following tools:

• pwa-buildpack - Contains the main build and development tools for a Magento PWA.

• peregrine - Contains a collection of UI components for a Magento PWA.

• Venia storefront - A proof of concept Magento 2 storefront built using the PWA Studio tools.

But if a progressive web app does not fulfill the vision you have when thinking about your mobile website, then you should consider hiring a Magento Certified Developer to help you set up your mobile site.

2. Lower Page Weight

The weight of the page refers to the amount of space a webpage’s files take up. Studies show that our mobile devices spend three times as much time downloading a page, as opposed to a desktop.

There are several ways to lower the weight of a webpage. Such ways include optimizing images, setting GZIP compression and paying attention to above-the-fold content. There are many more ways that you can lower the page weight to speed up Magento 2. However, if you want to optimize your Magento 2 website, it is essential to lower the page weight so that the page can load as fast as possible.

3. HTTP/2

HTTP/2 is a majorly updated version of the HTTP network that is used on the web. This HTTP version is updated for today’s websites. Meaning, that this version can speed up your website performance by allowing a server to send assets to a network before the server even asks for them.

HTTP/2 should be covered by all servers and networks. It’s best to contact your server administrator to make sure HTTP/2 is enabled.

4. Lazy Loading Images

Magento 2 image optimization is a very important aspect of Magento optimization.

Lazy loading images is a term that is referred to for images that load as the user keeps scrolling.

This is a really useful tactic for increasing mobile page speed because the site only has to worry about loading photos that the user could see, while the rest of the images stay dormant.

There are quite a few free extensions that will help you achieve this.

After you have done all of this, run your website. Did you notice any changes in terms of your Magento 2 speed optimization? If you did not, feel free to reach out to me. I can help you figure out what you need to do to speed up Magento 2.

If you find this post interesting do not hesitate to sign up for our newsletter and join the 1307 people who receive Magento news, tips and tricks regularly.

Thank You!