Delivering Fast Web Apps Faster

My talk for Google Developers Day Extended, Mumbai, presented at BookMyShow Office, Mumbai.

GIFs won't load here, so head over to the Google Slide for full experience: https://bit.ly/gddx-dec2017

Transcript

1. Delivering your Fast web-app fast Going that extra mile in the name of performance
2. Hello world! bit.ly/gddx-dec2017 Divjot Singh @bogas04
4. Technology is getting cheaper. Products are getting richer.
6. tl;dr
7. Send less Send ASAP Don’t send?
8. Send less
9. compression
10. Brotli Compression Algorithm produces 20% smaller compressed files (compared to GZip) BUT! Compression time is painstakingly poor Solution: Compress files Ahead-of-Time caniuse.com/#search=brotli
11. • File Compressions. • AoT Compressions. • WOFF2 Font format. Brotli, GZip, Ahead of Time, Web Fonts Compression
12. “Essential Image Optimization” - eBook by Addy Osmani https://images.guide “According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs.”
14. nucleoapp.com/premium-icons
15. • File Compressions. • AoT Compressions. • WOFF2 Font format. • Image Optimizations. Brotli, Gzip, Ahead of Time, Web Fonts, PNG Minification, SVGs Compression
16. 7.8x win
17. Original PNG 5836 bytes Minified SVG 742 bytes
18. Image Credit: jstips.co/en/about/
24. Parse time also reduced to half bit.ly/shipping-es2015 2.18x 8.33x 10.42x
25. • babel-preset-env. ship es2015? We can’t, but we can be smart about it.
27. • Babel-preset-env. • Feature detect with ES modules. ship es2015? We can’t, but we can be smart about it.
28. bit.ly/esm-feature-detect
29. • Babel-preset-env. • Feature detect with ES modules. • UA Sniffing for different bundles. • Polyfill.io does the same for polyfills. ship es2015? We can’t, but we can be smart about it.
31. • React 16 ◦ 30% smaller (React docs) ◦ 20% faster (UI Benchmark) ◦ 50% faster SSR ◦ Streaming support • Alternatives ◦ preact/inferno for React ◦ Moon for Vue frameworks Upgrade them all!
32. Switched to React 16 (45ms to 24ms) 50% win
33. • Opens up optimizations • Critical CSS for free css-in-js A developer experience upgrade with perf benefits? Heck yes!
34. App Search Home Content Footer Content Forms Main Items Sidebar Input Text Image Item 1 Item 2 About Button /home /search
35. “The Next Generation of CSS-in-JS” emotion.sh
37. Send asap
38. Size isn’t all that matters
39. Progressive jpegs Interlaced pngs
40. bit.ly/progressive-imgs
41. bit.ly/progressive-imgs
42. Progressive Images Primer: bit.ly/progressive-images-primer Image Credit: go.nasa.gov/2nr7MIm SAME SIZE SAME LOAD TIME
43. server
45. V8 TurboFan + Ignition bit.ly/v8_tf_ig
46. Switched to React 16 (45ms to 24ms) Switched to Node 8 (24ms to 11ms) 50% FTW
47. • Use NodeJS’s asynchronicity. • Stream HTML and inline CSS. • Stream inlined CSS. • Can give 5% win on TTI. streaming Users are many and impatient
48. Don’t send?
49. It’s not what you think it is bit.ly/netflix-react
50. Import Cost VSCode plugin bit.ly/import-cost
51. Webpack Bundle Analyzer npmjs.com/package/webpack-bundle-analyzer
52. Anyone who travels light travels happily
53. “The Cost of JavaScript” bit.ly/cost-of-js
54. • Code split at route or even feature level. • Use browser cache effectively. • Smart service-worker naming & caching. Use the cache The point of cache gets ‘missed’ when you ‘invalidate’ everything with each build.
55. Send less Send ASAP Don’t send
56. future?
57. React fiber in action
59. Firefox Quantum { CSS, Render, DOM }
60. Rise of Web components
66. bit.ly/web-component-sandbox
68. caniuse.com/#search=custom%20elements%20v1
69. WASM Use in frameworks/libraries
70. Project treble Less fragmentation Less worry
71. Thank you bit.ly/gddx-dec2017 Divjot Singh @bogas04