client side performance for back end developers - camb expert talks, nov 2016
TRANSCRIPT
![Page 1: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/1.jpg)
Client side web performance for back
end developersBart Read
http://www.slideshare.net/bartread/ddd-nights-client-side-performance-for-back-end-developers
![Page 2: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/2.jpg)
Who am I?• Bart Read, Web, Database, and Mobile Performance Consultant• Previously worked for Red Gate• Contacts• E: [email protected]• 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
![Page 3: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/3.jpg)
https://arcade.ly/games/starcastle/
![Page 4: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/4.jpg)
https://arcade.ly/games/asteroids/
![Page 5: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/5.jpg)
Partial Browser Page Lifecycle
![Page 6: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/6.jpg)
![Page 7: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/7.jpg)
Modern web apps are becoming more and more
like fat client desktop apps that run in a browser
![Page 8: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/8.jpg)
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.
![Page 9: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/9.jpg)
HTTP/2If you take nothing else away from this talk, take this
![Page 10: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/10.jpg)
HTTP/2• Multiplexing• Server push• Stream priority• Header compression• (De facto mandatory encryption)
![Page 11: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/11.jpg)
![Page 12: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/12.jpg)
Express.js app with HTTPS support
![Page 13: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/13.jpg)
![Page 14: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/14.jpg)
Express.js app with HTTP/2 and SPDY support
https://github.com/indutny/node-spdy
![Page 15: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/15.jpg)
![Page 16: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/16.jpg)
![Page 17: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/17.jpg)
![Page 18: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/18.jpg)
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
![Page 19: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/19.jpg)
Memory usage and GC
![Page 20: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/20.jpg)
Chrome Dev Tools Timeline
![Page 21: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/21.jpg)
JavaScript heap usage over time
![Page 22: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/22.jpg)
Chrome Dev Tools profiling options
![Page 23: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/23.jpg)
![Page 24: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/24.jpg)
Particle Creation in Star Citadel
![Page 25: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/25.jpg)
Strategies for reducing JS memory usage• Object pooling rather than creating new objects• Use of prototypes• Reducing closure usage
![Page 26: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/26.jpg)
Simple Object Pool
![Page 27: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/27.jpg)
Create object from prototype with pooling
![Page 28: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/28.jpg)
Long Running JavaScript• Intersperse delays• setTimeout(function() { /* Do your stuff */ });• allow content to render
• Web Workers
![Page 29: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/29.jpg)
Canvas
http://www.kevs3d.co.uk/dev/canvasmark/
![Page 30: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/30.jpg)
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-accelerat
ed-css/• transform: translate3d(0,0,0);• (still necessary in 2016?)
![Page 31: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/31.jpg)
ToolsHow to find out how your page’s are performing from a client’s perspective
![Page 32: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/32.jpg)
Tools• Chrome Dev Tools (obviously)• Speed testers• https://developers.google.com/speed/pagespeed/insights/• https://www.webpagetest.org/• https://tools.pingdom.com/#!/
![Page 33: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/33.jpg)
HousekeepingAll the small things true care, truth brings…
![Page 34: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/34.jpg)
Avoid Redirects (especially landing page)
![Page 35: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/35.jpg)
Other legitimate redirects
![Page 36: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/36.jpg)
Content Compression
Apache: mod_deflate
Nginx: ngx_http_gzip_module
![Page 37: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/37.jpg)
Inline enough CSS to load above the fold content (part 1)
https://pugjs.org/api/getting-started.html
![Page 38: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/38.jpg)
Inline enough CSS to load above the fold content (part 2)
https://github.com/VFK/gulp-html-replace
![Page 39: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/39.jpg)
Inline enough CSS to load above the fold content (part 3)
![Page 40: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/40.jpg)
Asynchronously load other CSS
https://github.com/filamentgroup/loadCSS
Before:
After:
![Page 41: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/41.jpg)
Load scripts last
![Page 42: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/42.jpg)
![Page 43: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/43.jpg)
![Page 44: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/44.jpg)
![Page 45: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/45.jpg)
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
![Page 46: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/46.jpg)
Inline small scripts
![Page 47: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/47.jpg)
DNS Prefetch
Before
After
![Page 48: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/48.jpg)
Don’t get too carried away in <HEAD>!
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
https://en.wikipedia.org/wiki/TCP_congestion_control
![Page 49: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/49.jpg)
PayloadDon’t join thecargo cult
![Page 50: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/50.jpg)
Do you really need that library or framework?
https://developer.mozilla.org/en-US/docs/Web/Reference/API
![Page 51: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/51.jpg)
Many libraries are componentized
Include only what you need
![Page 52: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/52.jpg)
It’s the latency, stupid!
• http://www.stuartcheshire.org/rants/latency.html
• Minimise requests and roudtrips
• Sprite or concatenate
![Page 53: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/53.jpg)
CDNs
![Page 54: Client Side Performance for Back End Developers - Camb Expert Talks, Nov 2016](https://reader031.vdocuments.net/reader031/viewer/2022030122/58a31bb01a28ab1d068b6567/html5/thumbnails/54.jpg)
Questions?