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
   

   View Slide

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)
   

   View Slide

3. Web Performance is ensuring content is
   quick to load and responsive to user
   interaction.
   https://developer.mozilla.org/en-US/docs/Learn/Performance
   

   View Slide

4. What we hope you get out of today...
   On the web,
   every millisecond matters.
   

   View Slide

5. Why Web Performance Matters
   1
   

   View Slide

6. In 2010, Google made pagespeed a
   ranking factor for desktop searches, in
   2018 they did the same for mobile
   searches
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

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/
   

   View Slide

10. Performance is a
    foundational aspect of
    good user experiences.
    https://developers.google.com/web/fundamentals/performance/why-performa
    nce-matters
    

    View Slide

11. Analyzing Speed + Using Devtools
    2
    

    View Slide

12. How to measure performance
    +
    

    View Slide

13. Tree Shaking
    3
    

    View Slide

14. Tree
    Shaking
    (let’s shake some trees)
    

    View Slide

15. View Slide

16. https://webpack.js.org
    Before tree shaking...there
    was bundling.
    

    View Slide

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.
    

    View Slide

18. import module;
    (introduced in ES2015 to replace
    CommonJS modules’
    require()
    )
    

    View Slide

19. nav.js
    node_modules/
    lodash/lodash.js
    api.js
    stuff.js utils.js
    app.js
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    

    View Slide

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.
    

    View Slide

21. nav.js
    node_modules/
    lodash/lodash.js
    api.js
    stuff.js utils.js
    app.js
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    

    View Slide

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?
    

    View Slide

23. import seuss;
    import {thing1, thing2} from seuss;
    seuss = 1 MB
    thing1, thing2 = 100 kB
    900 kB savings!
    

    View Slide

24. https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/
    webpack.config.js
    

    View Slide

25. nav.js
    node_modules/
    lodash/lodash.js
    api.js
    stuff.js utils.js
    app.js
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    import “...”;
    

    View Slide

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;
    

    View Slide

27. More details and if things
    go wrong:
    https://developers.google.com/web/fundamentals/performance/opti
    mizing-javascript/tree-shaking/
    

    View Slide

28. Network Optimizations Across the Stack
    4
    

    View Slide

29. Ugly code is
    good.
    

    View Slide

30. Ugly production code +
    pretty development
    code is ideal.
    

    View Slide

31. Minimization +
    concatenation
    

    View Slide

32. Before Minify + Concat After Minify + Concat
    33%
    

    View Slide

33. source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
    DNS Prefetching
    what?!
    

    View Slide

34. source: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
    

    View Slide

35. Image Optimizations:
    WebP, Responsive
    Images, and srcset
    

    View Slide

36. WebP is an alternative image format
    with lossy and lossless compression.
    Ok, but what does this mean?
    (WebP is really lightweight and fast.)
    

    View Slide

37. source: https://developers.google.com/speed/webp/gallery1
    JPEG file size: 251.03 KB WebP file size: 172.82 KB
    31%
    

    View Slide

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
    

    View Slide

39. Browser Support: WebP
    source: https://caniuse.com/#search=webp
    

    View Slide

40. WebP
    JPEG
    

    View Slide

41. source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
    

    View Slide

42. Responsive images
    + srcset
    

    View Slide

43. Mobile Desktop
    

    View Slide

44. srcset: Deliver
    the right image to
    the right device.
    

    View Slide

45. Intelligent Image Delivery with srcset
    source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
    

    View Slide

46. Browser Support: srcset
    source: https://caniuse.com/#search=srcset
    

    View Slide

47. Delivering fast:
    Using a CDN
    (Content Delivery Network)
    

    View Slide

48. source: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
    

    View Slide

49. View Slide

50. For more on web performance…
    css-tricks.com/tag/performance/
    

    View Slide

51. API Optimizations and Caching
    5
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

54. https://deanhume.com/service-workers-can-save-the-environment/
    

    View Slide

55. https://deanhume.com/service-workers-can-save-the-environment/
    

    View Slide

56. Service Worker Life Cycle
    Every service worker goes through three steps in its lifecycle:
    ● Registration
    ● Installation
    ● Activation
    

    View Slide

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
    

    View Slide

58. Installing the Service Worker
    self.addEventListener('install', function(event) {
    // Do stuff during install
    });
    https://developers.google.com/web/ilt/pwa
    

    View Slide

59. Activating the Service Worker
    self.addEventListener('activate', function(event) {
    // Do stuff during activate
    });
    https://developers.google.com/web/ilt/pwa
    

    View Slide

60. For more on service workers…
    developers.google.com/web/ilt/pwa/introduction-to-service-worker
    

    View Slide

61. Conclusion
    6
    

    View Slide

62. Build awesome websites.
    Make them fast.
    

    View Slide

63. Web Performance and
    Optimization
    IEEE@UC Talk - 2020.03.05
    

    View Slide