Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,204 views

Published on

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.

Even the best-optimized back-end solution can be ruined by the bunch of JavaScript libraries or even just not optimised images. It’s really easy to forget about front-end performance or let you clients ruin it just by adding unoptimized content and tons of tracking scripts.

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.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. #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
  2. 2. #MM17PL
  3. 3. #MM17PL
  4. 4. #MM17PL Performance = Happiness = Conversion = Money
  5. 5. #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
  6. 6. #MM17PL
  7. 7. #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
  8. 8. #MM17PL 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?
  9. 9. #MM17PL
  10. 10. #MM17PL Which config perform best? Minification? Merging? Bundling?
  11. 11. #MM17PL Always enable
 minification and merging It saves data (better compression) 
 and reduce number of requests
  12. 12. #MM17PL To bundle or not to bundle Not bundle OnOff
  13. 13. #MM17PL What’s the starting point? Magento 2.1.8 + Sample data + Luma theme Minification and merging enabled, bundling off HTTPS + HTTP/2 + GZIP
  14. 14. #MM17PL
  15. 15. #MM17PL
  16. 16. #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
  17. 17. #MM17PL Annihilate render blocking resources Let’s make everything asynchronous!
  18. 18. #MM17PL Asynchronous stylesheets Because asynchronous JS isn’t enough You can save here 800-1000 ms
  19. 19. #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" />
  20. 20. #MM17PL Inline CSS 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 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
  21. 21. #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
  22. 22. #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; }
  23. 23. #MM17PL <link href="<?= $this->assetRepo->getUrl('css/styles.css') ?>" rel="preload" as="style" onload="this.rel='stylesheet'; document.body.className += ' loaded'" />
  24. 24. #MM17PL Images lazy-loading To load images when they are really necessary You can save here 500-1500+ ms - depends on images overall weight
  25. 25. #MM17PL lazysizes.js https://github.com/aFarkas/lazysizes <script src="Magento_Theme::js/lib/lazysizes.js" async="true" /> Magento_Theme/layout/default_head_blocks.xml
  26. 26. #MM17PL <img class="lazyload" data-src="<?= $block->getLogoSrc() ?>" > <img src="<?= $block->getLogoSrc() ?>">
  27. 27. #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/
  28. 28. #MM17PL Avoid synchronous JS Check 3rd party extensions, many of them ignore existence of Require JS
  29. 29. #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
  30. 30. #MM17PL Reduce payload
  31. 31. #MM17PL Merge stylesheets Since 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
  32. 32. #MM17PL Optimize images Compression, downsize, lower quality, WebP You can save here… a lot! Store maintainers tends to load heavy images.
  33. 33. #MM17PL Use responsive images Load images conditionally depends on user device screen size You can save here a lot - up to 50-70% reduce
  34. 34. #MM17PL Reduce number of fonts Font is just an enchantment, not a content. You can use system fonts instead.
  35. 35. #MM17PL Load web fonts in WOFF2 format But if really have to load fonts…
  36. 36. #MM17PL Optimize fonts loading https://www.zachleat.com/web/comprehensive-webfonts/
  37. 37. #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.
  38. 38. #MM17PL Results First meaningful paint 1,830 ms faster First interactive 2,190 ms faster Consistently interactive 1,970 ms faster
  39. 39. #MM17PL
  40. 40. #MM17PL https://github.com/antonkril/magento-rjs-config
  41. 41. #MM17PL Entry point Merging + minification enabled
 Bundling off Performance index: 53
  42. 42. #MM17PL R.js bundling - sync Merging + minification enabled
 Custom R.js bundling Bundle added via layout and loaded synchronously Performance index: 56
  43. 43. #MM17PL R.js bundling - async Merging + minification enabled
 Custom R.js bundling Bundle defined in RequireJS config and loaded asynchronously Performance index: 68
  44. 44. #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
  45. 45. #MM17PL Further reading Front End Performance Checklist 2017 https://www.smashingmagazine.com/2016/12/front-end-performance- checklist-2017-pdf-pages/ https://github.com/SnowdogApps/magento2-theme-performance
  46. 46. #MM17PL Q & A Time! Let’s stay in touch Twitter: @igloczek Blog: iglo.tech bartek.igielski@snow.dog
  47. 47. #MM17PL https://hacktoberfest.digitalocean.com/
  48. 48. #MM17PL Thank you!

×