8 tips on javascript performance tools and tips

1. Shining a light on Performance

3. Shining a light on Performance

4. Shining a light on Performance

5. 1. Lighthouse & PageSpeed Insights
● Lighthouse in Chrome Dev Tools (CDT)
● PageSpeed Insights

6. Audits

11. PageSpeed Insights

12. Useful Links
● PageSpeed Insights:
https://developers.google.com/web/fundamentals/primers/service-workers/
● Lighthouse homepage:
https://developers.google.com/web/tools/lighthouse
● Video: Use Lighthouse and Chrome UX Report to optimize web app performance:
https://www.youtube.com/watch?v=UvK9zAsSM8Q
● Web Fundamentals - Performance
https://developers.google.com/web/fundamentals/performance/why-
performance-matters

13. 2. More Tools
● Rendering tab (CDT)
● Lighthouse CI

14. Paint Flashing
FPS Meter
Scrolling
Performance
Issues

16. Useful Links
● Lighthouse CI:
https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-
started.md
● Analyze rendering performance with the Rendering tab:
https://developers.google.com/web/tools/chrome-devtools/evaluate-
performance/reference#rendering

17. 3. Memoization
“...memoization is an optimization technique
used primarily to speed up computer
programs by storing the results of
expensive function calls and returning the
cached result when the same inputs occur
again…”

18. Useful Links
● React:
- React.memo: https://reactjs.org/docs/react-api.html#reactmemo
- useMemo hook: https://reactjs.org/docs/hooks-reference.html#usememo
● Reselect: https://github.com/reduxjs/reselect
● Memoize-one: https://github.com/alexreardon/memoize-one#readme

19. 4. Virtual Scroll (Windowing)
“Virtual scrolling =
rendering just enough
content to fill the screen
and continuously updating
as the user scrolls.”

21. DRIVE (no virtual-scroll) PHOTOS (with virtual-scroll)

22. Useful Links
● React-Window:
https://react-window.now.sh
● Video - virtual-scroller: Let there be less (DOM) (Chrome Dev Summit 2018)
https://www.youtube.com/watch?v=UtD41bn6kJ0
● Angular cdk-virtual-scroll-viewport:
https://material.angular.io/cdk/scrolling/overview
● Vue Virtual Scroller
https://github.com/Akryum/vue-virtual-scroller
● Recycler List View:
https://github.com/Flipkart/recyclerlistview

23. 5. Unused Code
● Code splitting
● Tree Shaking
● Polyfills & Transplilling
● Code Coverage in Dev Tools

26. Useful Links
● Webpack Tree Shaking:
https://webpack.js.org/guides/tree-shaking/
● Making instagram.com faster (part 4)
https://instagram-engineering.com/making-instagram-com-faster-code-size-
and-execution-optimizations-part-4-57668be796a8
● Find Unused JavaScript And CSS Code With The Coverage Tab:
https://developers.google.com/web/tools/chrome-devtools/coverage
● Polyfill.IO:
https://polyfill.io

27. 6. Fonts
● font-display: swap;
● Pre-load & cache (service worker)

28. Useful Links
● font-display on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
● A Comprehensive Guide to Font Loading Strategies
https://www.zachleat.com/web/comprehensive-webfonts/#preload
● The Web Font Loading Glossary:
https://www.zachleat.com/web/webfont-glossary/
● FontFaceSet.ready:
https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready

29. 7. Service workers
● PWA
● Caching
● Workbox

31. Useful Links
● Service workers primer:
https://developers.google.com/web/fundamentals/primers/service-workers/
● Service worker cookbook:
https://serviceworke.rs
● Google’s workbox:
https://developers.google.com/web/tools/workbox
● Gatsby offline plugin:
https://www.gatsbyjs.org/packages/gatsby-plugin-offline/

32. 8. Media Optimization
● Optimize
● CDN
● Lazy Loading
● Pre connect & Pre Load

33. Increase in images usage (KB)

34. http://hdqwalls.com/wallpapers/the-witcher-henry-cavill-bo.jpg
https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto,w_900
/https://hdqwalls.com/wallpapers/the-witcher-henry-cavill-bo.jpg

35. https://developers.google.com/web/updates/2019/09/nic77#lazy-loading
<img src="image.jpg"
loading="lazy"
width="400" height="250" >

36. Useful Links
● Compress Images for Web and Boost Performance on Your Site:
https://cloudinary.com/blog/compress_images_for_web_and_boost_performance
_on_your_site
● New Auto-Quality Setting for Content-Aware Video Compression:
https://cloudinary.com/blog/new_auto_quality_setting_for_content_aware_video_
compression
● Native lazy-loading for the web:
https://web.dev/native-lazy-loading/
● Preload, Prefetch And Priorities in Chrome:
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-
776165961bbf

37. 1. Lighthouse & PageSpeed Insights
2. More Tools
3. Memoization
4. Virtual Scroll
5. Unused Code
6. Fonts
7. Service Workers
8. Media Optimization

38. Thank You