Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance In The Javascript Era

Performance In The Javascript Era

More than just tips, tricks, metrics and clicks, from code to cloud and back again - performance on the web has gone way beyond "oh just put your CSS in the header and your Javascript in the footer".

More often approached as an afterthought, this primer will cover some essential ground on how to approach measuring website and web app performance, along with some quick wins, through to some more lower-level technical nuances with HTTP2, compression, and header management, and finally putting all our tools together to comprehensively and continuously keep a watchful eye on your performance metrics.

Benjamin Howarth

May 28, 2018
Tweet

Other Decks in Technology

Transcript

  1. What an exciting 2018 it’s been! ▪ Britain is leaving

    the European Union, probably with no deal, so The Hunger Games UK edition launches on 30th March 2019 ▪ SQL Server runs on Linux ▪ The Pumpkin-In-Chief is (still) President of the United States ▪ .NET and ASP.NET are open-source ▪ England made it to a World Cup semi-final for the first time in 28 years! ▪ Javascript, somehow, became a popular & widely-used server-side programming language
  2. ▪ What does covfefe HTTP Request Server render Browser load

    & paint covfefe web performance really mean?
  3. ▪ Front-end ▪ YSlow with PhantomJS ▪ PageSpeed Insights (now

    known as Lighthouse) ▪ WebPageTest ▪ Server-side ▪ JMeter ▪ MiniProfiler / Glimpse ▪ Logging
  4. ▪ This list is longer than Robert Mueller’s subpoena list

    ▪ (Or longer than the list of certified lies Donald Trump has publicly spoken)
  5. ▪ Make your requests as small and as infrequent as

    possible ▪ Cookie-free domains – move your stuff to BLOB & CDN, it‘s cheaper than a coffee – per month ▪ Gzip/Deflate static resources. Dynamic ones – at your own risk (CRIME/BREACH) ▪ HTTP2 DOES NOT SOLVE EVERYTHING ▪ Enable caching on static resources ▪ Headers ▪ ETags ▪ Cache-control (be very careful – private vs. public can catch you out) ▪ Expires (falls back on Cache-Control mechanism)
  6. ▪ Minify your CSS & Javascript ▪ Don’t lazy-load unless

    you know it’ll work reliably ▪ Use an in-memory cache to boost speed (RavenDB, Redis, Memcached etc.) ▪ Send 304’s wherever possible (see: ETags)
  7. ▪ Application monitoring ▪ New Relic APM ▪ Gibraltarsoft Loupe

    ▪ Azure Application Insights ▪ Front-end performance ▪ YSlow (soon to be patched) ▪ Lighthouse ▪ WebPageTest ▪ JMeter