Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016

387 views

Published on

Slides for a new talk - honestly, an alpha version (thanks to everyone who came for playing guinea pig) - of my client side performance talk. This is very much aimed towards back-end, or full stack developers more used to working behind the scenes, who may be less comfortable with JavaScript and other front-end performance concerns.

Published in: Internet
  • Be the first to comment

Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016

  1. 1. Client side web performance for back end developers Bart Read http://www.slideshare.net/bartread/ddd-nights-client-side-performance-for-back-end-developers
  2. 2. Who am I? • Bart Read, Web, Database, and Mobile Performance Consultant • Previously worked for Red Gate • Contacts • E: bart@bartread.com • W: • www.bartread.com • https://arcade.ly (site on which this talk is based) • B: www.bartread.com/blog • T: @bart_read • GH: https://github.com/bartread
  3. 3. https://arcade.ly/games/starcastle/
  4. 4. https://arcade.ly/games/asteroids/
  5. 5. Partial Browser Page Lifecycle
  6. 6. Modern web apps are becoming more and more like fat client desktop apps that run in a browser
  7. 7. Stuff that’s out of scope • The back-end • Front end/SPA frameworks • WebGL • The latest and greatest JavaScript libraries, build tools, blah…zzzzz • ECMAScript 6 (or 7!), TypeScript, etc.
  8. 8. HTTP/2 If you take nothing else away from this talk, take this
  9. 9. HTTP/2 • Multiplexing • Server push • Stream priority • Header compression • (De facto mandatory encryption)
  10. 10. Express.js app with HTTPS support
  11. 11. Express.js app with HTTP/2 and SPDY support https://github.com/indutny/node-spdy
  12. 12. HTTP/2 Platform Support • IIS on Windows 10 and Windows Server 2016 • .NET 4.6.0 or later • Tutorial: http://www.c-sharpcorner.com/UploadFile/efa3cf/creating-http2-supported-website-with-Asp-Net-core-hostin/ • Node/express – spdy module • https://www.npmjs.com/package/spdy • Tutorial: https://webapplog.com/http2-node/ • Java • Go – http2 package • https://godoc.org/golang.org/x/net/http2 • Demo: https://http2.golang.org/ • Ruby • Python • PHP Full list at https://github.com/http2/http2-spec/wiki/Implementations
  13. 13. Memory usage and GC
  14. 14. Chrome Dev Tools Timeline
  15. 15. JavaScript heap usage over time
  16. 16. Chrome Dev Tools profiling options
  17. 17. Particle Creation in Star Citadel
  18. 18. Strategies for reducing JS memory usage • Object pooling rather than creating new objects • Use of prototypes • Reducing closure usage
  19. 19. Simple Object Pool
  20. 20. Create object from prototype with pooling
  21. 21. Long Running JavaScript • Intersperse delays • setTimeout(function() { /* Do your stuff */ }); • allow content to render • Web Workers
  22. 22. Canvas http://www.kevs3d.co.uk/dev/canvasmark/
  23. 23. CSS Effects • First run of CSS animations is often ropey • Transform/scale/skew • Forcing hardware acceleration • https://www.smashingmagazine.com/2012/06/play-with-hardware- accelerated-css/ • transform: translate3d(0,0,0); • (still necessary in 2016?)
  24. 24. Tools How to find out how your page’s are performing from a client’s perspective
  25. 25. Tools • Chrome Dev Tools (obviously) • Speed testers • https://developers.google.com/speed/pagespeed/insights/ • https://www.webpagetest.org/ • https://tools.pingdom.com/#!/
  26. 26. Housekeeping All the small things true care, truth brings…
  27. 27. Avoid Redirects (especially landing page)
  28. 28. Other legitimate redirects
  29. 29. Content Compression Apache: mod_deflate Nginx: ngx_http_gzip_module
  30. 30. Inline enough CSS to load above the fold content (part 1) https://pugjs.org/api/getting-started.html
  31. 31. Inline enough CSS to load above the fold content (part 2) https://github.com /VFK/gulp-html- replace
  32. 32. Inline enough CSS to load above the fold content (part 3)
  33. 33. Asynchronously load other CSS https://github.com/filamentgroup/loadCSS Before: After:
  34. 34. Load scripts last
  35. 35. Google Adsense scripts (applies to third party scripts in general) <- Leave this inline And load the Adsense script at the bottom of the page, /// after your own scripts
  36. 36. Inline small scripts
  37. 37. DNS Prefetch Before After
  38. 38. Don’t get too carried away in <HEAD>! https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent https://en.wikipedia.org/wiki/TCP_congestion_control
  39. 39. Payload Don’t join the cargo cult
  40. 40. Do you really need that library or framework? https://developer.mozilla.org/en- US/docs/Web/Reference/API
  41. 41. Many libraries are componentized Include only what you need
  42. 42. It’s the latency, stupid! • http://www.stuartche shire.org/rants/latenc y.html • Minimise requests and roudtrips • Sprite or concatenate
  43. 43. CDNs
  44. 44. Questions?

×