Breaking news at 1000ms - Front-Trends 2014

None

None

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

0 5000 10000 15000 20000 Jan Feb Mar Apr 10%

Percentile Median 90% Percentile Average SpeedIndex top 10,000 websites Source: HTTPArchive - May 2014

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 find content

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

– Tim Kaldec - 2013 A performance budget is just

what it sounds like: you set a “budget” on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

None

None

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

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

JS CSS HTML CSS & JS § HTML async DOMContentReady

Start render

Popular content ✘ Sharing ✘ Comments ✘ Related content ✘

Commercial components ✘ Article ✔

None

None

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

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

– W3C Font Spec ! ! ! User agents may

render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font. ! In cases where the font download fails user agents must display text, simply leaving transparent text is considered non-conformant behaviour.

Font loading 101 IE Firefox WebKit Blink Blocking ✗ ✔

✔ ✔ Timeout – 3s – – Source: Ian Feather – Web fonts and the Critical Path

Is modern browser? Support WOFF? Font in localStorage? Show font

Show fallback Download JSON localStorage space? Cache in localStorage

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

None

None

None

None

1. Core content should be delivered first 2. Core content

should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured

Everyone must be involved by baking performance into your workflow

from day one.