What is Luma legacy?

Magento/luma theme
Magento/blank theme
Any other legacy theme

Or: Any theme that is based on XML layout, PHTML templates, Block classes, LESS-based CSS, RequireJS, KnockoutJS, jQuery and the rest of the blob

Luma dissected

Luma stack (server-based)

XML layout
Block classes
ViewModel classes
PHTML templates

So how does this perform?

With the right tuning: Excellent

Quick tips for development

Enable all caching
- Except Full Page Cache
- Use Mage2TV Cache Cleaner
Use XDebug only On-Demand
Enable Zend OPC
Use Redis for caching
Test for Full Page Cache
- Beware of cacheable=true

Quick tips for production

Enable all caching
- Including Full Page Cache, ideally via Varnish
Disable XDebug
Enable Zend OPC
Use Redis for caching
Tune MySQL
Compress everything
Downsize images
Serve fonts locally

Luma stack (client-based)

JavaScript
- RequireJS
- KnockoutJS
- jQuery
CSS
- Generated via LESS

So how does this perform?

With the right tuning: Okayish

Core Web Vitals

First Input Delay (FID)
- Measures interactivity
- Within 100 milliseconds
Largest Contentful Paint (LCP)
- Measures loading performance
- Within 2.5 seconds
Cumulative Layout Shift (CLS)
- Measures visual stability
- 0.1 or less

Reporting tools

Google Lighthouse
Google PageSpeed Insights
GTmetrix
Pingdom
Web Page Test

The problem of RequireJS

Async loading
- Enormous waterfall of resources
Too many resources
- And you benefit less/little from HTTP2

And it is old

The problem of KnockoutJS

Lazyloaded via RequireJS
No VirtualDOM
Magento made a mess of it

And it is old

The problem of jQuery

jQuery 3 is not supported (yet)
- So we are using jQuery 1 which is larger
jQuery UI modularization is not supported by all extensions
- So we are using jQuery UI in full which is huge

And it is old

jQuery UI modularization

Bad:

define([
    'jquery',
    'jquery/ui'
], function() { ... });

Good:

define([
    'jquery',
    'jquery-ui-modules/datepicker'
], function() { ... });

See lib/web/jquery/compat.js

The problem of LESS/CSS

Weird responsiveness with recursive loop
Badly organized
Too many files

And LESS is old

So let's optimize Luma legacy anyway

My own experimental optimizations

yireo-training/Yireo_OptimizedTheme
- Removing unneeded things like calendar.css and others
- Knockout replacements
yireo-training/magento2-example-jquery-upgrade
- Upgrade jQuery 1 to jQuery 3
- Do NOT use it. The jQuery UI library shipped is too large.
yireo/Yireo_FasterScriptLoader
- Replacing all data-mage-init and x-magento-init with require()
- Do NOT use it. This is not adding any benefits yet.

Note that this is all experimental

Remove silly CSS

Layout file default.xml:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src='mage/calendar.css'/>
        <remove src='mage/gallery/gallery.css'/>
    </head>
</page>

RequireJS replacements

File requirejs-config.js

var config = {
    paths: {
        //'knockoutjs/knockout-fast-foreach': 'js/zero',
        //'knockoutjs/knockout-es5': 'js/zero',
        'mage/calendar': 'js/zero',
        'Magento_Ui/js/grid/filters/range': 'js/zero',
        'mage/polyfill': 'js/zero',
        //'mage/menu': 'js/zero',
        'mage/translate-inline': 'js/zero',
        'Magento_Captcha/js/model/captcha': 'js/zero',
        //'jquery/jquery-migrate': 'js/zero',
        //'Magento_Ui/js/lib/logger/logger': 'js/zero',
        //'Magento_Ui/js/lib/logger/formatter': 'js/zero',
        //'Magento_Ui/js/lib/logger/console-logger': 'js/zero',
    }
};

Todo

Upgrades of jQuery, Knockout, RequireJS
- Currently adding in size, not reducing it
Replace CSS/JS default menu with simple CSS-only menu
- We don't need JS for this anymore. But I'm not a CSS expert.
Replace JS-driven breadcrumbs with plain HTML-only
- Who cares about the JS logic here?

Proven optimizations

Bundle JS with Magepack
Replace Fotorama (with Notorama)
Add Webp2 images
Hack with SwissupLabs Breeze

Magepack

composer require creativestyle/magesuite-magepack
bin/magento module:enable MageSuite_Magepack
bin/magento setup:upgrade
bin/magento config:set dev/js/enable_magepack_js_bundling 1

npm install -g magepack
magepack generate --cms-url="http://magento.local" --category-url="http://magento.local/women/" --product-url="http://magento.local/training/hyva"
magepack bundle

Refer to magesuite/magepack

Webp2

composer require yireo/magento2-webp2
bin/magento module:enable Yireo_Webp2 Yireo_NextGenImages
bin/magento setup:upgrade
bin/magento config:set yireo_webp2/settings/enabled 1

Swissup Breeze

A fresh wind for your Magento Frontend

What is Swissup Breeze? And how does it work?

It's an alternative JavaScript frontend for Magento 2 that boosts the default Luma theme performance by replacing all scripts with simplified and/or updated versions

SwissupLabs Breeze setup

Run the following commands

composer require swissup/module-marketplace
bin/magento setup:upgrade
bin/magento marketplace:channel:enable swissuplabs
composer require swissup/breeze
bin/magento module:enable Swissup_Breeze

Next, navigate to your theme configuration and enable Breeze

Homepage without Breeze

Magento 2.3.4 clean install
Sample data
Redis cache enabled
Lighthouse Mobile test results

Homepage with Breeze

Magento 2.3.4 clean install
Sample data
Redis cache enabled
Lighthouse Mobile test results

Category page without Breeze

Magento 2.3.4 clean install
Sample data
Redis cache enabled
Lighthouse Mobile test results

Category page with Breeze

Magento 2.3.4 clean install
Sample data
Redis cache enabled
Lighthouse Mobile test results

Product page with Breeze

Magento 2.3.4 clean install
Sample data
Redis cache enabled
Lighthouse Mobile test results

Result from actual site with Luma-based theme

Result from actual site with Snowdog-based theme

Pros of using Breeze (1/3)

Replaces “old” Magento scripts, with simplified and updated versions

Library replacements & additions:

jQuery => Cash - https://github.com/fabiospampinato/cash
Underscore => Newest Underscore Version - https://underscorejs.org/
Knockout => Newest Knockout Version - https://knockoutjs.com/
turbolinks

See http://docs.swissuplabs.com/m2/extensions/breeze/devdocs/js-stack/

Pros of using Breeze (2/3)

Removing pointless CSS

mage/calendar.css
mage/gallery/gallery.css

Pros of using Breeze (3/3)

Replaces numerous Magento JS core scripts

Better product gallery
Better swatch renderer
See view/frontend/layout/breeze_default.xml

Cons of using Breeze

You need to make your theme and extensions “Breeze-friendly”. Since the Breeze replaces javascript code with its own version, you will need to write separate Breeze-compatible version of your javascript code.

See http://docs.swissuplabs.com/m2/extensions/breeze/devdocs/

Conclusion on Breeze

A nice alternative to update the Luma stack with newer and faster scripts, making the Magento 2 front-end faster, but…

Next to your theme, you need to change and administer your extensions to be Breeze compatible. It’s a good option if you don't have to many 3rd party extensions.

All in all, what we can do

Tune the hell out of the backend
Add Breeze, Magepack, WebP, Notorama

And contemplate on what is next in the future

Conclusion

Maybe this is not really worth it

Optimizing Luma legacy anyway