Frontend Performance & You

Frontend Performance & You

6696617169722009ed1ec8c52496c6da?s=128

Daniel Cousineau

May 03, 2019
Tweet

Transcript

  1. Frontend Performance and You A Beginner's Guide

  2. Frontend Performance and You A Beginner's Guide Checklist

  3. @dcousineau

  4. Any improvement is good

  5. Always measure first

  6. https://support.google.com/analytics/answer/2383341

  7. Page Load Time Redirect Domain Lookup Server Connect Server Response

    Document Interactive Document Content Loaded Parse & Compile TTI https://www.bounteous.com/insights/2015/09/09/guide-to-google-analytics-site-speed-metrics/
  8. None
  9. None
  10. https://speedcurve.com/

  11. A word on Lighthouse

  12. Making your servers faster is another talk

  13. Minify your outputs

  14. uglify terser

  15. cssnano

  16. Implement a CDN

  17. Not just for images!

  18. None
  19. None
  20. None
  21. 47.62ms one-way 95.23ms round-trip Penalty for simply existing

  22. 08.11ms one-way 16.23ms round-trip Penalty for simply existing

  23. None
  24. None
  25. Compress content over the wire

  26. Size Saved (Bytes) Saved (%) uncompressed 1,163,479 0 0.00% gzip

    353,215 810,264 69.64% zopfli 338,177 825,302 70.93% brotli 296,420 867,059 74.52% https://blog.kowalczyk.info/article/c11d3c20753445618b98d18be5ce037e/zopfli-vs.-brotli-vs.-gzip.html
  27. None
  28. None
  29. None
  30. Reduce request count

  31. https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x Browsers have max persistent connection limit per domain https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html

    ~6 per domain
  32. But domain sharding is old and busted

  33. Inline direct dependencies into responses

  34. None
  35. Inline initial data into HTML payloads

  36. None
  37. Preload / Prefetch

  38. (You’re putting your scripts at the bottom right?)

  39. https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf Prefetch Preload I will use this on the current

    page very soon I will use this eventually in the future <link rel=“preload” href=“app.js” as=“script” />
  40. https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

  41. But what about h2 push?

  42. tl;dr cache issues, proxy support

  43. Advanced usage: leveraging your pub/ marketing sites!

  44. <link rel=“preload” href=“app.js” as=“script” /> <script src=“app.js” />

  45. Load only what you need Stream the rest

  46. https://webpack.js.org/guides/code-splitting/

  47. None
  48. Load only visible images Load only what you need part

    2:
  49. Browser JS is Single-Threaded Concurrency* * Service Workers change this

    a little bit
  50. Loading & Rendering offscreen images can impact real (aka not-SEO)

    performance!
  51. None
  52. Better images Load only what you need part 2:

  53. Use srcset to load best sized images https://docs.imgix.com/tutorials/responsive-images-srcset-imgix

  54. <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

  55. Use smarter image formats Don’t send PNG unless you have

    to
  56. Safari Chrome Send webp Image Send jpeg2000* https://docs.imgix.com/tutorials/improved-compression-auto-content-negotiation * IE

    Send jpeg xr Send jpeg
  57. Use a 3rd party to help Bonus: checks the CDN

    box
  58. Optimized PERCEIVED Performance

  59. “Lie”

  60. http://assets.eli.wtf/talks/perceived-perf-talk/ @elifitch

  61. None
  62. Optimistically Render Local Data

  63. None
  64. Selectively Indicate Loading

  65. “Fake It Till You Make It”

  66. None
  67. None
  68. Additional reading

  69. https://scotch.io/tutorials/browser-rendering-optimizations-for-frontend-development Repaint, Reflow https://developers.google.com/web/fundamentals/performance/rendering/

  70. https://scotch.io/tutorials/how-to-use-chrome-dev-tools-to-find-performance-bottlenecks Chrome DevTool Audits

  71. Go to Josh Holme’s talk tomorrow

  72. https://github.com/NekR/offline-plugin Service Workers & offline-plugin https://webpack.js.org/guides/progressive-web-application/

  73. fin. Questions?