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
   

   View Slide

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

   View Slide

3. @dcousineau
   

   View Slide

4. Any improvement is good
   

   View Slide

5. Always measure first
   

   View Slide

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

   View Slide

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/
   

   View Slide

8. View Slide

9. View Slide

10. https://speedcurve.com/
    

    View Slide

11. A word on Lighthouse
    

    View Slide

12. Making your servers faster is another talk
    

    View Slide

13. Minify your outputs
    

    View Slide

14. uglify terser
    

    View Slide

15. cssnano
    

    View Slide

16. Implement a CDN
    

    View Slide

17. Not just for images!
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. 47.62ms one-way
    95.23ms round-trip
    Penalty for simply existing
    

    View Slide

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

    View Slide

23. View Slide

24. View Slide

25. Compress content over the wire
    

    View Slide

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
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. Reduce request count
    

    View Slide

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
    

    View Slide

32. But domain sharding is old and busted
    

    View Slide

33. Inline direct dependencies into responses
    

    View Slide

34. View Slide

35. Inline initial data into HTML payloads
    

    View Slide

36. View Slide

37. Preload / Prefetch
    

    View Slide

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

    View Slide

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
    
    

    View Slide

40. https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
    

    View Slide

41. But what about h2 push?
    

    View Slide

42. tl;dr cache issues, proxy support
    

    View Slide

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

    View Slide

44. 
    

    View Slide

45. Load only what you need
    Stream the rest
    

    View Slide

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

    View Slide

47. View Slide

48. Load only visible images
    Load only what you need part 2:
    

    View Slide

49. Browser JS is Single-Threaded Concurrency*
    * Service Workers change this a little bit
    

    View Slide

50. Loading & Rendering offscreen images can
    impact real (aka not-SEO) performance!
    

    View Slide

51. View Slide

52. Better images
    Load only what you need part 2:
    

    View Slide

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

    View Slide

54. 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"
    >
    

    View Slide

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

    View Slide

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

    View Slide

57. Use a 3rd party to help
    Bonus: checks the CDN box
    

    View Slide

58. Optimized
    PERCEIVED
    Performance
    

    View Slide

59. “Lie”
    

    View Slide

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

    View Slide

61. View Slide

62. Optimistically Render Local Data
    

    View Slide

63. View Slide

64. Selectively Indicate Loading
    

    View Slide

65. “Fake It Till You Make It”
    

    View Slide

66. View Slide

67. View Slide

68. Additional reading
    

    View Slide

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

    View Slide

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

    View Slide

71. Go to Josh Holme’s talk tomorrow
    

    View Slide

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

    View Slide

73. fin.
    Questions?
    

    View Slide