Slide 1

Slide 1 text

FASTEST REQUEST IS NEVER MADE Effective use of Browser HTTP Cache Sergey Chernyshev @sergeyche NYC JavaScript React Group August 31, 2017

Slide 2

Slide 2 text

Why do we care?

Slide 3

Slide 3 text

Awesome Website!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Sloooowly

Slide 6

Slide 6 text

Slow Means Lower Conversion Conversion Rate vs. Page Load time 0-1 1-2 2-3 3-4 4-5 5-6 6-7 7-8 8-9 9-10 10-11 11-12 12-13 13-14 14-15 15+ Conversion Sessions RUM data. Cliff Crocker @ Wallmart Labs

Slide 7

Slide 7 text

Fred Wilson Managing Partner, Union Square Ventures @ NYC http://www.aVC.com/ “1. Speed is the most important feature.” 10 Golden Principles of Successful Web Apps http://vimeo.com/10510576

Slide 8

Slide 8 text

Stats ➤ Pinterest: 40% faster => +15% SEO traffic, 15% conversion rate (2017) ➤ Trainline: -0.3s => +$11.5M / year revenue (2016( ➤ Etsy: +160Kb => +12% bounce rate (2014) ➤ DoubleClick: -1 redirect => +12% CTR (2011) ➤ Edmunds: -77% load time => +20% page views (2011) ➤ Mozilla: -2.2s => +15.4% Downloads (2010) ➤ Google: +400ms => -0.21% searches after experiment! (2009) ➤ Shopzilla: -5s => +12% Conversion rate (2009) ➤ Netflix: +GZip => -43% Traffic cost (2008) ➤ Amazon: +100ms => -1% revenue (2008) ➤ Google: +500ms => -25% searches (2006) http://WPOStats.com/

Slide 9

Slide 9 text

WHAT DOES MY SITE COST? WHATDOESMYSITECOST.COM http://www.disney.com/

Slide 10

Slide 10 text

% OF DAILY BUDGET WHATDOESMYSITECOST.COM http://www.disney.com/

Slide 11

Slide 11 text

slownesskills.com

Slide 12

Slide 12 text

THERE ARE NO CACHING PROBLEMS only caching solutions

Slide 13

Slide 13 text

Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration Last-Modified: ETag: xyz987 GET /main.css

Slide 14

Slide 14 text

Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration If-Modified-Since: If-None-Match: xyz987 304 Not Modified GET /main.css

Slide 15

Slide 15 text

Waterfall of Useless 304s

Slide 16

Slide 16 text

Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration Cache-Control: max-age=86400 GET /main.css

Slide 17

Slide 17 text

Fingerprinting • Initial Load • Re-validation • Expiration GET /main.xyz987.css Cache-Control: max-age=86400

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

Webpack • Set infinite cache headers • Consistent validation tokens for fingerprints using webpack-md5-hash • Chunk it up • [chunkhash] / [hash] in file name • Use webpack-manifest-plugin or html- webpack-plugin

Slide 20

Slide 20 text

Reading Materials • Easy Cache Headers, PerfPlanet Calendar:
 https://calendar.perfplanet.com/2010/ easy-cache-headers/ • HTTP Caching, Ilya Grigorik:
 https://developers.google.com/web/ fundamentals/performance/optimizing- content-efficiency/http-caching • Cache all the way, Yoav Weiss:
 https://m.youtube.com/watch? v=lTxqaHS9Svs