Table of Contents

About Lighthouse Audits
Benchmarks
How JavaScript influences the performance

Part Two

You are here

The Basis – default Magento 2 setup
Patches
Default Magento Bundling
Baler
Magento 2 DevTools browser extension
DevTools bundling
integer_net Bundling
A real-life example
Conclusions

DIY time.

We’ll continue to explain how to measure and improve your site’s frontend performance. First, we look at the minimum requirements to get default Magento set up correctly as a base reference.

 

The Basis – default Magento 2 setup

Try this first, and write down your test results. It will set the base reference for any improvements that you make with bundling.

 

Base Requirements:

  • I hope this one is obvious, but enable all Magento caches
  • Use a storage method for Full Page Cache, like Varnish (best) or Redis (okay).
  • Enable HTTP/2 for all your requests. It’s incredibly easy to do.
  • Enable gzip

 

Compress all your images

And also videos, if you host any.

Here’s a script that helps with that.
 

 

Enable CSS minification

We usually save these configurations in app/etc/config.php. If you want them stored in your database, remove –lock-config from the end of the lines.

bin/magento config:set dev/css/minify_files 1 --lock-config

 

Disable bundling and enable JavaScript minification.

Again, remove --lock-config if you want it saved in db instead of app/etc/config.php

bin/magento config:set dev/js/enable_js_bundling 0 --lock-config
bin/magento config:set dev/js/merge_files 0 --lock-config
bin/magento config:set dev/js/minify_files 1 --lock-config

There you go. This should be enough to get you a decent score without using bundling.

Run the Lighthouse Performance Audits from Chrome inspector and see what results you get.

It helps to save the audit results to PDF or HTML and put them somewhere in a folder so that you have the full reports for reference later on. There’s a menu on the right top of the audit result (three vertical dots) that let you save the results.

Patches

Before you continue using any of the bundling methods we’ll discuss, you first need to get some files patched.
These patches are derived from Github commits that are planned for Magento 2.4 and up. They might also end up in 2.3.4, but at least up to the current version – which is 2.3.3 – you’ll need these patches.

We use composer patches that basically first uninstall the existing core module and then re-installs it with the patches you’ve listed in your composer.json file.

 

Mixins patch

Yes, who would have thought it would take years for someone to find out that mixins actually don’t work when you use requireJS bundling?
Well, thanks to Mateusz Krzeszowiak, there’s a fix for mixins with bundling: https://github.com/magento/magento2/pull/25587

So you can either take this version of the file and put it into app/design/frontend/THEME_VENDOR/THEME_NAME/web/mage/requirejs/mixins.js: https://raw.githubusercontent.com/magento/magento2/8eb66b564753fd3fab258189a368c05d771eb2a7/lib/web/mage/requirejs/mixins.js

– Or –
You use this composer patch our team at integer_net made available

You can download this file and put it in your Magento root directory:
patches/composer/M233/github-pr-25587.diff

The patch is tested with Magento version 2.3.1 to 2.3.3.

First, install a composer patch module. We use the one from cweagans, even though we know there’s a new kid in town.
composer require cweagans/composer-patches

Then, add this to your composer.json file, right after ”extra: { “magento-force” : “override” }:

We’re adding more patches below but you can already test if this patch works by running:
composer install

You should see some output about the modules being removed and added again.

 

‘Fix missing shims and phtml files with mage-init directives’ patch

There are a few things that are misconfigured or incompatible with bundling in Magento core files that are fixed in this patch.

It currently looks like most of those changes are added to the 2.4-develop branch, so we’ll need to patch them in earlier versions.

You are welcome to go into that commit and download the individual 14 files and overwrite them in your custom module or override them in your theme, but we would advise to use composer instead.

We made these patches available for Magento 2.3.1, 2.3.2 and 2.3.3:
https://github.com/integer-net/magento2-requirejs-bundling

We assume you have installed cweagans/composer-patches as described above, so you can add these patches right after the mixins patch in your composer.json file. Just make sure you take the right version. There are three directories: M231, M232 and M233. Make sure you change the config below accordingly.

Then finally run:
composer install

You should see some output about the modules being removed and added again.

Default Magento Bundling

Do Not, I repeat, Do Not use default Magento bundling.
Magento Dev Docs recommend enabling bundling and minification to improve the performance of your store. However, this standard bundling is actually harmful, as we saw in the benchmarks above.

Luckily, the Dev Docs do provide these tips that hint to a better solution. However, they could be presented more prominently.

Bundling tips

  • Magento recommends that you use third-party tools for minification and bundling (like r.js). Magento built-in mechanisms are not optimal and are shipped as fallback alternatives.
  • Activating the HTTP2 protocol can be a good alternative to using JS bundling. The protocol provides pretty much the same benefits.
  • We do not recommend using deprecated settings like merging JS and CSS files, as they were designed only for synchronously-loaded JS in the HEAD section of the page. Using this technique can cause bundling and requireJS logic to work incorrectly.

Magento Dev Docs

Getting started

bin/magento config:set dev/js/enable_js_bundling 0 --lock-config
bin/magento config:set dev/js/merge_files 0 --lock-config

I’m kidding. But seriously, just don’t do it. If our benchmark wasn’t convincing enough, maybe you want to read Magento’s own reasoning about why not to use default Magento 2 JavaScript bundling and use advanced bundling instead.

If you have time, read the rest of that document. But note that the workflow for advanced JavaScript bundling described there is obsolete since we now have tools for this and we’ll describe how to use them in detail in the next sections.

You finished reading the second part.
Now would be a good time to skip to Part Three or Four.

How do you wish to proceed?

About Lighthouse Audits
Benchmarks
How JavaScript influences the performance

Part Two

You are here

The Basis – default Magento 2 setup
Patches
Default Magento Bundling
Baler
Magento 2 DevTools browser extension
DevTools bundling
integer_net Bundling
A real-life example
Conclusions
Willem Wigman

Author: Willem Wigman

Willem Wigman is Certified Magento 2 developer at integer_net. His focus lies in front- and backend development and ReactJS.

Willem started as a freelance developer in 2007, works with Magento since 2011 and ran his own Magento Agency for a couple of years.

More Information · Twitter · GitHub