CSS and the critical path

Slide 1

Slide 1 text

CSS and the Critical Path Patrick Hamann September 2013

Slide 2

Slide 2 text

Who am I? • @patrickhamann • Client-side developer • CSS and performance geek g

Slide 3

Slide 3 text

Who I work for g

Slide 4

Slide 4 text

Making the next generation of the Guardian g

Slide 5

Slide 5 text

What I’m going to cover today • The problem • Browser rendering 101 • CSS and the critical path • CSS loading techniques & real world examples • The future • Questions g

Slide 6

Slide 6 text

Disclaimer g

Slide 7

Slide 7 text

The problem g

Slide 8

Slide 8 text

Page weight is increasing year on year g Other 143Kb HTML 56Kb Flash 83Kb Stylesheets 43Kb Scripts 259Kb Images 965Kb Source: HTTPArchive - Sept 2013

Slide 9

Slide 9 text

http://www.ﬂickr.com/photos/brad_frost/7387823392 A new device landscape

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Why performance matters: $$$ • Amazon found that it increased revenue by 1% for every 100 milliseconds of improvement. • Shopzilla sped up its average page load time from 6 seconds to 1.2 seconds and experienced a 12% increase in revenue and a 25% increase in page views. • Mozilla shaved 2.2 seconds oﬀ their landing pages, thereby increasing download conversions by 15.4%, which they estimate will result in 60 million more g Source: Strangeloop Networks case-studies

Slide 12

Slide 12 text

Guardian Maslow's hierarchy of user needs • We asked 3000 digital news consumers how important 17 key product drivers were for them • Consumers rated speed (fast page load time) as their second most important driver • Only after easy to ﬁnd well organised content • The attribute that had the highest percentage of people saying it was VERY important to them g

Slide 13

Slide 13 text

Time and user perception g Source: Ilya Grigorik – High-Performance Browser Networking 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 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

Slide 14

Slide 14 text

g For an application to feel instant, a perceptible response to user input must be provided within hundreds of milliseconds. After a second or more, the user’s ﬂow and engagement with the initiated task is broken, and after 10 seconds have passed, unless progress feedback is provided, the task is frequently abandoned. Ilya Grigorik High-Performance Browser Networking

Slide 15

Slide 15 text

1000ms

Slide 16

Slide 16 text

Browser rendering 101 g

Slide 17

Slide 17 text

g As a web developer, learning the internals of browser operations helps you make better decisions and know the justiﬁcations behind development best practices. Paul Irish Chrome Developer Relations

Slide 18

Slide 18 text

Rendering engine ﬂow g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Anatomy of a network request g HTTP (TTFB) DNS Lookup Content download Initial connection (Socket)

Slide 21

Slide 21 text

Anatomy of a network request g Source: Google - Pagespeed Insights

Slide 22

Slide 22 text

DOM: Document Object Model g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM

Slide 23

Slide 23 text

CSSOM: CSS Object Model g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 24

Slide 24 text

JavaScript our friend and foe g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 25

Slide 25 text

Rendering engine ﬂow g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 26

Slide 26 text

Rendering engine ﬂow g Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

Slide 27

Slide 27 text

The Critical Path g

Slide 28

Slide 28 text

g When building high-performance pages we want to stay oﬀ the critical path. Critical is the path from the user following a link to the ﬁrst impression and then the working experience. Stoyan Stefanov CSS and the critical path - 2012

Slide 29

Slide 29 text

JS CSS The critical path - traditional waterfall g HTML DOMContentReady Start render

Slide 30

Slide 30 text

JS CSS The critical path - traditional waterfall g HTML DOMContentReady Start render async

Slide 31

Slide 31 text

The critical path • Latency on mobile is greatest barrier to 1000ms • Core CSS matching current media blocks rendering • Defer all non-critical assets, especially all JavaScript g

Slide 32

Slide 32 text

Get the CSS down as soon as possible

Slide 33

Slide 33 text

CSS and the critical path g

Slide 34

Slide 34 text

