$30 off During Our Annual Pro Sale. View Details »

Fastest request is never made

Fastest request is never made

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.

Sergey Chernyshev

August 31, 2017
Tweet

More Decks by Sergey Chernyshev

Other Decks in Technology

Transcript

  1. FASTEST REQUEST IS NEVER MADE Effective use of Browser HTTP

    Cache Sergey Chernyshev @sergeyche NYC JavaScript React Group August 31, 2017
  2. 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
  3. 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
  4. 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/
  5. Tim Berners-Lee Waterfalls • Initial Load • Re-validation • Expiration

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

    If-Modified-Since: <date> If-None-Match: xyz987 304 Not Modified GET /main.css
  7. 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
  8. 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