Performance matters and probably everyone hears that 1-second delay in page response can result in a 7% reduction in conversion, translating it to sales, potentially you are going to lose $2.5 million every year if your store is making $100.000 per day.
I’ll show you a way to easily measure the Magento 2 front-end performance and how to find and eliminate bottlenecks. The talk will also cover common mistakes and show how different configuration options will affect page load and user experience.
How it works?
• Run on clean Chrome instance
• Emulate Nexus 5X size
• CPU throttling is enabled to emulate smartphone performance
• Network is throttled to slow 3G
1. "Audits" panel in Chrome Developer Tools
But… Currently it’s outdated (2.0.0 vs 2.4.0) so test
results are not always accurate.
2. Chrome extension - possibly easiest way
3. Node CLI - most powerful way
How to use Lighthouse?
To ensure that browsers start rendering your page as quickly as
possible, it’s become a common practice to collect all of the CSS
required to start rendering the ﬁrst visible portion of the page
(known as “critical CSS” or “above-the-fold CSS”) and add it inline
in the <head> of the page, thus reducing roundtrips.
You can force your page to render meaningful content within 1.5s
Generate Critical CSS and inline it
Best way, but not easy with M2 styles codebase
Add loader to hide unsettled content
Easiest way, but without any positive performance
Low Quality Image
1. Initially load the page with low quality images
2. Once the page loaded (e.g. in the onload event),
replace them with the full quality images
Possible improvements to lazy-loading model
Avoid synchronous JS
Check 3rd party extensions, many of them ignore
existence of Require JS
<link href="<?= $this->assetRepo->getUrl('jquery.js') ?>”
<link href="<?= $this->assetRepo->getUrl('jquery/jquery-ui.js') ?>”
<link href="<?= $this->assetRepo->getUrl('knockoutjs/knockout.js') ?>”
<link href="<?= $this->assetRepo->getUrl('underscore.js') ?>”
You can save here 50-300 ms
1. Parse rendered page, take all script tags and move to
the end of the body. This will let us to remove blocking
JS from the head and make page to render way faster
2. Use HTTP/2 Push to load heavies ﬁles like: jQuery UI lib,
jQuery lib, stylesheets etc. (for now Apache only)
3. Use Brotli or Zopﬂi compression format (lossless
compression algorithms like a Gzip)
4. Service workers
Front End Performance Checklist 2017
Q & A Time!
Let’s stay in touch