High Performance in the Critical Path

by Nicolás Bevacqua

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

High Critical Path Performance in the

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Measure! What is going on?

Slide 5

Slide 5 text

DevTools Audits

Slide 6

Slide 6 text

DevTools Audits

Slide 7

Slide 7 text

Per-resource advice Caching best practices DevTools Audits

Slide 8

Slide 8 text

PageSpeed Insights developers.google.com/speed/pagespeed/insights

Slide 9

Slide 9 text

PageSpeed Insights

Slide 10

Slide 10 text

Mobile, desktop Get a rough (1..100) score Best practices Practical advice PageSpeed Insights

Slide 11

Slide 11 text

WebPageTest webpagetest.org

Slide 12

Slide 12 text

WebPageTest webpagetest.org

Slide 13

Slide 13 text

WebPageTest webpagetest.org

Slide 14

Slide 14 text

WebPageTest webpagetest.org

Slide 15

Slide 15 text

WebPageTest webpagetest.org

Slide 16

Slide 16 text

WebPageTest Makes it easy to spot FOIT Calculates SpeedIndex

Slide 17

Slide 17 text

SpeedIndex takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted

Slide 18

Slide 18 text

Inspect every request Analyze TCP trafﬁc Identify bottlenecks Visualize progress WebPageTest

Slide 19

Slide 19 text

Automate! Measure early. Measure often.

Slide 20

Slide 20 text

npm install psi -g

Slide 21

Slide 21 text

npm install webpagetest-api underscore-cli

Slide 22

Slide 22 text

npm install grunt-yslow --save-dev

Slide 23

Slide 23 text

Budgets! Enforce a performance budget Track impact of every commit What should I track? timkadlec.com/2014/11/performance-budget-metrics

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

npm install grunt-perfbudget --save-dev

Slide 26

Slide 26 text

Beyond miniﬁcation Or, what can be done to improve performance?

Slide 27

Slide 27 text

Web Stack TCP HTTP(S) HTML CSS Fonts Images JavaScript

Slide 28

Slide 28 text

Networking But not the kind you do at conferences

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Optimizing HTTP Turn on keep-alive GZip all the text Add Expires and ETag headers Use a CDN Make less requests!

Slide 32

Slide 32 text

HTTPS/2! SPDY? Yes.

Slide 33

Slide 33 text

Why? Non-blocking Multiplexing One Connection per Origin Header Compression Proactive Server Push

Slide 34

Slide 34 text

The Web Needs you #perfmatters

Slide 35

Slide 35 text

Optimizing HTML Become a Single Page App later Defer non-critical asset loading Keep it accessible with aria Render server-side!

Slide 36

Slide 36 text

Optimizing CSS Concatenate and minify Remove unused styles Avoid m. Be responsive Follow a style guide. Seriously. Inline critical CSS

Slide 37

Slide 37 text

Optimizing Fonts Cache them aggressively Use a fallback while fonts load Prevent FOIT using JavaScript Use fewer fonts, avoid repaints Load asynchronously

Slide 38

Slide 38 text

Optimizing Images Use CSS for simple icons Defer images below the fold Create spritesheets with tools Try inlining tiny dynamic images Minify and shrink

Slide 39

Slide 39 text

Optimizing JavaScript Cache vendor scripts separately Defer all of it Use small modules Use asset hashing You can live without it

Slide 40

Slide 40 text

HOW?

Slide 41

Slide 41 text

Reverse proxy Static asset caching Supports SPDY GZip compression

Slide 42

Slide 42 text

Set up a CDN!

Slide 43

Slide 43 text

Shared Rendering Needs Rendr Presumably in 2.0 Native support Native support

Slide 44

Slide 44 text

Defer Assets

Slide 45

Slide 45 text

Remove Unused CSS Only what's needed! Useful when using Bootstrap or other CSS frameworks

Slide 46

Slide 46 text

Inline Critical CSS Only what's seen! Remove roadblocks from the critical path

Slide 47

Slide 47 text

Use a font loader Prevent FOIT!

Slide 48

Slide 48 text

Optimize Images Up to 90% in savings!

Slide 49

Slide 49 text

Create Spritesheets Save bandwidth by keeping the noise to a minimum

Slide 50

Slide 50 text

Inline Images Save a request by inlining a base64 image Careful: Data URIs are slow on mobile!

Slide 51

Slide 51 text

Use a module system

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

In Summary... Measure your metrics

Slide 54

Slide 54 text

In Summary... Automate your metrics

Slide 55

Slide 55 text

In Summary... Define your budget

Slide 56

Slide 56 text

In Summary... Enforce your budget

Slide 57

Slide 57 text

In Summary... Prioritize your content

Slide 58

Slide 58 text

In Summary... Optimize your content

Slide 59

Slide 59 text

In Summary... Respect your humans

Slide 60

Slide 60 text

In Summary... Respect your web

Slide 61

Slide 61 text

Automation Performance Modularity Asynchronicity MVC Testing REST API ~100 Code Samples bevacqua.io/bf