What is your critical CSS? g Comments ✘ Sharing ✘ Popular content ✘ Related content ✘ Article ✔

Slide 35

Slide 35 text

What is your critical CSS? g

Slide 36

Slide 36 text

Inline g

Slide 37

Slide 37 text

Inline critical CSS in the g WTF a style element $%@!

Slide 38

Slide 38 text

Inline results g 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.491s 0.261s 0.759s 3.100s After

Slide 39

Slide 39 text

Inline ﬁlmstrip g

Slide 40

Slide 40 text

Inline pros • Single HTTP request to view content • Resilience • Shave ~600-700ms oﬀ start render and DOMContentReady • Browsers look ahead pre-parser still prioritises the CSS in the footer g

Slide 41

Slide 41 text

Inline cons • FOUC • Having separate CSS can break the cascade • "Above the fold" is a tricky concept on a responsive website • With great power comes great responsibility • Cache invalidation with CSS updates g

Slide 42

Slide 42 text

LocalStorage g

Slide 43

Slide 43 text

g Bing and Google Search make extensive use of localStorage for stashing SCRIPT blocks that are used on subsequent page views. None of the other top sites from my previous post use localStorage in this way. Are Bing and Google Search onto something? Yes, deﬁnitely Steve Souders Storager case study: Bing, Google

Slide 44

Slide 44 text

Load CSS from storage and inline g

Slide 45

Slide 45 text

Load CSS via ajax and store g

Slide 46

Slide 46 text

Look mum! No stylesheets Use MD5 hash for cache key WTF no stylesheets? g

Slide 47

Slide 47 text

LocalStorage ﬁlmstrip g

Slide 48

Slide 48 text

LocalStorage results g Before Load time First byte Start render Visually complete 1.307s 0.433s 0.466s 2.700s After Load time First byte Start render Visually complete 1.067s 0.426s 0.462s 2.000s * Repeat view median run

Slide 49

Slide 49 text

Results from real user metrics ~600ms decrease in user DOMContentReady

Slide 50

Slide 50 text

Basket.js • A simple (proof-of-concept) script loader that caches scripts with localStorage Source: http://addyosmani.github.io/basket.js/ g

Slide 51

Slide 51 text

But... g

Slide 52

Slide 52 text

Speculative parsing • DNS prefetching • Preload scanner parses references to external resources g Source: Ilya Grigorik – Debunking responsive css performance myths

Slide 53

Slide 53 text

LocalStorage vs browser cache g Source: http://addyosmani.github.io/basket.js/

Slide 54

Slide 54 text

The Future g

Slide 55

Slide 55 text

Resource Priorities API • W3C draft spec • Allows developers to programmatically give the User Agent hints on the download priority of a resource. • Unblock non-critical assets g Yay!

Slide 56

Slide 56 text

Client hints • IETF draft spec • New “CH” client hint HTTP header ﬁeld • Device width, height and pixel density variables • Cache friendly via Vary: CH g HTTP/1.1 200 OK Content-Encoding: gzip CH: dh=598, dw=384, dpr=2.0 Content-Type: text/html; charset=utf-8 Expires: Wed, 25 Sep 2013 18:36:37 GMT

Slide 57

Slide 57 text

SPDY/HTTP 2.0 • Final draft by end of 2014 • Each single connection can carry any number of bidirectional streams, thus allowing multiplexing • One connection per origin • Request prioritisation • Lowers page load times by eliminating unnecessary latency g

Slide 58

Slide 58 text

RESS • Responsive Design + Server Side Components • Use client hints to make decision on which CSS to serve g

Slide 59

Slide 59 text

g • Users do care about speed • Inline critical (above the fold) CSS • Defer all other non-critical assets to avoid blocking of render tree • Where possible store downloaded assets in localStorage Takeaways

Slide 60

Slide 60 text

g Performance ﬁrst.

Slide 61

Slide 61 text

Thank you! @patrickhamann http://github.com/guardian/frontend September 2013 g We’re hiring!