Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    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