développeurs, cachez-moi ça ! (paris web 2011)
DESCRIPTION
L'une des contraintes les plus complexes à résoudre lorsqu'on développe une application web consiste à ne pas générer deux fois la même page. Pour y parvenir, la plupart des développeurs ont recours à des solutions de cache propriétaires qui montrent rapidement leurs limites lorsqu'il s'agit de cacher des pages très dynamiques. Un article et ses commentaires, accompagnés d'un flux Twitter actif par exemple. Heureusement, le protocole HTTP offre depuis très longtemps des outils adaptés pour contrôler la mise en cache côté navigateur. Au cours de cet atelier, nous étudierons tout d'abord les modèles fondamentaux du cache HTTP côté client grâce à l'expiration et la validation. Enfin, nous découvrirons comment améliorer les performances tout en restant le plus dynamique possible grâce aux Edge Side Includes, ESI, et les reverse proxy caches tels que Varnish.TRANSCRIPT
![Page 1: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/1.jpg)
« Cachez-moi cette page ! »
Hugo Hamon (@hhamon) http://hugohamon.com
Atelier Pratique 1h30
![Page 2: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/2.jpg)
Qui suis-je ?
![Page 3: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/3.jpg)
Au menu de cet atelier
1. Introduction
2. Avantages
3. Expiration (Expires & Cache-Control)
4. Validation (Etag & Last-Modi"ed)
5. Reverse Proxy Cache
6. Edge Side Includes
![Page 4: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/4.jpg)
Introduction au Cache HTTP
§ Mai 1996 – RFC1945 (HTTP 1.0) § Mars 1999 – RFC2616 (HTTP 1.1)
http://www.ietf.org/rfc/rfc2616.txt http://tools.ietf.org/wg/httpbis/
![Page 5: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/5.jpg)
Pourquoi cacher ?
§ Ne pas générer la même réponse deux fois § Diminuer la charge sur le serveur web § Diminuer la bande passante § Diminuer les temps de chargement § Servir plus de monde avec moins de serveurs § Améliorer l’expérience utilisateur
![Page 6: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/6.jpg)
Objectifs ?
Etre le plus dynamique et le plus performant en sollicitant l’application le moins possible.
![Page 7: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/7.jpg)
Types de caches
Browser
Browser
Brow
ser C
ache
Prox
y Cac
he
Web Server
Gatew
ay Ca
che
Brow
ser C
ache
Client-Side Caching Server-Side Caching
![Page 8: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/8.jpg)
Quels sont les contenus cachables ?
Seules les réponses à des requêtes GET et HEAD peuvent être cachées car elles ne changent pas l’état de la ressource.
Les requêtes POST, PUT et DELETE ne sont pas cachables !
![Page 9: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/9.jpg)
Stratégies
Expiration
![Page 10: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/10.jpg)
Expiration
Détermine la durée pendant laquelle une réponse doit être considérée « fraîche » par le cache. Au delà de cette période, la ressource est considérée comme « périmée ».
Avantages : soulager la charge du serveur web
![Page 11: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/11.jpg)
Expiration
Expires
![Page 12: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/12.jpg)
Expires $expires = new \DateTime('2011-10-15 11:00:00'); $expires->setTimezone(new \DateTimeZone('UTC')); $date = $expires->format('D, d M Y H:i:s'); header(sprintf('Expires: %s GMT', $date));
HTTP/1.1 200 OK Date: Thu, 18 Aug 2011 18:19:10 GMT Expires: Sat, 15 Oct 2011 09:00:00 GMT Content-Type: text/html <html> ... </html>
PHP
HTTP
![Page 13: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/13.jpg)
Expiration
Cache-Control
![Page 14: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/14.jpg)
Cache-Control
header('HTTP/1.1 200 OK'); header('Cache-Control: private, maxage=60');
HTTP/1.1 200 OK Date: Thu, 18 Aug 2011 18:29:30 GMT Cache-Control: private, maxage=60 Content-Type: text/html <html> ... </html>
HTTP
PHP
![Page 15: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/15.jpg)
Stratégies
Validation
![Page 16: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/16.jpg)
Validation
Détermine si une ressource a changé depuis la dernière demande du client en marquant cette dernière à l’aide d’un identi"ant ou d’un tampon.
Avantages : diminuer le tra"c sur le réseau
![Page 17: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/17.jpg)
Validation
304 est votre ami !
![Page 18: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/18.jpg)
Validation
Etag If-None-Match
![Page 19: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/19.jpg)
Entity Tag
// Generate the resource etag $etag = 'abcdef'; header('HTTP/1.1 200 OK'); header('Etag: '. $etag);
HTTP/1.1 200 OK Date: Thu, 18 Aug 2011 19:33:12 GMT Etag: abcdef Content-Type: text/html <html> ... </html>
PHP
HTTP
![Page 20: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/20.jpg)
If-None-Match
// Generate the resource etag $etag = 'abcdef'; if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $etag === $_SERVER['HTTP_IF_NONE_MATCH']) { header('HTTP/1.1 304 Not Modified'); exit; }
PHP
![Page 21: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/21.jpg)
If-None-Match
GET /etag.php HTTP/1.1 Host: www.paris-web.local If-None-Match: abcdef
HTTP/1.1 304 Not Modified
HTTP
HTTP
![Page 22: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/22.jpg)
Validation
Last-Modi"ed If-Modi"ed-Since
![Page 23: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/23.jpg)
Last-Modi"ed
// Determine the last modified date $date = 'Sat, 12 Aug 2011 10:00:00 GMT'; header('HTTP/1.1 200 OK'); header('Last-Modified: '. $date);
HTTP/1.1 200 OK Date: Thu, 18 Aug 2011 20:07:55 GMT Last-Modified: Sat, 12 Aug 2011 10:00:00 GMT Content-Type: text/html <html> ... </html>
PHP
HTTP
![Page 24: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/24.jpg)
If-Modi"ed-Since
// Determine the last modified date $date = 'Sat, 12 Aug 2011 10:00:00 GMT'; if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && $date === $_SERVER['HTTP_IF_MODIFIED_SINCE']) { header('HTTP/1.1 304 Not Modified'); exit; }
PHP
![Page 25: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/25.jpg)
If-Modi"ed-Since
GET /last-modified.php HTTP/1.1 Host: www.paris-web.local If-Modified-Since: Sat, 12 Aug 2011 10:00:00 GMT
HTTP/1.1 304 Not Modified
HTTP
HTTP
![Page 26: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/26.jpg)
Validation & Expiration
Combiner les deux stratégies reste possible en sachant que l’expiration l’emporte d’abord sur la validation.
![Page 27: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/27.jpg)
Cache côté serveur
Reverse Proxy Cache Surrogate Cache Gateway Caches
![Page 28: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/28.jpg)
Reverse Proxy Cache
Un reverse proxy cache siège devant le serveur web, intercepte les requêtes entrantes et retourne les réponses fraîches de son cache.
![Page 29: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/29.jpg)
Quelques caches intermédiaires connus…
Squid Varnish
Mod_Cache (Apache)
![Page 30: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/30.jpg)
Varnish-Cache.org
![Page 31: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/31.jpg)
Con"guration de Varnish # Make Varnish listen to port 80 backend default { .host = "127.0.0.1"; .port = "80"; } # Add ESI support header to all incoming requests sub vcl_recv { set req.http.Surrogate-Capability = "abc=ESI/1.0"; } # Remove Surrogate-Control header from response headers # And parse the response for ESI sub vcl_fetch { if (beresp.http.Surrogate-Control ~ "ESI/1.0") { unset beresp.http.Surrogate-Control; set beresp.do_esi = true; } }
![Page 32: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/32.jpg)
Cacher des réponses dans Varnish
Cache-Control Public
Shared MaxAge
![Page 33: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/33.jpg)
Cacher des réponses dans Varnish
header('HTTP/1.1 200 OK'); header('Cache-Control: public, s-maxage=60');
HTTP/1.1 200 OK Date: Thu, 18 Aug 2011 20:54:08 GMT Cache-Control: public, s-maxage=60 Content-Type: text/html <html> ... </html>
PHP
HTTP
![Page 34: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/34.jpg)
Cacher tout en restant dynamique
Edge Side Includes http://www.w3.org/TR/esi-lang
![Page 35: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/35.jpg)
Edge Side Includes
<esi:include src="/banner.html"/>
![Page 36: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/36.jpg)
Edge Side Includes
Non caché
![Page 37: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/37.jpg)
Edge Side Includes
<esi:include … />
3600 seconds
![Page 38: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/38.jpg)
Edge Side Includes Cli
ent
Reve
rse Pr
oxy C
ache
Serve
ur W
eb
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu odio eget eros vehicula pulvinar id sed turpis. Vivamus a velit quam, auctor euismod tortor.
<esi:include >
Lorem ipsum dolor sit amet, consectetur adipiscing elit
1 2
3
4
http://paris-web.local/index.php http://paris-web.local/index.php
http://paris-web.local/sidebar.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu odio eget eros vehicula pulvinar id sed turpis. Vivamus a velit quam, auctor euismod tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
![Page 39: Développeurs, cachez-moi ça ! (Paris Web 2011)](https://reader033.vdocuments.site/reader033/viewer/2022042714/5560c19cd8b42afe3b8b557c/html5/thumbnails/39.jpg)
« Happy Caching! »
Hugo Hamon (@hhamon) http://hugohamon.com
Questions ?