Cache me if you can

Cache me if you canCaching im Web-Umfeld

Wer?

● Mario Müller (@xenji / http://www.xenji.com)● Works @trivago_com● Likes: @mongodb, @go_nuts ● Andy Grunwald (@andygrunwald / http:

//andygrunwald.com)● Works @wmdbsystems● Likes: @blankomat, @devops_borat

Um was gehts?

● Speicherung von

○ (mehr oder weniger aufwendig) berechneten Daten

○ großen Datenmengen

○ wiederkehrenden Daten

Layer

● Unter Verwendung von○ Level 1 Caches

● z. B. XCache oder APC

○ Level 2 Caches● Memcache, Redis, MongoDB

○ Anderer Caches● Der Client (Browser, Rich-Client)● HTTP Caches

Ziele

● Zum Erreichen von

○ schnelleren, bzw. garantierten Antwortzeiten

○ geringerem, bzw. verteiltem Rechenaufwand

○ geringerer Übertragungsmenge

Warum ist Caching denn so geil?

● Weil Rechnen teuer ist● Weil RAM billig ist● Weil gecach'te Architekturen besser

skalieren + Musketier Prinzip "Einer für alle", einer Rechnet, alle haben etwas davon.

Wir betrachten heute drei Stufen des Cachings.

Vor dem

Req

uest

Im R

eques

t

Nach dem

Req

uest

Wer nicht rein kommt, macht keinen Dreck

Vor dem Request

Requests garnicht erst ankommen lassen...

Varnish to the rescue!

● ein Reverse Proxy Server● ein HTTP Cache● verdammt schnell● Open-Source● erprobt und bei vielen schon im Einsatz● die einzige Open-Source Lösung für Edge

Side Includes (ESI) Symfony2 unterstütz ESI und damit auch Varnish von Haus aus. Varnish kann aber auch allen anderen Web Applikationen helfen!

Varnish ist ...

Varnish ggn. ApacheRequests: 1.000 - Concurrency: 1- Apache: 9.97 Requests per Second (RAM:50% CPU:100%)- Varnish:3003.98 Requests per Second (RAM:50%CPU:5%) Requests: 1.000 - Concurrency: 10- Apache: 10.60 Requests per Second (RAM:95% CPU:100%)- Varnish: 6391.29 Requests per Second (RAM:50% CPU:10%) Requests:10.000 - Concurrency: 100- Apache: Absturz- Varnish: 6179.76 Requests per Second (RAM:55% CPU:15%) Quelle: http://www.slideshare.net/papst23/n3rd-4-speed

Im RequestAndere von der Rechenarbeit profitieren

lassen

Schneller dran kommen...

Backend Caching

● Query Result Cache○ Speichert die reinen DB Ergbnisse von teueren Queries○ Kann in der Applikation beliebig umher gereicht werden, da es

Rohdaten sind.

● pre-render Cache○ Vorberechnete Werte, meist auf DB oder Webservice Ergebnissen

basierend○ Kann meistens nur die direkt verbundene Business - Logik nutzen

● Output Cache○ Fertiges HTML, JSON, XML, etc.○ Gut um Last von Servern zu nehmen für Dinge die sich selten ändern

oder explizit neu berechnet werden können

Cache - Types (Auszug)

Große Herausforderungen

● In welchen Cache Layer soll es?

● Wer oder was sagt an, dass ein Cache invalide ist?

● Wann wird der Cache neu befüllt? ○ Erste Anfrage nach Invalidierung oder○ beim Invalidieren oder○ durch einen Cronjob?

● Wer muss wissen, dass die Daten gecached sind? (Architektur - Frage)

● Beten, dass alles so wieder raus kommt, wie man es rein gesteckt hat (Problem von verteilten, konkurrierenden Caches)

● Alles was nur irgendwie geht vorberechnen

● Aufpassen, ○ dass das Cache Management nicht die

ursprüngliche Ersparnis aufbraucht○ dass man auch ohne Cache weiter leben kann.

(Ausfallszenarien)

Was macht man beim Backend Caching ?

Was gibt es und was kann man damit machen?

Cache stores

Von einer relationalen DB zu ..

● Memcached (Key / Value Store)○ Level 2 Cache○ Schnellste wo gibt (meistens)○ Einfach zu implementieren○ Reiner In-Memory Store (=> Server weg, Daten

weg)● Redis

○ Level 2 Cache○ Wahrscheinlich schneller als Memcached (?)○ Einfach zu implementieren○ Mächtiger als Memcached + persistent

Von einer relationalen DB zu ..

● MongoDB○ Eigenständige, mächtige Document DB○ Kann Level 2 sein oder vollständiger Ersatz○ Performance abhängig vom Nutzungsszenario

Alle aufgelisteten Server können zusammen mit einer bestehenden MySQL verwendet werden, Einige können mehr Logik vertragen als Andere.

Wir nehmen uns die "employee database", eine Demo Datenbank mit ca. 3,2 Mio. Zeilen,

Beispieldaten

Hm, und nu?

● Wir schauen uns Quellcode an ● Wir probieren den Quellcode aus => Live Demo

So viel wie geht beim Client lassen

Nach dem Request

Gar nicht erst laden lassen...

Frontend Caching

Einige Zahlen

● Top 1000 Pages: Durchschnittlich >50 Resources per page

● http://www5.mercedes-benz.com/de/

○ 161 Requests○ 9,48 MB transferred (1. Hit)○ 1,4 Min @ DSL 700 (1. Hit) ○ 24,09 KB transferred (2. Hit)○ 5,54 Sek @ DSL 700 (2. Hit)

HTTP Standard und der Rest

● Status Codes

● MIME types

● Expires headers

● ETag

● Minify und concat

● gzip

Status Codes

● 200 OK

● 204 No Content

● 301 Moved Permanently

● 304 Not Modified

● 404 Not Found

● More codes: https://github.com/joho/7XX-rfc

MIME types

● Bekannt aus Film und Fernsehen z.B. HTML○ <form accept="" enctype="">○ <script type="">○ <style type="">

● Server und Client halten "defaults" vor ● Lösung: Vereinheitlichung (via AddType)

Expires headers

● Wann läuft eine Ressource ab? ● Grundlage: Standardisierte MIME types ● Far far away? Depends!

ExpiresByType text/html "access plus 0 seconds"ExpiresByType text/css "access plus 1 year"ExpiresByType application/javascript "access plus 1 year"ExpiresByType application/xml "access plus 0 seconds"ExpiresByType application/json "access plus 0 seconds"

Assets Versionierung

● Doof :(<link rel="stylesheet" type="text/css" href="style.css"> ● Gut :|<link rel="..." type="text/css" href="style.css?131920563"> ● Besser :)<link rel="..." type="text/css" href="style.131920563.css">

Das "böse böse " Entity tag

● Server / Client-Kommunikation ● Hash-Wert im HTTP-Header ● Problematisch bei mehreren Servern zur

Auslieferung von Assets (Inode)● Problematisch bei IIS

○ Filetimestamp:ChangeNumber

● Lösung: Ausschalten ;)

