Web Performance and Optimization

A survey of web performance and Optimization topics. Presented at IEEE@UC.

Topics:
- Why Performance Matters
- Chrome Developer Tools
- Tree Shaking Optimization
- Network Optimization
- Caching Files with Service Worker

Transcript

1. Web Performance and Optimization IEEE@UC Talk - 2020.03.05
2. Today’s Topics 1. Why web performance matters (Isiah) 2. Analyzing speed and using devtools (Isiah) 3. Tree shaking optimizations (Kristian) 4. Network optimizations across the full stack (Noah) 5. API optimizations and caching (Omar)
3. Web Performance is ensuring content is quick to load and responsive to user interaction. https://developer.mozilla.org/en-US/docs/Learn/Performance
4. What we hope you get out of today... On the web, every millisecond matters.
5. Why Web Performance Matters 1
6. In 2010, Google made pagespeed a ranking factor for desktop searches, in 2018 they did the same for mobile searches
7. Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. https://medium.com/pinterest-engineering/driving-user-growth-with-performan ce-improvements-cfc50dafadd7
8. What happens if you don’t optimize? Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load. https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mo bile-page-speed-new-industry-benchmarks/
9. There have been rapid gains in reported internet access rates in a large number of emerging and developing nations https://www.pewresearch.org/global/2016/02/22/internet-access-growing-world wide-but-remains-higher-in-advanced-economies/
10. Performance is a foundational aspect of good user experiences. https://developers.google.com/web/fundamentals/performance/why-performa nce-matters
11. Analyzing Speed + Using Devtools 2
12. How to measure performance +
13. Tree Shaking 3
14. Tree Shaking (let’s shake some trees)
16. https://webpack.js.org Before tree shaking...there was bundling.
17. https://webpack.js.org Before tree shaking...there was bundling. Bundling is taking multiple files with dependencies and wrapping them together into a single file.
18. import module; (introduced in ES2015 to replace CommonJS modules’ require() )
19. nav.js node_modules/ lodash/lodash.js api.js stuff.js utils.js app.js import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; import “...”;
20. nav.js node_modules/ lodash/lodash.js api.js stuff.js utils.js app.js import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; This can be evaluated statically.
21. nav.js node_modules/ lodash/lodash.js api.js stuff.js utils.js app.js import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; import “...”;
22. nav.js node_modules/ lodash/lodash.js api.js stuff.js utils.js app.js import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; How do we only import what we’re actually using?
23. import seuss; import {thing1, thing2} from seuss; seuss = 1 MB thing1, thing2 = 100 kB 900 kB savings!
24. https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/ webpack.config.js
25. nav.js node_modules/ lodash/lodash.js api.js stuff.js utils.js app.js import “...”; import “...”; import “...”; import “...”; import “...”; import “...”; import “...”;
26. utils.js nav.js stuff.js app.js import { lots, of, stuff } from “stuff.js”; import { get } from “api.js”; import { bigSort } from “utils.js”; import { hover } from “nav.js”; import { click } from “nav.js”; import sortBy from lodash-es/sortBy; api.js _.js import sortBy from lodash-es/sortBy;
27. More details and if things go wrong: https://developers.google.com/web/fundamentals/performance/opti mizing-javascript/tree-shaking/
28. Network Optimizations Across the Stack 4
29. Ugly code is good.
30. Ugly production code + pretty development code is ideal.
31. Minimization + concatenation
32. Before Minify + Concat After Minify + Concat 33%
33. source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch DNS Prefetching what?!
34. source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
35. Image Optimizations: WebP, Responsive Images, and srcset
36. WebP is an alternative image format with lossy and lossless compression. Ok, but what does this mean? (WebP is really lightweight and fast.)
37. source: https://developers.google.com/speed/webp/gallery1 JPEG file size: 251.03 KB WebP file size: 172.82 KB 31%
38. Lossy WebP images average 25–35% smaller than JPEG images of visually similar compression levels. —Mozilla source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
39. Browser Support: WebP source: https://caniuse.com/#search=webp
40. WebP JPEG
41. source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
42. Responsive images + srcset
43. Mobile Desktop
44. srcset: Deliver the right image to the right device.
45. Intelligent Image Delivery with srcset source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
46. Browser Support: srcset source: https://caniuse.com/#search=srcset
47. Delivering fast: Using a CDN (Content Delivery Network)
48. source: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
50. For more on web performance… css-tricks.com/tag/performance/
51. API Optimizations and Caching 5
52. What is Browser Cache? Browser cache is a temporary storage location on your local machine for resources that are downloaded by your browser to display web pages. Examples of downloaded (cached) contents: • HTML documents • CSS stylesheets • JavaScript scripts • Multimedia content
53. What is a Service Worker? A service worker is a script that your browser runs in the background of an web page (separate from the page), allowing features that do not require any sort of user interaction like push notifications.
54. https://deanhume.com/service-workers-can-save-the-environment/
55. https://deanhume.com/service-workers-can-save-the-environment/
56. Service Worker Life Cycle Every service worker goes through three steps in its lifecycle: • Registration • Installation • Activation
57. Register the Service Worker if (!('serviceWorker' in navigator)) { console.log('Service Worker not supported'); return; } navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('SW registered! Scope is:', registration.scope); }); // .catch a registration error https://developers.google.com/web/ilt/pwa
58. Installing the Service Worker self.addEventListener('install', function(event) { // Do stuff during install }); https://developers.google.com/web/ilt/pwa
59. Activating the Service Worker self.addEventListener('activate', function(event) { // Do stuff during activate }); https://developers.google.com/web/ilt/pwa
60. For more on service workers… developers.google.com/web/ilt/pwa/introduction-to-service-worker
61. Conclusion 6
62. Build awesome websites. Make them fast.
63. Web Performance and Optimization IEEE@UC Talk - 2020.03.05