Speed is a critical component of user experience and with new front-end technologies developed, we need to ensure speed is still paid attention to. Sergey Chernyshev talks about the networking component in application speed, how cache can be used effectively and how to configure web servers and React build process to get the most out of different levels of cacheing.

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

2. Why do we care?

3. Awesome Website!

5. Sloooowly

6. 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

7. 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

8. 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/

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

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

11. slownesskills.com

12. THERE ARE
NO
CACHING PROBLEMS
only caching solutions

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

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

15. Waterfall of
Useless 304s

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

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

18. DEMO

19. 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

20. 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