Magento 2 Slow Loading - 5 Quick Fixes

5 tips to fix a slow Magento 2

Magento 2 website can be slow. It happens for many reasons but it’s fixable.

In this tutorial I’ll list 5 tricks that could help make the eCommerce platform faster. They should be easy to implement and require little programming knowledge.

Follow my guide to the end and you’ll have a few ideas on how to fix a slow online store.

1. Install a Full Page Cache Warmer Plugin

Firstly, you need to enable full page cache (FPC) and set Varnish as your caching application. Go to Stores > Configuration > Advanced > System and make changes if needed. Ask your hosting team to configure Varnish on a server or talk to me.

Full Page Cache Application Setting

FPC works in such a way that only the first request is slow. All the subsequent requests should be fast.

That’s when you need a cache warmer. It fetches homepage, product, cms and category pages every X hours automatically. The warmer script makes all the first slow requests. It makes subsequent customer requests faster.

You can ask a hosting support team to write a simple bash program that parses a sitemap XML file and warms all the links.

There are several Magento extensions available. You can try our free simple cache warmer extension, it supports both Adobe Commerce and open source versions 2.4+.

2. Convert images to WebP or AVIF format

WebP and AVIF image formats provide better compression than JPEG and PNG. If you convert all your site images you could lower page weight and page loading time.

In many cases, a drop in size could be more than 50%.

WebP format payoff

Some browsers don’t support WebP (AVIF). You can use a picture HTML tag and specify a fallback PNG (JPEG) image.

For example, take a look at the code below. A non-supported browser could serve a PNG while a newer browser could render a much smaller WebP:

<picture>
  <source type=”image/webp” srcset=”/images/image.webp”/>
  <img src=”/images/image.png”/>
</picture>

There are several plugins on Adobe Commerce Marketplace that do image conversion automatically. I can recommend a JaJuma plugin, search for it and give it a try.

3. Defer offscreen images (lazy-loading hidden images)

This one can take megabytes off a web page. What you need to do is to load images only if they are in a browser viewport. There is no need to waste seconds and download a big image if a user needs to scroll down first to see it.

Browser Viewport Explained

There are several ways to implement lazy loading in Magento 2.

If you are familiar with Javascript, you can download and use a special Jquery plugin. It’s free to use and all the documentation is available online, just google for it.

Here is how image tag will look like:

<img class=”lazy” data-src=”/images/big-image.png”/>

Adobe Marketplace has a few extensions that defer hidden images automatically. I can’t endorse anything as I personally prefer a Jquery plugin approach. But if you have no programming experience you can purchase an extension (some of them are free) and lower initial page weight significantly.

4. Merge and minify CSS and Javascript

Magento 2 can merge and minify JS/CSS files. Your job is to make sure it’s turned on and works as expected.

First you need to enable developer mode. Ask your system administrator or do it yourself with a simple SSH command:

php bin/magento deploy:mode:set developer

The settings are only visible in developer mode so you need to turn it on.

Then go to Stores > Configuration > Advanced > Developer > CSS (JS) Settings and set Merge/Minification to Yes.

Merge and Minify Settings in Magento 2 backend

Right after that switch to production mode and recompile with a command:

php bin/magento deploy:mode:set production

There is a quicker way to change settings if you are comfortable with bash and SSH:

php bin/magento config:set dev/js/merge_files 1
php bin/magento config:set dev/js/minify_files 1
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/css/minify_files 1

php bin/magento deploy:mode:set production

You can experiment and enable JavaScript Bundling as well:

php bin/magento config:set dev/js/enable_js_bundling 1

Some report improved performance with JS bundling while others experience issues. Turn it on and test at your own risk.

5. Move JavaScript to the bottom of a webpage

This performance trick is about deferring Javascript loading. What you need to do is to move all JS to the page bottom. It says to a browser - you can start rendering a page and worry about JS later.

Defer Javascript Loading

Magento 2 has a special setting for this. Turn on developer mode:

php bin/magento deploy:mode:set developer

Then go to Stores > Configuration > Advanced > Developer > JavaScript Settings and set Move JS code to the bottom of the page to Yes:

Move Javascript to the page bottom settings

And then turn on production mode:

php bin/magento deploy:mode:set production

Or you can change the setting with a SSH command and recompile:

php bin/magento config:set dev/js/move_script_to_bottom 1

php bin/magento deploy:mode:set production

If you are running an older version of Magento 2 you can find a defer JS extension on Adobe Commerce Marketplace. There are free plugins available.

Once you move JS to the bottom you might want to review the website. Make sure the site functions as it should.

Open up a browser developer console panel and make sure there are no JS errors.

Browser Javascript Console with no errors

Takeaway and a list of extensions

Magento 2 sites can be slow but there is something that could help. Here is a list of 5 quick fixes:

1. Varnish and cache warmer
2. WebP and AVIF instead of PNGs and JPEGs
3. Lazy load images
4. Minify and merge CSS and JS
5. Move Javascript to the bottom

Implement these 5 suggestions and let me know the results. You wouldn’t need any programming skills. Share your experience and thoughts in the comment section below.

As a bonus let me give you my personal recommendations on what plugins might help you:

• Simple Cache Warmer (free)
• JaJuma WebP image converter (paid)
• Lazy Load Images (free)

If you need help with making a slow Magento 2 site faster - don’t hesitate to contact me today.
I can help!

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

Thank You!