Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4%...
Transcript of Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4%...
![Page 1: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/1.jpg)
Subtitle
Add speaker name here
Title slide
![Page 2: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/2.jpg)
Subtitle
Add speaker name here
Title slide
Saša Nikolić
Optimize your Javascript
![Page 3: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/3.jpg)
Saša Nikolić
Developer at MD Systems
You can find me at:
● drupal.org: sasanikolic
● @sasanikolic90
● http://sasanikolic.com
![Page 4: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/4.jpg)
![Page 5: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/5.jpg)
Share of web traffic by device
4%Year on year changeYear on year change
52%Year on year change
43%
#
-3% +4%
Laptops and desktops Mobile phones Tablet devices
-13%
Source: We are social
![Page 6: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/6.jpg)
![Page 7: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/7.jpg)
Source: Source: OpenSignal
![Page 8: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/8.jpg)
Source: Digitaltrends
Source: Source: OpenSignal
![Page 9: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/9.jpg)
Source: Digitaltrends
Source: giphy.com
Source: Source: OpenSignal
![Page 10: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/10.jpg)
![Page 11: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/11.jpg)
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.)
![Page 12: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/12.jpg)
Things are getting better Source: https://httparchive.org
From 1. 2. 2016 to 1. 2. 2019 for Drupal
JavaScript Requests JavaScript bootup timeJavaScript Bytes
The sum of kilobytes of
all external scripts
requested by the page
(minified and gzipped
code)
The number of external
scripts requested by the
page
The amount of CPU
each script consumes
per page
Time until interactive
> 15 sec!on average
![Page 13: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/13.jpg)
Phases of a website’s loading experience
~Source: https://developers.google.com/web/fundamentals/performance/rail
Loading? Useful? Usable?
![Page 14: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/14.jpg)
Table of content
Suggestions
Why?Why do we need to improve (mobile) JS
performance?
How to test / audit your siteTools to test the performance of your site
based on various factors.
🚀
?
Practical tips for optimizing your JS Common practices when writing JS code
Source: worldstrides.com
![Page 15: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/15.jpg)
WorkflowHow do we know if we have a JS problem?
MONITORMonitor your site
MEASURELighthouse - performance audits
OPTIMIZEMake improvements and optimizations
2
3
1
![Page 16: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/16.jpg)
Tools to measure1● Firefox / Chrome Developer Tools
● WebPageTest
● Google Pagespeed insights
● Google Lighthouse
● Google TestMySite
● Calibre
● Speedcurve
● Benchmark.js
● jsben.ch
● DeviceTiming
● User Timing API
Which tools can we use?
Tip:
> ls -l
![Page 17: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/17.jpg)
ExperimentDo experiment one step at a time
11. Make one change at a time
2. Measure after every change
![Page 18: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/18.jpg)
Lighthouse1
Source: developers.google.com
![Page 19: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/19.jpg)
Lighthouse1
![Page 20: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/20.jpg)
Lighthouse1
![Page 21: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/21.jpg)
Lighthouse1
![Page 22: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/22.jpg)
Optimize the sizeHow can we optimize our JS?
2
SMALLER SIZE BETTER CACHING
To reduce time of first page
load
To reduce time of later page
loads
![Page 23: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/23.jpg)
Reducing the sizeHow can we reduce the size of our JS?
2
COMPRESSION
● Use gzip to compress text-based
resources
● Brotli for better compression ratio
● Zopfli
● Packer
● DojoShrinkSafe
● YUI Compressor
● try them with CompressorRater
PRECOMPRESSION
● To reduce server load
● With Webpack using simple plugins
● Or locally with brotli/gzip and deploy to
apache/nginx
Gains on first meaningful paint
![Page 24: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/24.jpg)
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
Reducing the sizeReduce the amount of JS code by minifying it
2
![Page 25: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/25.jpg)
Reducing the sizeOptimize JS source code with prepack and
closure compiler
2
PREPACK
● Makes js code run faster
● Eliminate abstraction tags
● Compilations done at compilation
time instead of run time
CLOSURE COMPILER
● Tool to make JS download and run faster
● Compiles JS to better JS
○ Parse JS
○ Analyze JS
○ Remove dead code
○ Rewrites and minimizes what's left
![Page 26: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/26.jpg)
Reducing the sizeReduce the size with code splitting technique
2
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
![Page 27: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/27.jpg)
Reducing the sizeRemove extra dependencies with Tree Shaking
2
TREE SHAKING
● A form of "dead code elimination" - Rollup
● Removes unused dependencies
Source: https://www.keycdn.com/
blog/tree-shaking
![Page 28: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/28.jpg)
Reducing the sizeExample of Tree Shaking technique
2
![Page 29: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/29.jpg)
Reducing the sizeEffective example of Tree Shaking technique
2
modules.js index.js
Reduced size of up to 30%
![Page 30: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/30.jpg)
Always look for new solutionsTry new things like Next.js
2
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
![Page 31: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/31.jpg)
Caching2● Optimize subsequent loads
● Use HTTP caching
○ Determine optimal lifetimes (max-age)
○ Supply validation tokens (ETag)
● Use long-term caching, see filename hashing.
![Page 32: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/32.jpg)
Caching2● Use Service workers
○ Rich offline experiences
○ Periodic background sync
○ Push notifications
![Page 33: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/33.jpg)
More optimizationsMore useful optimizations
● Lazy “on demand” loading based on breakpoints
● Prebrowsing
○ Preload
○ Prefetch
○ Preconnect
2
![Page 34: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/34.jpg)
Micro optimisationsA list of useful tips
● Use HTTP/2
● Use native js functions like
getElementById() and constructs
● Batch your dom changes
● Mind your event handlers
● Use click() instead of mouseup()
● Cut down your scope chain
○ Use the local scope
● Use async and defer
● Use requestAnimationFrame() to speed up
animations
● Use throttle and debounce
● Use css3 effects instead of js
2
![Page 35: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/35.jpg)
Micro optimisationsA list of useful tips
● Reduce global variables
○ Define variables in a global object or in
closures
● Declare variables outside of for loops
● Use === instead of ==
● eval() = evil
○ eval("obj." + id); instead obj[id]
● Don't omit curly braces and semicolons
● Place scripts at the bottom of the page
● Comment your code
● Don't pass a string to setInterval or
setTimeOut
● Don't use with statement
● Use {} instead of new Object()
● Use [] instead of new Array()
● Utilize JS Lint
● Read, read, read...
2
![Page 36: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/36.jpg)
Subtitle
Add speaker name here
Title slide
Software ages like milk, not like wine
Unknown
“ “
![Page 37: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/37.jpg)
MonitorHow can we monitor our JS?
3● 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!
![Page 38: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/38.jpg)
GOALS
- KNOW THE PURPOSE AND END USERS
- DON’T FORCE THE USE OF JS
- ADOPT PERFORMANCE BUDGETS & CULTURE
< 5s first-load < 2s subsequent
![Page 39: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/39.jpg)
Subtitle
Add speaker name here
Title slide
Join us forcontribution opportunities
Friday, April 12, 2019
9:00-18:00 Room: 602
Mentored Contribution
First TimeContributor Workshop
GeneralContribution
#DrupalContributions
9:00-12:00 Room: 606
9:00-18:00 Room: 6A
![Page 40: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/40.jpg)
Subtitle
Add speaker name here
Title slide
What did you think?
Locate this session at the DrupalCon Seattle website:
https://events.drupal.org/seattle2019/sessions/optimize-your-javascript
Take the Survey!
https://www.surveymonkey.com/r/DrupalConSeattle
![Page 41: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/41.jpg)
SourcesHelpful 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/
![Page 42: Drupalcon Seattle - Optimize your Javascript · 2019-04-11 · Share of web traffic by device 4% Year on year change Year on year change 52% Year on year change 43% #-3% +4% Laptops](https://reader033.fdocuments.in/reader033/viewer/2022042302/5ecd42854289ce0dfd6e2efe/html5/thumbnails/42.jpg)
Subtitle
Add speaker name here
Title slideThank you!