HTTP Caching - Der Gigant unter den Caches

HTTP Caching - Der Gigant unter den Caches

Moderne Webapplikationen sind dynamisch. Ein Seitenaufruf macht in der Regel mehr als einfach nur eine Datei ausliefern. Sobald Performance wichtig wird, brauchen wir HTTP Caching. Anstatt das Rad neu zu erfinden, setzen Symfony und Contao dabei voll auf die HTTP Standards.

Welche HTTP-Header kann ich nutzen? Was ist der Unterschied zwischen einem Shared und einem Private Cache? Was ist ESI und was kann ein Reverse Proxy? Warum sind Responses mit Sessions nicht cachebar oder sind sie es doch?

670b64285dd82872435c7d1889a4dd2c?s=128

Yanick Witschi

June 08, 2018
Tweet

Transcript

  1. terminal42 web development gmbh Der Gigant unter den Caches HTTP

    Caching Contao Konferenz 2018
  2. terminal42 web development gmbh Über mich • Yanick Witschi /

    terminal42 gmbh • 29, Schweizer • Contao Core Entwickler • API's, Performance, Caching • Tennis, Basketball, Faustball • Scotch • @toflar
  3. terminal42 web development gmbh Was will ich mit euch erreichen?

    • Kurze RekapitulaOon von HTTP. • Ihr kennt den Unterschied von Private und Public Caches. • Ihr versteht den Unterschied von Cache ExpiraOon und Cache ValidaOon und die notwendigen HTTP Header dazu. • Ihr versteht den Vary-Header • Ihr könnt die FunkOonsweise von Edge Side Includes (ESI) nachvollziehen. • Ihr könnt etwas von diesem Vortrag für eure tägliche Arbeit mitnehmen und macht euch akOv Gedanken zu den Headern während der Programmierung.
  4. terminal42 web development gmbh GET /de/news.html HTTP/1.1 Host: contao.org Accept:

    text/html Accept-Language: de Client Server Request Response HTTP/1.1 200 OK Server: nginx Content-Type: text/html; charset=utf-8
 
 <!DOCTYPE html> <html lang="de"> <head>
 [...] Message Body Status Code HTTP Messages Browser, CURL, Wget, etc. Apache, NGINX, Litespeed, etc. Verb Headers Headers
  5. terminal42 web development gmbh Unser ulAmaAves Ziel mit Caching: Die

    idenOsche HTTP Response niemals zwei Mal generieren!
  6. terminal42 web development gmbh Welche Responses sind cachebar? • GET

    und HEAD Requests • 2xx Statuscode (Faustregel)
 Ausnahmen: z.B. 301 Moved Permanently • BesOmmte Header dürfen nicht vorkommen, bspw. AuthorizaOon oder Cookie* und es hängt davon ab ob Private oder Public Cache ✅ GET /de/news.html HTTP/1.1 ❌ POST /de/news.html HTTP/1.1 ❌ GET /de/news.html?delete=15 HTTP/1.1
  7. terminal42 web development gmbh Browser Server Private Cache

  8. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache
  9. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Shared / Public Cache
  10. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Shared / Public Cache
  11. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Proxy Proxy Shared / Public Cache
  12. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Shared / Public Cache Proxy Proxy Proxy Shared / Public Cache
  13. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Shared / Public Cache Contao 4: ✅ schickt die richAgen Cache-Headers ✅ erlaubt separate KonfiguraAon für Private und Public Caches ✅ unterstützt ESI ✅ ist somit kompaAbel mit beliebigen Setups!
  14. terminal42 web development gmbh Unsere erste Caching DirekAve HTTP/1.1 200

    OK Cache-Control: private HTTP/1.1 200 OK Cache-Control: public Ergibt natürlich ohne sonsOge Anweisungen noch nicht so wirklich viel Sinn
  15. terminal42 web development gmbh Caching-Ansätze

  16. terminal42 web development gmbh Die 2 (3) Caching-Ansätze 1. Cache

    ExpiraAon
 
 "Du kannst die Antwort bis am <Datum> cachen."
 "Du kannst die Antwort 600 Sekunden lang cachen." 2. Cache ValidaAon
 
 "Hallo Server, meine letzte Anfrage war am <Datum>, gib mir die neue Antwort, wenn sich denn seit damals was geändert hat."
 "Hallo Server, bei meiner letzten Anfrage hast du die Antwort mit folgender Versionsnummer ausgezeichnet, gib mir die neue Antwort wenn diese nicht mehr aktuell ist." 3. Cache InvalidaAon (funkAoniert nur für Public Caches/Proxies)
 
 "Du kannst die Antwort für immer* behalten, ich werde deinen Cache löschen sobald erforderlich."
  17. terminal42 web development gmbh Cache ExpiraAon HTTP/1.1 200 OK Expires:

    Wed, 13 Jun 2018 07:28:00 GMT Cache-Control: private ✅ FunkOoniert auch für HTTP/1.0 (aber mal ganz ehrlich…) ❌ Browser- und Server-Zeit müssen synchron sein ❌ Mühsam zum Berechnen, weil meistens ist das Datum egal, nur die Zeitspanne ist relevant
  18. terminal42 web development gmbh Cache ExpiraAon HTTP/1.1 200 OK Cache-Control:

    private, max-age=600 ✅ Sehr einfach ✅ Erfordert keine SynchronisaOon der Browser- und Serverzeit ❌ FunkOoniert nicht für HTTP/1.0 (aber mal ganz ehrlich…)
  19. terminal42 web development gmbh Cache ExpiraAon HTTP/1.1 200 OK Expires:

    Wed, 13 Jun 2018 07:28:00 GMT Cache-Control: public, max-age=600, s-maxage=800 • s-maxage ist nur für Public / Shared-Caches (ja, "maxage" ohne "-") • Reihenfolge: 1. s-maxage (wenn Proxy) 2. max-age 3. Expires
  20. terminal42 web development gmbh Cache ValidaAon Client Server GET /page.html

    HTTP/1.1 HTTP/1.1 200 OK Cache-Control: private Last-Modified: Wed, 13 Jun 2018 07:28:00 GMT GET /page.html HTTP/1.1 If-Modified-Since: Wed, 13 Jun 2018 07:28:00 GMT HTTP/1.1 304 Not Modified HTTP/1.1 200 OK Cache-Control: private Last-Modified: Wed, 20 Jun 2018 14:33:00 GMT ⊕ ✅ Reduziert Traffic ✅ Kann die Serverbelastung reduzieren, hängt davon ab wie Last-Modified ermilelt wird ❌ Browser- und Server-Zeit müssen synchron sein
  21. terminal42 web development gmbh Cache ValidaAon Client Server GET /page.html

    HTTP/1.1 HTTP/1.1 200 OK Cache-Control: private ETag: <Versionsnummer, ID, Hash> GET /page.html HTTP/1.1 If-None-Match: <Versionsnummer, ID, Hash> HTTP/1.1 304 Not Modified HTTP/1.1 200 OK Cache-Control: private ETag: <Versionsnummer, ID, Hash> ⊕ ✅ Reduziert Traffic ✅ Uhrzeiten sind irrelevant ✅ Kann die Serverbelastung reduzieren, hängt davon ab wie der ETag ermilelt wird
  22. terminal42 web development gmbh KombinaAon HTTP/1.1 200 OK Cache-Control: private,

    max-age=600 ETag: <Versionsnummer, ID, Hash> • Reihenfolge: 1. ExpiraOon 2. ValidaOon
  23. terminal42 web development gmbh Zusammenfassung ExpiraOon = weniger Requests ValidaOon

    = weniger Bandbreite* * und im Idealfall weniger Serverlast
  24. terminal42 web development gmbh Cache InvalidaAon Client Server GET /page.html

    HTTP/1.1 HTTP/1.1 200 OK Cache-Control: public Cache-Control: s-maxage=31556926 PURGE /page.html HTTP/1.1 ✅ Antworten können für immer* im Shared Cache bleiben ❌ Bringt viel Zeit und KonzentraOon mit, denn ab hier wird's spassig :-) Proxy GET /page.html HTTP/1.1 HTTP/1.1 200 OK Cache-Control: public Cache-Control: s-maxage=31556926
  25. terminal42 web development gmbh Der Vary-Header

  26. terminal42 web development gmbh Cache-Au[au URI Cache-Infos Response /page.html max-age=3600

    <html>... /robots.txt max-age=86400 Sitemap: https://... /team.json ETag=... [{name: ""}, ...]
  27. terminal42 web development gmbh Beispiel GET /page.html HTTP/1.1
 User-Agent: Mozilla/5.0

    (Macintosh; Intel) Gecko/20100101 Firefox/59.0 HTTP/1.1 200 OK Cache-Control: public, s-maxage=3600 Content-Length: 121 Content-Type: text/html <html> <head> ... </head> <body id="top" class="mac firefox gecko fx59"> ... </body> </html> Proxy ? ? ?
  28. terminal42 web development gmbh Beispiel GET /page.html HTTP/1.1
 User-Agent: Mozilla/5.0

    (Macintosh; Intel) Gecko/20100101 Firefox/59.0 HTTP/1.1 200 OK Cache-Control: public, s-maxage=3600 Content-Length: 121 Content-Type: text/html Vary: User-Agent <html> <head> ... </head> <body id="top" class="mac firefox gecko fx59"> ... </body> </html>
  29. terminal42 web development gmbh Cache-Au[au URI Vary Cache-Infos Response /page.html

    User-Agent=Firefox max-age... <html> <body class="ff"... /page.html User-Agent=Chrome max-age... <html> <body class="gc"... /page.html User-Agent=Edge max-age... <html> <body class="me"...
  30. terminal42 web development gmbh Edge Side Includes ESI

  31. terminal42 web development gmbh Bild von fastly.com

  32. terminal42 web development gmbh HTTP/1.1 200 OK Cache-Control: public, s-maxage=3600

    Content-Type: text/html Surrogate-Control: content="ESI/1.0" <html> <head> ... </head> <body id="top" class="<esi:include src="/useragent" />"> <div class="content> <p>Lorem.....</p> </div> <div class="cart"><esi:include src="/cart.html" /></div> </body> URI Cache-Infos Response /page.html max-age... <html> <body class="<esi:..." /useragent no-store mac firefox gecko fx59 /cart.html no-store <span class="total">2</span>
  33. terminal42 web development gmbh Surrogate-Capability Client Server GET /page.html HTTP/1.1

    HTTP/1.1 200 OK Cache-Control: public Cache-Control: max-age=3600 Proxy
 mit
 ESI Support GET /page.html HTTP/1.1 Surrogate-Capability: ESI/1.0 HTTP/1.1 200 OK Cache-Control: public Cache-Control: s-maxage=31556926 Surrogate-Control: content="ESI/1.0" ✅ Alles basiert auf HTTP Header und ist daher komplel Sonware-unabhängig
  34. terminal42 web development gmbh HTTP/1.1 200 OK Cache-Control: public, max-age=800,

    s-maxage=3600 Content-Length: 4995 ETag: contao-konferenz Content-Type: text/html Surrogate-Control: content="ESI/1.0" <html> <head> ... </head> <body id="top" class="<esi:include src="/useragent" />"> <div class="content> <p>Lorem.....</p> </div> <div class="cart"><esi:include src="/cart.html" /></div> </body> KombinaAon
  35. terminal42 web development gmbh Jetzt seid ihr dran! Wenn ihr

    Responses generiert. Denkt akOv über die Caching-Header nach, ganz besonders dann, wenn Ihr APIs baut!
  36. terminal42 web development gmbh ? Contao Konferenz 2018