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.

Transcript

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

   View Slide

2. Why do we care?
   

   View Slide

3. Awesome Website!
   

   View Slide

4. View Slide

5. Sloooowly
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

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

   View Slide

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

    View Slide

11. slownesskills.com
    

    View Slide

12. THERE ARE
    NO
    CACHING PROBLEMS
    only caching solutions
    

    View Slide

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

    View Slide

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

    View Slide

15. Waterfall of
    Useless 304s
    

    View Slide

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

    View Slide

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

    View Slide

18. DEMO
    

    View Slide

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
    

    View Slide

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
    

    View Slide