How to Speed up M2I'll show you how to make a Magento 2 site fast. I'll cover desktop and mobile views. My advice comes from 10+ years of experience.
There will be tips to increase Google Pagespeed Insights score. We'll also talk about ways to improve Core Web Vitals.
Some of the tips are easy to implement. Others require programming skills. Things could go wrong. If you are not sure you can always hire me to do the job.
Firstly, an optimization checklist:
- Reduce initial server response time
- Do not use JS bundling
- Utilize CDN
- Upgrade to use ElasticSearch
- Set up Varnish
- Choose the right hosting provider
- Reduce unused CSS/JS
- Minify and merge CSS/JS files
- Remove slow 3rd-party extensions
- PWA
- Lower page weight
- HTTP2
- Lazy load images
Secondly, tune Magento 2 for better Google Pagespeed Insights and Lighthouse performance scores:
- Defer Offscreen Images
- Serve images in next-gen formats
- Efficiently encode images
- Reduce unused JavaScript
- Minify JavaScript
- Eliminate render-blocking resources
- Reduce unused CSS
- Reduce initial server response time
- Properly size images
- Avoid enormous network payloads
- Minimize main-thread work
Thirdly, Core Web Vitals improvements:
- Improve Largest Contentful Paint (LCP)
- Improve First Input Delay (FID)
- Improve Cumulative Layout Shift (CLS)
- Improve First Contentful Paint (FCP)
- Improve Interaction to Next Paint (INP)
- Improve Time to First Byte (TTFB)
1. Reduce initial server response time
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 site, 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. Slow MySQL queries could be a contributing factor.
Make sure you use flat catalogs. Turn Flat Catalog Product and Flat Catalog Category on at Stores > Configuration > Catalog > Storefront.
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.
To optimize Magento 2 speed you can use a code profiler like Tideways or New Relic. There is a built-in profiler which you can enable by putting $_SERVER['MAGE_PROFILER'] = 'html'; in the index.php file.
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.4.6, ElasticSearch comes as a default search engine.
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 is a recommended full page cache application in Magento 2. Go to Stores > Configuration > System > Full Page Cache and set it up. You will need to download and update a VCL file.
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.
Check out my advice on how to pick the right 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. Reduce unused CSS and JavaScript
CSS is, arguably, the most important thing to think about when creating a 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.
Magento 2 relies on JavaScript. JS powers a mini cart, drop down menus and other eCommerce features.
Naturally, you want to load your website as fast as possible. This will minimize lost traffic. In which case, it is important to remove CSS and JS you don't use. To ensure that the blank, white screen goes away as fast as possible, here are some tips:
Audit CSS and JS files and see which ones you don't use. Remove those.
Try to use Magento 2 built-in functions, don't load 3rd-party libraries.
8. Minify and merge 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 Page9. Third Party Extension Audit
About 90% of the time, Magento 2 websites run slow because:
There are just so many third-party extensions installed on the website.
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.
Now that we have established practices on how to conduct Magento 2 speed optimization for a desktop website, it is time to talk about improving loading speed of Magento 2 mobile site.
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.
10. Progressive Web Apps (PWA)
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.
11. 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.
12. 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.
13. 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.
Google Pagespeed Insights and Lighthouse performance scores
Lighthouse and pagespeed insights are Google site speed metrics. Adobe Commerce and Magento Open source might score low depending on various factors.
I'll try to address all warnings below:
14. Defer Offscreen Images
It asks you to lazy load images a user don't see. The fewer images a browser has to load the better time to interactive. Time to interactive is how long it takes for a webpage to be fully responsive and ready for a user input.
You can use a 3rd-party Magento 2 extension. There is a jQuery plugin that lazy loads images.
15. Serve images in next-gen formats
WebP and AVIF images weight less. You might want to convert site images and make a webpage lighter.
There are several ways:
- Convert images manually one by one
- Use a module that compresses them on the fly
- Use a Pagespeed Nginx or Apache server module
Some browsers don't support WebP and AVIF. Make sure you fallback to PNG of JPEG if next-gen format support is not available.
16. Efficiently encode images
It warns you there are JPEG or BMP images that could be further compressed. Compression level should be set to 85.
You can optimize each image or have them optimized automatically by a plugin.
17. Reduce unused JavaScript
It tells you there is redundant JavaScript code on a page. There could even be whole files (like Google recaptcha) that never get used.
Identify what's not needed and remove it. Defer loading scripts until they are required.
18. Minify JavaScript
JavaScripts could be minified to reduce weight. Magento 2 can do it automatically.
To turn it on, enter developer mode, go to admin panel Stores > Configuration > Advanced > Developer > JavaScript and set minify to Yes.
19. Eliminate render-blocking resources
The more CSS/JS files you have the longer it takes a browser to start rendering a page.
Identify what resources are needed for above-the-fold (critical) content and inline them. Above-the-fold content is what user sees before he/she scrolls down.
All non-critical files should be moved to the bottom to defer loading.
20. Remove unused CSS
Removing unused styles are easier than removing unused JavaScript.
Chrome browser has a special Coverage tab that helps you see what styles are being used. Remove unused CSS directives.
21. Reduce initial server response time
Magento takes too long (more then 500ms) to generate initial HTML. It usually means Full Page Cache isn't working correctly.
There could be other related issues: slow 3rd-party plugin, poorly coded theme, misconfigured server.
You can use Varnish and cache warmer scripts to minimize TTFB across the whole site.
If you need help, contact me.
22. Properly size images
It tells you images are too big. A browser has to resize them each time it renders a page.
It usually happens when you serve the same image for desktop and mobile. Mobile views are smaller and an image needs to be resized to fit.
Try serving smaller images to mobile users to save on traffic and improving Magento speed.
23. Avoid enormous network payloads
It warns you there are huge files to be downloaded. Usually, they are unoptimized images or big JavaScript/CSS resources.
Go over each file and find ways to lower its size. Some of them could be removed. Some of them could be substituted with alternatives.
24. Minimize main-thread work
Main-thread is what generates DOM, applies CSS, executes JavaScript and renders a page. Insights and Lighthouse shows what main-thread spends most time on.
In many cases, it's Script Evaluation or Style and Layout.
What you can do:
- Audit JS and CSS resources
- Remove redundant scripts and styles
- Refactor code to minimize evaluation
Magento 2 Core Web Vitals
Google uses Core Web Vitals metric to measure overall user experience of a webpage. It splits into three parts: loading, interactivity and visual stability.
25. Improve Largest Contentful Paint (LCP)
LCP shows the render time of the biggest image or text block within the viewport. It measures loading performance.
Good LCP is no more than 2.5 seconds.
There are several ways to improve LCP:
- Strip redundant JavaScript. The fewer 3rd-party JS files you use the better.
- Remove CSS styles you don't use.
- Move non-critical CSS/JS to the bottom.
- Minimize time to first byte (TTFB).
- Minify CSS and JavaScript.
You need to discover what your LCP resource is. If it's an image, never lazy-load it.
I can bring loading time down, contact me for help.
26. Improve First Input Delay (FID)
FID shows how responsive a webpage is. It's how long a browser takes to respond to a user's first click or tap.
Delay of 100 ms or less is good.
The main reason for a poor FID is long Javascript execution. The less JS on the page the better.
3 ways to cut First Input Delay:
- Split up long running JS tasks
- Defer JavaScript loading
- Remove unused scripts
27. Improve Cumulative Layout Shift (CLS)
CLS tells you how much content shifts on a page. Sudden text, button, link movements annoy users.
Custom web fonts can cause layout shifts.
Here is 3 ways to lower CLS:
- Set images width and height attributes
- Avoid embedded iframes
- Do not load extra content without user interaction: pop-up windows, notices etc
28. Improve First Contentful Paint (FCP)
FCP measures time a page starts rendering. It's when a user starts seeing something on a screen. Start render time is another term for it.
1.8 seconds or less is a good FCP.
5 ways to optimize First Contentful Paint:
- Eliminate render-blocking resources
- Reduce server response time
- Inline critical CSS and JavaScript
- Remove unused CSS/JS
- Optimize images weight
29. Improve Interaction to Next Paint (INP)
INP in simple words is the maximum time a page was unresponsive after a user interaction. Low value means the page responds quickly to user actions like scrolling, tapping, clicking etc.
200 ms or less is generally considered good.
INP will replace First Input Delay metric in March 2024.
3 ways to make INP better:
- Keep event callbacks as fast as possible
- Don't load main thread with too much Javascript execution
- Simplify DOM
30. Improve Time to First Byte (TTFB)
TTFB is how long a server generates HTML to send back to a browser. High value usually means poor PHP code somewhere in Magento. It could also mean misconfigured DNS or redirects.
0.8 seconds or less is a good value.
3 ways to minimize Time to First Byte:
- Have as fewer 3rd-party extensions as possible
- Use Full Page Cache
- Do not load Magento models in a loop
You can always contact me for Magento 2 performance optimization.
If you find this post interesting do not hesitate to sign up for our newsletter and join the 1282 people who receive Magento news, tips and tricks regularly.
Thank You!
Hosting is also a very important factor, when someone talks about speeding up magento.
Highly appreciated content STRONGLY RECOMMENDED...!!!