Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017

#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

#MM17PL

#MM17PL

#MM17PL

Performance =

Happiness =

Conversion =

Money

#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

#MM17PL

#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

#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?

#MM17PL

#MM17PL

Which config perform best?

Minification?

Merging?Bundling?

#MM17PL

Always enableminification and merging

It saves data (better compression) and reduce number of requests

#MM17PL

To bundle or not to bundle

Not bundle

OnOff

#MM17PL

What’s the starting point?

Magento 2.1.8 + Sample data + Luma theme

Minification and merging enabled, bundling off

HTTPS + HTTP/2 + GZIP

#MM17PL

#MM17PL

#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

#MM17PL

Annihilate render blocking resources

Let’s make everything asynchronous!

#MM17PL

Asynchronous stylesheets

Because asynchronous JS isn’t enough

You can save here 800-1000 ms

#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" />

#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

#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

#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; }

#MM17PL

<link href="<?= $this->assetRepo->getUrl('css/styles.css') ?>" rel="preload" as="style" onload="this.rel='stylesheet'; document.body.className += ' loaded'" />

#MM17PL

Images lazy-loadingTo load images when they are really necessary

You can save here 500-1500+ ms - depends on images overall weight

#MM17PL

lazysizes.jshttps://github.com/aFarkas/lazysizes

<script src="Magento_Theme::js/lib/lazysizes.js" async="true" />

Magento_Theme/layout/default_head_blocks.xml

#MM17PL

<img class="lazyload" data-src="<?= $block->getLogoSrc() ?>" >

<img src="<?= $block->getLogoSrc() ?>">

#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/

#MM17PL

Avoid synchronous JSCheck 3rd party extensions, many of them ignore

existence of Require JS

#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" />


#MM17PL

Reduce payload

#MM17PL

Merge stylesheetsSince asynchronous approach is not supported by the core, so we have to care about merging

on our end


#MM17PL

Optimize imagesCompression, downsize, lower quality, WebP

You can save here… a lot! Store maintainers tends to load heavy images.

#MM17PL

Use responsive images

Load images conditionally depends on user device screen size

You can save here a lot - up to 50-70% reduce

#MM17PL

Reduce number of fontsFont is just an enchantment, not a content.

You can use system fonts instead.

#MM17PL

Load web fonts in WOFF2 format

But if really have to load fonts…

#MM17PL

Optimize fonts loading

https://www.zachleat.com/web/comprehensive-webfonts/

#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.

#MM17PL

Results

First meaningful paint

1,830 ms faster

First interactive

2,190 ms faster

Consistently interactive

1,970 ms faster

#MM17PL

#MM17PL

https://github.com/antonkril/magento-rjs-config

#MM17PL

Entry point

Merging + minification enabledBundling off

Performance index: 53

#MM17PL

R.js bundling - sync

Merging + minification enabledCustom R.js bundling

Bundle added via layout and loaded synchronously


#MM17PL

R.js bundling - async Merging + minification enabled

Custom R.js bundling Bundle defined in RequireJS config and loaded

asynchronously


#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

#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

https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/

#MM17PL

Q & A Time!Let’s stay in touch Twitter: @igloczek

Blog: iglo.tech [email protected]

#MM17PL

https://hacktoberfest.digitalocean.com/

#MM17PL

Thank you!

Internet

Magento 2 Front-end performance tips & tricks - Meet Magento Poland 2017