CSS and the Critical Path - CSSConfEU September 2014

Slide 1

Slide 1 text

CSS and the critical path @patrickhamann - CSSConf EU - September 2014

Slide 2

Slide 2 text

next.theguardian.com

Slide 3

Slide 3 text

105million !

Slide 4

Slide 4 text

" # $ 6000

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

0 7500 15000 22500 30000 Jan Feb Mar Apr May June July August 10% Percentile Median 90% Percentile Source: HTTPArchive - BigQuery - September 2014 Average SpeedIndex from top 10,000 websites

Slide 7

Slide 7 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 8

Slide 8 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 9

Slide 9 text

1000ms

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Browser rendering 101

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Source: Google - Pagespeed Insights

Slide 14

Slide 14 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 15

Slide 15 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint DOM CSS CSSOM

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Request page Network Render GET html Build DOM response Build CSSOM Render page GET css GET js response response idle idle Async Render blocking Run JS

Slide 20

Slide 20 text

Request page Network Render GET html Build DOM response Build CSSOM Render page GET css GET js response response idle idle Async Render blocking Run JS

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Get the CSS down as soon as possible.

Slide 23

Slide 23 text

CSS and the critical path

Slide 24

Slide 24 text

What is your critical CSS?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Final progressively enhanced page Initial page payload

Slide 27

Slide 27 text

What if we inlined our critical CSS?

Slide 28

Slide 28 text

Inline

Slide 29

Slide 29 text

WTF%$?!

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

0.0 0.1 0.2 0.3 0.0 0.1 0.2 0.3

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

localStorage

Slide 34

Slide 34 text

Is modern browser? Requet with Request with CSS in localStorage? localStorage space? Request with AJAX cache in localStorage inject into

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 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 39

Slide 39 text

Use MD5 hash for cache key WTF no stylesheets?

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Initial request HTML response with inline CSS Render page Request global CSS with AJAX Set cookie Initial request HTML response with default Render page Does request contain cookie?

Slide 43

Slide 43 text

Monitor

Slide 44

Slide 44 text

WARNING!

Slide 45

Slide 45 text

assets radiator

Slide 46

Slide 46 text

speedcurve

Slide 47

Slide 47 text

Alternatives

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

What does the future hold?

Slide 50

Slide 50 text

Resource priorities Yay!

Slide 51

Slide 51 text

http/2

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

service worker ServiceWorker

Slide 54

Slide 54 text

ServiceWorker  " )  " ) )

Slide 55

Slide 55 text

Takeaways

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Cache aggressively.

Slide 58

Slide 58 text

Set a performance budget.  Measure, optimise & repeat!

Slide 59

Slide 59 text

Thank you. @patrickhamann - CSSConf EU - September 2014 github.com/guardian/frontend + bit.ly/cssconf-critical-path ,

Slide 60

Slide 60 text

No content