magento 2 front-end performance tips & tricks - meet magento poland 2017
TRANSCRIPT
![Page 1: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/1.jpg)
#MM17PL
Magento 2 Front-end performance tips & tricks
Definitely not a talk about replacing front-end stack
Bartek Igielski Lead Front-end Developer at Snowdog @igloczek
![Page 2: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/2.jpg)
#MM17PL
![Page 3: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/3.jpg)
#MM17PL
![Page 4: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/4.jpg)
#MM17PL
Performance =
Happiness =
Conversion =
Money
![Page 5: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/5.jpg)
#MM17PL
How to measure performance?
Lighthouse A tower or other structure tool containing a beacon
light to warn or guide ships at sea developers.
https://github.com/GoogleChrome/lighthouse
![Page 6: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/6.jpg)
#MM17PL
![Page 7: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/7.jpg)
#MM17PL
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
![Page 8: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/8.jpg)
#MM17PL
1. "Audits" panel in Chrome Developer ToolsBut… 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?
![Page 9: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/9.jpg)
#MM17PL
![Page 10: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/10.jpg)
#MM17PL
Which config perform best?
Minification?
Merging?Bundling?
![Page 11: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/11.jpg)
#MM17PL
Always enableminification and merging
It saves data (better compression) and reduce number of requests
![Page 12: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/12.jpg)
#MM17PL
To bundle or not to bundle
Not bundle
OnOff
![Page 13: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/13.jpg)
#MM17PL
What’s the starting point?
Magento 2.1.8 + Sample data + Luma theme
Minification and merging enabled, bundling off
HTTPS + HTTP/2 + GZIP
![Page 14: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/14.jpg)
#MM17PL
![Page 15: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/15.jpg)
#MM17PL
![Page 16: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/16.jpg)
#MM17PL
First step - create theme{ "name": „snowdog/theme-frontend-performance",
"require": { "snowdog/frontools": "*", "snowdog/theme-blank-sass": "*" }, "type": "magento2-theme", "autoload": { "files": [ "registration.php" ] } }
https://github.com/SnowdogApps/magento2-theme-performance
![Page 17: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/17.jpg)
#MM17PL
Annihilate render blocking resources
Let’s make everything asynchronous!
![Page 18: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/18.jpg)
#MM17PL
Asynchronous stylesheets
Because asynchronous JS isn’t enough
You can save here 800-1000 ms
![Page 19: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/19.jpg)
#MM17PL
rel=„preload"
<link href="<?= $this->assetRepo->getUrl('css/styles.css') ?>" rel="preload" as="style" onload="this.rel='stylesheet'" />
Magento_Theme/templates/root.phtml
Magento_Theme/layout/default_head_blocks.xml
<remove src="css/styles.css" />
<script src="Magento_Theme::js/lib/cssrelpreload.js" async="true" />
![Page 20: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/20.jpg)
#MM17PL
Inline CSSTo 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 first 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
![Page 21: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/21.jpg)
#MM17PL
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
impact
Inline CSS
![Page 22: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/22.jpg)
#MM17PL
body:before, body:after { content: ''; position: fixed; top: 0; z-index: 1000; width: 100%; height: 100%; } body:before { background: #f6f7f9; } body:after { background-image: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%); background-repeat: no-repeat; background-size: 200vw; } @keyframes placeHolderShimmer{ 0%{ background-position: -100% 0 } 100%{ background-position: 200% 0 } } body.loaded:before, body.loaded:after { content: none; }
![Page 23: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/23.jpg)
#MM17PL
<link href="<?= $this->assetRepo->getUrl('css/styles.css') ?>" rel="preload" as="style" onload="this.rel='stylesheet'; document.body.className += ' loaded'" />
![Page 24: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/24.jpg)
#MM17PL
Images lazy-loadingTo load images when they are really necessary
You can save here 500-1500+ ms - depends on images overall weight
![Page 25: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/25.jpg)
#MM17PL
lazysizes.jshttps://github.com/aFarkas/lazysizes
<script src="Magento_Theme::js/lib/lazysizes.js" async="true" />
Magento_Theme/layout/default_head_blocks.xml
![Page 26: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/26.jpg)
#MM17PL
<img class="lazyload" data-src="<?= $block->getLogoSrc() ?>" >
<img src="<?= $block->getLogoSrc() ?>">
![Page 27: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/27.jpg)
#MM17PL
Low Quality Image Placeholders
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
https://www.guypo.com/introducing-lqip-low-quality-image-placeholders/
![Page 28: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/28.jpg)
#MM17PL
Avoid synchronous JSCheck 3rd party extensions, many of them ignore
existence of Require JS
![Page 29: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/29.jpg)
#MM17PL
Prefetch<link href="<?= $this->assetRepo->getUrl('jquery.js') ?>” as=„script" rel=„prefetch" /> <link href="<?= $this->assetRepo->getUrl('jquery/jquery-ui.js') ?>” as=„script" rel=„prefetch” /> <link href="<?= $this->assetRepo->getUrl('knockoutjs/knockout.js') ?>” as=„script" rel=„prefetch" /> <link href="<?= $this->assetRepo->getUrl('underscore.js') ?>” as=„script" rel=„prefetch" />
You can save here 50-300 ms
![Page 30: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/30.jpg)
#MM17PL
Reduce payload
![Page 31: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/31.jpg)
#MM17PL
Merge stylesheetsSince asynchronous approach is not supported by the core, so we have to care about merging
on our end
You can save here 50-300 ms
![Page 32: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/32.jpg)
#MM17PL
Optimize imagesCompression, downsize, lower quality, WebP
You can save here… a lot! Store maintainers tends to load heavy images.
![Page 33: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/33.jpg)
#MM17PL
Use responsive images
Load images conditionally depends on user device screen size
You can save here a lot - up to 50-70% reduce
![Page 34: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/34.jpg)
#MM17PL
Reduce number of fontsFont is just an enchantment, not a content.
You can use system fonts instead.
![Page 35: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/35.jpg)
#MM17PL
Load web fonts in WOFF2 format
But if really have to load fonts…
![Page 36: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/36.jpg)
#MM17PL
Optimize fonts loading
https://www.zachleat.com/web/comprehensive-webfonts/
![Page 37: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/37.jpg)
#MM17PL
Do not duplicate JS libraries
Check 3rd party extensions, they like to load lots of stuff, just to be sure that it will work.
![Page 38: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/38.jpg)
#MM17PL
Results
First meaningful paint
1,830 ms faster
First interactive
2,190 ms faster
Consistently interactive
1,970 ms faster
![Page 39: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/39.jpg)
#MM17PL
![Page 40: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/40.jpg)
#MM17PL
https://github.com/antonkril/magento-rjs-config
![Page 41: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/41.jpg)
#MM17PL
Entry point
Merging + minification enabledBundling off
Performance index: 53
![Page 42: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/42.jpg)
#MM17PL
R.js bundling - sync
Merging + minification enabledCustom R.js bundling
Bundle added via layout and loaded synchronously
Performance index: 56
![Page 43: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/43.jpg)
#MM17PL
R.js bundling - async Merging + minification enabled
Custom R.js bundling Bundle defined in RequireJS config and loaded
asynchronously
Performance index: 68
![Page 44: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/44.jpg)
#MM17PL
More possibilities…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
than now.
2. Use HTTP/2 Push to load heavies files like: jQuery UI lib,
jQuery lib, stylesheets etc. (for now Apache only)
3. Use Brotli or Zopfli compression format (lossless
compression algorithms like a Gzip)
4. Service workers
![Page 45: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/45.jpg)
#MM17PL
Further readingFront End Performance Checklist 2017
https://www.smashingmagazine.com/2016/12/front-end-performance-
checklist-2017-pdf-pages/
https://github.com/SnowdogApps/magento2-theme-performance
![Page 47: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/47.jpg)
#MM17PL
https://hacktoberfest.digitalocean.com/
![Page 48: Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017](https://reader031.vdocument.in/reader031/viewer/2022013120/5a6778aa7f8b9a8a378b4a2f/html5/thumbnails/48.jpg)
#MM17PL
Thank you!