Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fastest request is never made

106 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Fastest request is never made

  1. 1. FASTEST REQUEST IS NEVER MADE Effective use of Browser HTTP Cache Sergey Chernyshev @sergeyche NYC JavaScript React GroupAugust 31, 2017
  2. 2. Why do we care?
  3. 3. Awesome Website!
  4. 4. Sloooowly
  5. 5. 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
  6. 6. 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
  7. 7. 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/
  8. 8. WHAT DOES MY SITE COST? WHATDOESMYSITECOST.COM http://www.disney.com/
  9. 9. % OF DAILY BUDGET WHATDOESMYSITECOST.COM http://www.disney.com/
  10. 10. slownesskills.com
  11. 11. THERE ARE NO CACHING PROBLEMS only caching solutions
  12. 12. Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration Last-Modified: <date> ETag: xyz987 GET /main.css
  13. 13. Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration If-Modified-Since: <date> If-None-Match: xyz987 304 Not Modified GET /main.css
  14. 14. Waterfall of Useless 304s
  15. 15. Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration Cache-Control: max-age=86400 GET /main.css
  16. 16. Fingerprinting • Initial Load • Re-validation • Expiration GET /main.xyz987.css Cache-Control: max-age=86400
  17. 17. DEMO
  18. 18. 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
  19. 19. 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

×