Title slide Subtitle Add speaker name here Optimize your Title - PowerPoint PPT Presentation

Title slide Subtitle Add speaker name here

Optimize your Title slide Javascript Subtitle Add speaker name here Sa š a Nikoli ć

Sa š a Nikoli ć Developer at MD Systems You can find me at: ● drupal.org: sasanikolic ● @sasanikolic90 ● sasa.nikolic@md-systems.ch ● http://sasanikolic.com

Share of web traffic by device Laptops and desktops Tablet devices Mobile phones # 43% 52% 4% Year on year change Year on year change Year on year change -3% +4% -13% Source: We are social

Source: Source: OpenSignal

Source: Source: OpenSignal Source: Digitaltrends

Source: Source: OpenSignal Source: Digitaltrends Source: giphy.com

Javascript has a cost ● Client-side framework or UI library ● A state management solution (e.g. Redux) ● Polyfills (often for modern browsers that don't need them) ● Full libraries (e.g. lodash, moment.js + locales) ● A suite of UI components (buttons, headers, sidebars, etc.)

Things are getting better Time until interactive Source: https://httparchive.org > 15 sec! From 1. 2. 2016 to 1. 2. 2019 for Drupal on average JavaScript Bytes JavaScript Requests JavaScript bootup time The sum of kilobytes of The number of external The amount of CPU scripts requested by the each script consumes all external scripts page per page requested by the page (minified and gzipped code)

Loading? Useful? Usable? Phases of a website’s loading experience ~Source: https://developers.google.com/web/fundamentals/performance/rail

Table of content Why? ? Why do we need to improve (mobile) JS performance? How to test / audit your site Tools to test the performance of your site based on various factors. Practical tips for optimizing your JS Common practices when writing JS code 🚁 Suggestions Source: worldstrides.com

Workflow How do we know if we have a JS problem? 1 MEASURE Lighthouse - performance audits 2 OPTIMIZE Make improvements and optimizations 3 MONITOR Monitor your site

1 Tools to measure Which tools can we use? ● Firefox / Chrome Developer Tools ● Benchmark.js ● WebPageTest ● jsben.ch ● Google Pagespeed insights ● DeviceTiming ● Google Lighthouse ● User Timing API ● Google TestMySite ● Calibre ● Speedcurve Tip: > ls -l

1 Experiment Do experiment one step at a time 1. Make one change at a time 2. Measure after every change

1 Lighthouse Source: developers.google.com

1 Lighthouse

1 Lighthouse

1 Lighthouse

2 Optimize the size How can we optimize our JS? SMALLER SIZE BETTER CACHING To reduce time of first page To reduce time of later page load loads

2 Reducing the size How can we reduce the size of our JS? COMPRESSION PRECOMPRESSION ● Use gzip to compress text-based ● To reduce server load ● With Webpack using simple plugins resources ● Brotli for better compression ratio ● Or locally with brotli/gzip and deploy to ● Zopfli apache/nginx ● Packer ● DojoShrinkSafe Gains on first ● YUI Compressor meaningful paint ● try them with CompressorRater

2 Reducing the size Reduce the amount of JS code by minifying it MINIFICATION ● Reduce the size ○ Comments and white spaces are stripped ○ Shortens syntax ○ Converts code to abstract syntax tree (AST) ● Use UglifyJS for minifying ES5 code ● Use babel-minify or uglify-es to minify ES6

2 Reducing the size Optimize JS source code with prepack and closure compiler CLOSURE COMPILER PREPACK ● Tool to make JS download and run faster ● Makes js code run faster ● Compiles JS to better JS ● Eliminate abstraction tags ○ Parse JS ● Compilations done at compilation ○ Analyze JS time instead of run time ○ Remove dead code ○ Rewrites and minimizes what's left

2 Reducing the size Reduce the size with code splitting technique CODE SPLITTING ● Vendor splitting ○ Two files; for custom code and libraries ● Entry point splitting ○ Chunks per route ● Dynamic splitting Source: https://media.giphy.com/media/ 26h0oZIGGOFZdZj4Q/giphy.gif

2 Reducing the size Remove extra dependencies with Tree Shaking TREE SHAKING ● A form of "dead code elimination" - Rollup ● Removes unused dependencies Source: https://www.keycdn.com/ blog/tree-shaking

2 Reducing the size Example of Tree Shaking technique

2 Reducing the size Effective example of Tree Shaking technique modules.js index.js Reduced size of up to 30%

2 Always look for new solutions Try new things like Next.js NEXT.JS ● Try switching from react boilerplate to Next.js ○ React framework with built-in automatic code splitting, server side rendering, static exporting… ○ Switch is invisible ○ “Free” performance with few adjustments ○ Optimised code-splitting ○ Claimed 7.5x performance increase

2 Caching ● Optimize subsequent loads ● Use HTTP caching ○ Determine optimal lifetimes (max-age) ○ Supply validation tokens (ETag) ● Use long-term caching, see filename hashing.

2 Caching ● Use Service workers ○ Rich offline experiences ○ Periodic background sync ○ Push notifications

2 More optimizations More useful optimizations ● Lazy “on demand” loading based on breakpoints ● Prebrowsing ○ Preload ○ Prefetch ○ Preconnect

2 Micro optimisations A list of useful tips ● Use HTTP/2 ● Cut down your scope chain ● Use native js functions like ○ Use the local scope ● Use async and defer getElementById() and constructs ● Batch your dom changes ● Use requestAnimationFrame() to speed up ● Mind your event handlers animations ● Use click() instead of mouseup() ● Use throttle and debounce ● Use css3 effects instead of js

2 Micro optimisations A list of useful tips ● Reduce global variables ● Comment your code ○ Define variables in a global object or in ● Don't pass a string to setInterval or closures setTimeOut ● Declare variables outside of for loops ● Don't use with statement ● Use === instead of == ● Use {} instead of new Object() ● eval() = evil ● Use [] instead of new Array() ○ eval("obj." + id); instead obj[id] ● Utilize JS Lint ● Don't omit curly braces and semicolons ● Read, read, read... ● Place scripts at the bottom of the page

“ Software ages like milk, not like wine “ Title slide Subtitle Unknown Add speaker name here

3 Monitor How can we monitor our JS? ● Check the weight of external libraries (i.e. moment.js -> locale-fns, date-fns, dayjs) ○ Source-map explorer ○ Webpack bundle analyser ● Audit 3rd party libraries ○ Do they provide any value? ○ Lazy load embeds ● Polyfills (i.e. for JS promises) ● WRITE TESTS!

GOALS - KNOW THE PURPOSE AND END USERS - DON’T FORCE THE USE OF JS - ADOPT PERFORMANCE BUDGETS & CULTURE < 5s first-load < 2s subsequent

Join us for contribution opportunities Friday, April 12, 2019 Title slide Mentored First Time General Contribution Contributor Workshop Contribution Subtitle 9:00-18:00 9:00-12:00 9:00-18:00 Room: 602 Room: 606 Room: 6A #DrupalContributions Add speaker name here

What did you think? Locate this session at the DrupalCon Seattle website: https://events.drupal.org/seattle2019/sessions/optimize-your-javascript Title slide Take the Survey! https://www.surveymonkey.com/r/DrupalConSeattle Subtitle Add speaker name here

Sources Helpful links ● https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript- execution ● https://alistapart.com/article/responsible-javascript-part-1 ● https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 ● https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/ ● https://developers.google.com/web/fundamentals/performance/rail ● https://www.youtube.com/watch?v=Gl8vucNqtZQ&t=717s ● https://css-tricks.com/the-bottleneck-of-the-web/

Thank you! Title slide Subtitle Add speaker name here