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

Vary and the future of Cache Variation

Vary and the future of Cache Variation

Andrew Betts

October 03, 2017
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Hi bank.com! GET /statement please Here’s a text/html representation of

    /statement Thanks, but, like, Accept: text/csv? Very well, human. Here’s a text/csv representation of /statement
  2. Accept: text/html,application/xhtml+xml,application/xml; q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: en-GB,en-US;q=0.8,en;q=0.6 Cache-Control: max-age=0

    Connection: keep-alive Host: www.nikkei.com Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Request headers
  3. Accept-Ranges: bytes Cache-Control: max-age=3600, public Vary: Accept-Language Connection: keep-alive Content-Encoding:

    gzip Content-Language: ja Content-Length: 29019 Content-Type: text/html;charset=utf-8 With vary
  4. How vary works Users Fastly Server Accept-Language: en Accept-Language: ja

    Store with vary key Store with vary key Vary: Accept-Language Vary: Accept-Language
  5. Compute a cache key URL path: /home/ Method: GET Host:

    example.com Accept-Language: en Cache key: GET example.com /home/ REQUEST Method Hostname Path Ignore this for now
  6. Compute Vary key Vary: Accept-Language Cache-Control: max-age=3600 Vary key: “en”

    RESPONSE CACHE OBJECT Cache key: “GET example.com/home/” Vary key: “en” Vary: “Accept-Language” URL path: /home/ Method: GET Host: example.com Accept-Language: en REQUEST
  7. Second request: hit in cache? URL path: /home/ Method: GET

    Host: example.com Accept-Language: ja Cache key: “GET example.com/home/” SECOND REQUEST Cache key: “GET example.com/home/” Vary key: “en” Vary: Accept-Language HIT! MAYBE “ja” !== “en” 1 3 2 ❌
  8. Many variations, same URL Object 1 Object 2 Object 3

    Vary header on cache object “Accept-Language” “Accept-Language” “Accept-Language” Computed vary-key for active request “es-es” “es-es” “es-es” Value of the cache object’s vary-key “en” “ja” “es-es” Vary match? No No Yes URL path: /home/ Method: GET Host: example.com Accept-Language: es-es THIRD REQUEST MATCHING CACHE ENTRIES
  9. Accept-Language around the world Washington DC Frankfurt Tokyo 1 en-us

    en-US,en;q=0.8 ja-jp 2 en-US,en;q=0.8 it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4 ja-JP,en-US;q=0.8 3 en-US en-us ja-JP 4 en-US,en;q=0.5 it-it ja-JP,ja;q=0.8,en-US;q=0.6,en;q=0.4 5 en tr-tr ja,en-US;q=0.8,en;q=0.6 6 pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 ru ja 7 en_US tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4 8 es-ES,es;q=0.8 pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR 9 en,* ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 en-us 10 en-US;q=1 de-de ko-KR,en-US;q=0.8 + over 5000 total variations
  10. Normalise for vary (5000 -> 6) Washington DC Frankfurt Tokyo

    1 en (84%) en (60%) jp (74%) 2 es (7%) es (18%) en (23%) 3 pt (6%) de (12%) es (3%) 4 jp (2%) fr (7%) 5 fr (1%) pt (2%) 6 jp (1%) https://docs.fastly.com/guides/vcl/accept-language%20header-vcl-features accept.language_lookup("en:de:fr:pt:es:jp", "en", req.http.Accept-Language); only
  11. Accept Accept-Language Accept-Encoding Traditional Vary targets Format. Doesn’t really work

    as intended. Language. Not used enough! Compression. Used everywhere!
  12. Variation for Accept-Encoding Accept-Encoding Cached response 1 gzip, br, deflate

    Gzipped 2 br, gzip Gzipped 3 gzip, br Gzipped 4 br Uncompressed 5 gzip Gzipped 6 gzip, deflate Gzipped
  13. Semantically-aware variant processing HTTP/1.1 200 OK Content-Type: image/gif Content-Language: en

    Content-Encoding: br Variants: Content-Language;en;jp;de Variants: Content-Encoding;gzip Vary: Accept-Language, Accept-Encoding Transfer-Encoding: chunked
  14. Cookie: bknx_fa=1493712326578; _cb_ls=1; __gads=ID=b97051db299bac0a:T=1493714224:S=ALNI_MbDirXmxxxxxxxxxxH9MEN0IAJA; o-tracking-proper-id=cj208xxxxxxx0003i5xajkyks1d; opFTData=%26v%3D1; opPageCount=null%26sub%3D1; SIVISITOR=NC4zOTUuOxxxxxxxxxxxxTE4MDQuMTQ5NjI2MDI5ODYyMi4zODgyMDA0*; opTrackSess=%26t%3D1%26vt%3D1; FTUserTrack=8.18.217.202.1496260299656254;

    AYSC_C=S; GZIP=1; FT_M=; __utmc=37329215; userAuthState=subscriber; fyre-fpuuid=54067c4a-cdf3-40f4-8755-a1c66113fabc; _ga=GA1.2.1627681311.1496190716; amp-access=amp-8rCnbBwKSCB_t3PxsLVBrZ5VYPNsrjEMLGzdWKOviudRFpse1K3z4rgEVCHJuTuK; _kuid_=amp-TgUtXcxY-F8zD9qcv2Ddj_1zNPdnSrI-JRCn3sSMEiwd4vcTl3YXuuxiqzy3vYnm; h2_isEnabled=true; h2_rtt=13; sc.ASP.NET_SESSIONID=qjaxxxxxf12doptythq22s1; FT_P=exp=1512039366183&prod=71|72|73; FT_User=USERID=4012147701:[email protected]:FNAME=Andrew:LNAME=Betts:TIME=%5BThu%2C+30-Nov-2017+10%3A55%3A36+GMT% 5D:USERNAME=andrew@xxxxxxv:REMEMBER=_REMEMBER_:ERIGHTSID=1xxxxx01:PRODUCTS=_Tools_P0_P1_:RESOURCES=:GROUPS=:X=; AYSC=_04PVT_05IT_06TEC_07PR_13USA_14GBR_15US_17PVT_18PVT_22ToolsP0P1_24PVT_25PVT_26PVT_27PVT_96PVT_98PVT_; FT_U=_EID=1xxxxx1_PID=40xxxxx01_TIME=%5BThu%2C+30-Nov-2017+10%3A55%3A36+GMT%5D_SKEY=VqTtH%2F6To%2F2Vh6JfG0WeVA%3D%3D_; FTSession=z0Wn3PvaXUQu04WXrVahJv9JzwAAAWAMkUc2w8I.MEUCIQDYxnOIup726gO44CxqpCXW2xKpuGzSvsdQxxxxxxxfgYvyfQX7uuEISTqIhRuEdU tpKsMV3oPTQGuzgnNt3g; FTSession_s=z0Wn3PvaXUQu04WXrxxxxv9JzwAAAWAMkUc2w8I.MEYCIQCjsYjnWe7LHFGWrGh XL0NCOqtfXgATicwiH7-dVgslaQIhAKzhBo32vj2i2c7Z38daf6NRLNmnpvLkDm0ocaUAje33; _cb=DPINaxxxxxHBkohYk; FTAllocation=45a7dcfb-da5d-442e-xxxxx-adxxxxxxff49; spoor-id=cj208hsbu00003ixxxxxxks1d; __cfduid=d57xxxx3c5f00546aaf8accce16b608cc1516016990; __utma=37329215.1627681311.1496190716.1496957522.1516016993.2; __utmz=37329215.1516016993.2.1.utmcsr=duckduckgo.com|utmccn=(referral)|utmcmd=referral|utmcct=/; ft-access-decision-policy=-; lux_uid=15166xxxxxx09308369; o-typography-fonts-loaded=1; _chartbeat2=.1493xxxxxxx66.1516625619078.01xxxx010000001.ByQBYaC_X2j1saGnTBWe8TRBsbFL3; _cb_svref=null; kppid=12xxxx01 Cookie header contains many cookies Interesting one! ¯\_(ツ)_/¯
  15. Edge normalise: response Vary: Cookie Cache-Control: max-age=3600 BEFORE Vary: UserRole

    Cache-Control: max-age=3600 AFTER Essentially uncacheable Only 2 variations
  16. Don’t do this URL path: /home/ Method: GET Host: example.com

    REQUEST Cache-Control: max-age=3600 RESPONSE URL path: /home/ Method: GET Host: example.com Accept-Language: en REQUEST Cache-Control: max-age=3600 Vary: Accept-Language RESPONSE This response can be used for any request for /home/! Same URL
  17. Fixed URL path: /home/ Method: GET Host: example.com REQUEST Cache-Control:

    max-age=3600 Vary: Accept-Language RESPONSE URL path: /home/ Method: GET Host: example.com Accept-Language: en REQUEST Cache-Control: max-age=3600 Vary: Accept-Language RESPONSE Same Vary
  18. General rule of thumb Always include the Vary header in

    the response Even if the header you are varying on is not in the request
  19. What if multiple headers interact? UserRole ABTestFlags ABTestFlags anon-user subscriber

    A B C D A B C D Cache-Control: max-age=3600 Vary: UserRole, ABTestFlags RESPONSE Hmm. For anonymous users, all the variations are the same.
  20. What if multiple headers interact? REQUEST UserRole: anon-user ABTestFlags: A

    RESPONSE Vary: UserRole REQUEST UserRole: subscriber ABTestFlags: C RESPONSE Vary: UserRole, ABTestFlags
  21. What if I told you... Browser tab Image cache CDNs

    Origin server Preload cache Service worker cache API HTTP cache HTTP/2 push cache Per page Per origin (domain) Per connection
  22. New headers we can vary on DPR: 2.0 Width: 320

    Viewport-Width: 320 Save-Data: 1
  23. Single page apps use same URLs for REST APIs Browser

    Server /products/t-shirt Accept: */* /products/t-shirt Accept: application/json Vary: Accept Vary: Accept <html> <body> {id: 12345, name: ... }
  24. • Are you serving unnecessary requests? • Are you doing

    enough normalisation? • Could you be using Client Hints? • Do you have feedback on Variants, Key or Client Hints proposals? • Does your hosting platform allow you to modify HTTP headers? If not, why not!? Closing questions
  25. Thanks for listening I am Get the slides: Andrew Betts

    @triblondon [email protected] fastly.us/varytalk Take our survey: fastly.us/2skOnXM