Frontend Performance & You

Given at Longhorn PHP 2019

Glossary of Links:

https://support.google.com/analytics/answer/2383341
https://speedcurve.com/
https://blog.kowalczyk.info/article/c11d3c20753445618b98d18be5ce037e/zopfli-vs.-brotli-vs.-gzip.html
https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html
https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
https://webpack.js.org/guides/code-splitting/
https://docs.imgix.com/tutorials/responsive-images-srcset-imgix
https://docs.imgix.com/tutorials/improved-compression-auto-content-negotiation
https://developers.google.com/web/fundamentals/performance/rendering/
http://assets.eli.wtf/talks/perceived-perf-talk/
https://scotch.io/tutorials/browser-rendering-optimizations-for-frontend-development
https://scotch.io/tutorials/how-to-use-chrome-dev-tools-to-find-performance-bottlenecks
https://github.com/NekR/offline-plugin
https://webpack.js.org/guides/progressive-web-application/

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/
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!
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
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
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
35. Inline initial data into HTML payloads
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/
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!
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
62. Optimistically Render Local Data
64. Selectively Indicate Loading
65. “Fake It Till You Make It”
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?