High Performance in the Critical Path

High Performance in the Critical Path

This talk covers the past, present and future of web application performance when it comes to delivery optimization. I'll start by glancing over what you're already doing -- minifying your static assets, bundling them together, and using progressive enhancement techniques. Then I'll move on to what you should be doing -- optimizing TCP network delivery, inlining critical CSS, deferring font loading and CSS so that you don't block the rendering path, and of course deferring JavaScript. Afterwards we'll look at the future, and what HTTP 2.0 has in store for us, going full circle and letting us forego hacks of the past like bundling and minification.

550d0153dbeee2fcaede98f906e55d02?s=128

Nicolás Bevacqua

April 24, 2015
Tweet

Transcript

  1. 1.
  2. 3.
  3. 17.

    SpeedIndex takes the visual progress of the visible page loading

    and computes an overall score for how quickly the content painted
  4. 23.

    Budgets! Enforce a performance budget Track impact of every commit

    What should I track? timkadlec.com/2014/11/performance-budget-metrics
  5. 24.

    Milestone Timings timkadlec.com/2014/11/performance-budget-metrics Load time, time to interact, "time to

    first tweet" Average time at which parts of a page are displayed Request count, page weight, image weight... YSlow grade, PageSpeed score, etc. SpeedIndex Quantity based metrics Rule based metrics
  6. 29.
  7. 30.

    Optimizing TCP Increase initial TCP cwnd size Disable slow-start restart

    (SSR) Long-lived, bursty TCP connections can't afford SSR Improve HTTP performance by disabling it sysctl -w net.ipv4.tcp_slow_start_after_idle = 0 Sender-side limit for in-flight data (cwnd) More data in first TCP roundtrip Accelerates connection ramp up
  8. 31.

    Optimizing HTTP Turn on keep-alive GZip all the text Add

    Expires and ETag headers Use a CDN Make less requests!
  9. 35.

    Optimizing HTML Become a Single Page App later Defer non-critical

    asset loading Keep it accessible with aria Render server-side!
  10. 36.

    Optimizing CSS Concatenate and minify Remove unused styles Avoid m.

    Be responsive Follow a style guide. Seriously. Inline critical CSS
  11. 37.

    Optimizing Fonts Cache them aggressively Use a fallback while fonts

    load Prevent FOIT using JavaScript Use fewer fonts, avoid repaints Load asynchronously
  12. 38.

    Optimizing Images Use CSS for simple icons Defer images below

    the fold Create spritesheets with tools Try inlining tiny dynamic images Minify and shrink
  13. 39.

    Optimizing JavaScript Cache vendor scripts separately Defer all of it

    Use small modules Use asset hashing You can live without it
  14. 40.
  15. 50.

    Inline Images Save a request by inlining a base64 image

    Careful: Data URIs are slow on mobile!
  16. 52.