Entity tag

Entity tag

Minify und concat

● Entfernen von "überflüssigen" Zeichen● Zusammenfassen von Resourcen

● jQuery○ 247KB, Uncompressed○ 83KB, Compressed (Google Closure, ohne gzip)○ 31Kb, Compressed (Google Closure, mit gzip)

● Google Closure Compiler● YUI Compressor● Apache mod_pagespeed

deflate & gzip

● Server packt die Daten zusammen● Client entpackt die Daten● Muss vom Client + Server unterstützt

werden ● Header

○ Accept-Encoding (Client)○ Content-Encoding (Server)

● Wunderwaffe? Nein! Einsatz Depends!

Theorie hin oder her ... Testing?!

● Mozilla: about:cache ● Mozilla Addon: YSlow ● Chrome: Developer Tools

Weitere Themen ...

● Cache Manifest ● Local Storage ● SQLite im Browser ● Inline Bilder (base64) ● and many more ...

SQLite im Browser

● Kann Cache sein, kann auch mehr sein

● Übersetzungstexte für die Browser Locale

● Applikationseinstellungen bei Individualisierung

● Der Zustand der Seite beim window.onunload

● Asset Caching (CSS, JS)

Google sagt ...

https://developers.google.com/speed/

Tools, Links und Resourcen

● YSlow● https://github.com/h5bp/html5-boilerplate● http://danbeam.org/blog/2011/05/06/script-

not-a-type-ical-tag/● http://www.websiteoptimization.

com/speed/tweak/average-web-page/● http://www.stevesouders.

com/blog/2008/08/23/revving-filenames-dont-use-querystring/

● https://github.com/joho/7XX-rfc● http://developer.yahoo.

com/performance/rules.html#etags