Post on 14-Feb-2017
Client side web performance for back
end developersBart Read
http://www.slideshare.net/bartread/ddd-nights-client-side-performance-for-back-end-developers
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
https://arcade.ly/games/starcastle/
https://arcade.ly/games/asteroids/
Partial Browser Page Lifecycle
Modern web apps are becoming more and more
like fat client desktop apps that run in a browser
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.
HTTP/2If you take nothing else away from this talk, take this
HTTP/2• Multiplexing• Server push• Stream priority• Header compression• (De facto mandatory encryption)
Express.js app with HTTPS support
Express.js app with HTTP/2 and SPDY support
https://github.com/indutny/node-spdy
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
Memory usage and GC
Chrome Dev Tools Timeline
JavaScript heap usage over time
Chrome Dev Tools profiling options
Particle Creation in Star Citadel
Strategies for reducing JS memory usage• Object pooling rather than creating new objects• Use of prototypes• Reducing closure usage
Simple Object Pool
Create object from prototype with pooling
Long Running JavaScript• Intersperse delays• setTimeout(function() { /* Do your stuff */ });• allow content to render
• Web Workers
Canvas
http://www.kevs3d.co.uk/dev/canvasmark/
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?)
ToolsHow to find out how your page’s are performing from a client’s perspective
Tools• Chrome Dev Tools (obviously)• Speed testers• https://developers.google.com/speed/pagespeed/insights/• https://www.webpagetest.org/• https://tools.pingdom.com/#!/
HousekeepingAll the small things true care, truth brings…
Avoid Redirects (especially landing page)
Other legitimate redirects
Content Compression
Apache: mod_deflate
Nginx: ngx_http_gzip_module
Inline enough CSS to load above the fold content (part 1)
https://pugjs.org/api/getting-started.html
Inline enough CSS to load above the fold content (part 2)
https://github.com/VFK/gulp-html-replace
Inline enough CSS to load above the fold content (part 3)
Asynchronously load other CSS
https://github.com/filamentgroup/loadCSS
Before:
After:
Load scripts last
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
Inline small scripts
DNS Prefetch
Before
After
Don’t get too carried away in <HEAD>!
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
https://en.wikipedia.org/wiki/TCP_congestion_control
PayloadDon’t join thecargo cult
Do you really need that library or framework?
https://developer.mozilla.org/en-US/docs/Web/Reference/API
Many libraries are componentized
Include only what you need
It’s the latency, stupid!
• http://www.stuartcheshire.org/rants/latency.html
• Minimise requests and roudtrips
• Sprite or concatenate
CDNs
Questions?