CSS and the critical path - CSSConf May 2014

Slide 1

Slide 1 text

CSS and the critical path @patrickhamann - CSSConf- May 2014

Slide 2

Slide 2 text

next.theguardian.com

Slide 3

Slide 3 text

100million !

Slide 4

Slide 4 text

" # $ 6000

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

0 2.25 4.5 6.75 9 2000 2006 2009 2012 User load time expectations (Secs) User load time expectations are decreasing Source: Web Performance Today - March 2013

Slide 7

Slide 7 text

0 5000 10000 15000 20000 Jan Feb Mar Apr 10% Percentile Median 90% Percentile Average SpeedIndex top 10,000 websites Source: HTTPArchive - May 2014

Slide 8

Slide 8 text

Maslow's hierarchy of user needs ! % & ' We surveyed 3000 users About 17 key product drivers They rated speed 2nd most important Only after easy to ﬁnd content

Slide 9

Slide 9 text

Time & user perception Delay User perception 0–100 ms Instant 100–300 ms Small perceptible delay 300–1000 ms Machine is working 1,000+ ms Likely mental context switch 10,000+ ms Task is abandoned Source: Ilya Grigorik – High-Performance Browser Networking

Slide 10

Slide 10 text

A performance budget https://ﬂic.kr/p/iQ69Kg

Slide 11

Slide 11 text

1000ms

Slide 12

Slide 12 text

Browser rendering 101

Slide 13

Slide 13 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 14

Slide 14 text

HTTP (TTFB)  DNS Lookup Content download Initial connection (Socket)

Slide 15

Slide 15 text

Source: Google - Pagespeed Insights

Slide 16

Slide 16 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 17

Slide 17 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM

Slide 18

Slide 18 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 19

Slide 19 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 20

Slide 20 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 21

Slide 21 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 22

Slide 22 text

JS CSS HTML CSS & JS § HTML async DOMContentReady Start render

Slide 23

Slide 23 text

Get the CSS down as soon as possible.

Slide 24

Slide 24 text

CSS and the critical path

Slide 25

Slide 25 text

What is your critical CSS?

Slide 26

Slide 26 text

Popular content ✘ Sharing ✘ Comments ✘ Related content ✘ Commercial components ✘ Article ✔

Slide 27

Slide 27 text

Final progressively enhanced page Initial page payload

Slide 28

Slide 28 text

What if we inlined our critical CSS?

Slide 29

Slide 29 text

Inline

Slide 30

Slide 30 text

WTF%$?!

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

0.9 1.0 1.1 0.9 1.0 1.1

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

localStorage

Slide 35

Slide 35 text

Is modern browser? CSS in localStorage? Inject into Request with Request with AJAX localStorage space? Cache in localStorage

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Load time First byte Start render Visually complete 3.366s 0.204s 1.113s 3.700s Before Load time First byte Start render Visually complete 3.017s 0.262s 0.759s 2.00s After

Slide 40

Slide 40 text

Use MD5 hash for cache key WTF no stylesheets?

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Monitor

Slide 43

Slide 43 text

assets radiator

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

speedcurve

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Alternatives

Slide 48

Slide 48 text

PageSpeed

Slide 49

Slide 49 text

UnCSS & grunt-uncss

Slide 50

Slide 50 text

Source: http://addyosmani.github.io/basket.js/ basket.js

Slide 51

Slide 51 text

What does the future hold?

Slide 52

Slide 52 text

http/2

Slide 53

Slide 53 text

 ) HTML " ) CSS  " * HTML & CSS  " HTTP/1.1 HTTP/2 Server push

Slide 54

Slide 54 text

service worker ServiceWorker

Slide 55

Slide 55 text

ServiceWorker  " ) )

Slide 56

Slide 56 text

Takeaways

Slide 57

Slide 57 text

Inline critical CSS and defer all other non-critical assets to avoid render blocking.

Slide 58

Slide 58 text

Where possible, cache aggressively in localStorage.

Slide 59

Slide 59 text

Set a performance budget.  Measure, optimise & repeat!

Slide 60

Slide 60 text

Performance is a requirement; not a feature.

Slide 61

Slide 61 text

Thank you. Questions? @patrickhamann - CSSConf - May 2014 g We’re hiring! github.com/guardian/frontend + bit.ly/css-and-the-critical-path +