0
« Cachez-moi cette page ! »Atelier Pratique1h30Hugo Hamon (@hhamon)http://hugohamon.com
Qui suis-je ?
Au menu de cet atelier1.  Introduction2.  Avantages3.  Expiration (Expires & Cache-Control)4.  Validation (Etag & Last-Mod...
Introduction au Cache HTTP§  Mai 1996 – RFC1945 (HTTP 1.0)§  Mars 1999 – RFC2616 (HTTP 1.1)         http://www.ietf.org/...
Pourquoi cacher ?§    Ne pas générer la même réponse deux fois§    Diminuer la charge sur le serveur web§    Diminuer l...
Objectifs ?Etre le plus dynamique et leplus performant en sollicitantl’application le moinspossible.
Types de caches           Browser CacheBrowser                                          Gateway Cache                     ...
Quels sont les contenus cachables ?Seules les réponses à des requêtes GET etHEAD peuvent être cachées car elles nechangent...
Stratégies             Expiration
ExpirationDétermine la durée pendant laquelle uneréponse doit être considérée « fraîche » par lecache. Au delà de cette pé...
Expiration             Expires
Expires$expires = new DateTime(2011-10-15 11:00:00);   PHP$expires->setTimezone(new DateTimeZone(UTC));$date = $expires->f...
Expiration             Cache-Control
Cache-Control                                               PHPheader(HTTP/1.1 200 OK);header(Cache-Control: private, maxa...
Stratégies             Validation
ValidationDétermine si une ressource a changé depuisla dernière demande du client en marquantcette dernière à l’aide d’un ...
Validation         304 est votre ami !
Validation                  Etag             If-None-Match
Entity Tag// Generate the resource etag         PHP$etag = abcdef;header(HTTP/1.1 200 OK);header(Etag: . $etag);HTTP/1.1 2...
If-None-Match                                                     PHP// Generate the resource etag$etag = abcdef;if (isset...
If-None-Match                            HTTPGET /etag.php HTTP/1.1Host: www.paris-web.localIf-None-Match: abcdef         ...
Validation               Last-Modi ed             If-Modi ed-Since
Last-Modi ed// Determine the last modified date            PHP$date = Sat, 12 Aug 2011 10:00:00 GMT;header(HTTP/1.1 200 OK...
If-Modi ed-Since                                                    PHP// Determine the last modified date$date = Sat, 12 ...
If-Modi ed-Since                                                   HTTPGET /last-modified.php HTTP/1.1Host: www.paris-web....
Validation & ExpirationCombiner les deux stratégies reste possibleen sachant que l’expiration l’emported’abord sur la vali...
Cache côté serveur        Reverse Proxy Cache          Surrogate Cache          Gateway Caches
Reverse Proxy CacheUn reverse proxy cache siège devant leserveur web, intercepte les requêtesentrantes et retourne les rép...
Quelques caches intermédiaires connus…            Squid           Varnish      Mod_Cache (Apache)
Varnish-Cache.org
Con guration de Varnish# Make Varnish listen to port 80backend default {      .host = "127.0.0.1";      .port = "80";}# Ad...
Cacher des réponses dans Varnish            Cache-Control               Public           Shared MaxAge
Cacher des réponses dans Varnish                                                PHPheader(HTTP/1.1 200 OK);header(Cache-Co...
Cacher tout en restant dynamique         Edge Side Includes         http://www.w3.org/TR/esi-lang
Edge Side Includes  <esi:include src="/banner.html"/>
Edge Side Includes                     Non caché
Edge Side Includes                               3600 seconds                     <esi:include … />
Edge Side Includes                                                                                               http://pa...
« Happy Caching! »Questions ?Hugo Hamon (@hhamon)http://hugohamon.com
Upcoming SlideShare
Loading in...5
×

Développeurs, cachez-moi ça ! (Paris Web 2011)

2,644

Published on

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.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,644
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
35
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Développeurs, cachez-moi ça ! (Paris Web 2011)"

  1. 1. « Cachez-moi cette page ! »Atelier Pratique1h30Hugo Hamon (@hhamon)http://hugohamon.com
  2. 2. Qui suis-je ?
  3. 3. Au menu de cet atelier1.  Introduction2.  Avantages3.  Expiration (Expires & Cache-Control)4.  Validation (Etag & Last-Modi ed)5.  Reverse Proxy Cache6.  Edge Side Includes
  4. 4. 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/
  5. 5. 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
  6. 6. Objectifs ?Etre le plus dynamique et leplus performant en sollicitantl’application le moinspossible.
  7. 7. Types de caches Browser CacheBrowser Gateway Cache Proxy Cache Web Server Browser CacheBrowser Client-Side Caching Server-Side Caching
  8. 8. Quels sont les contenus cachables ?Seules les réponses à des requêtes GET etHEAD peuvent être cachées car elles nechangent pas l’état de la ressource.Les requêtes POST, PUT et DELETE ne sontpas cachables !
  9. 9. Stratégies Expiration
  10. 10. ExpirationDétermine la durée pendant laquelle uneréponse doit être considérée « fraîche » par lecache. Au delà de cette période, la ressourceest considérée comme « périmée ». Avantages : soulager la charge du serveur web
  11. 11. Expiration Expires
  12. 12. Expires$expires = new DateTime(2011-10-15 11:00:00); PHP$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 OKDate: Thu, 18 Aug 2011 18:19:10 GMTExpires: Sat, 15 Oct 2011 09:00:00 GMTContent-Type: text/html<html> ...</html> HTTP
  13. 13. Expiration Cache-Control
  14. 14. Cache-Control PHPheader(HTTP/1.1 200 OK);header(Cache-Control: private, maxage=60);HTTP/1.1 200 OKDate: Thu, 18 Aug 2011 18:29:30 GMTCache-Control: private, maxage=60Content-Type: text/html<html> ...</html> HTTP
  15. 15. Stratégies Validation
  16. 16. ValidationDétermine si une ressource a changé depuisla dernière demande du client en marquantcette dernière à l’aide d’un identi ant oud’un tampon. Avantages : diminuer le tra c sur le réseau
  17. 17. Validation 304 est votre ami !
  18. 18. Validation Etag If-None-Match
  19. 19. Entity Tag// Generate the resource etag PHP$etag = abcdef;header(HTTP/1.1 200 OK);header(Etag: . $etag);HTTP/1.1 200 OKDate: Thu, 18 Aug 2011 19:33:12 GMTEtag: abcdefContent-Type: text/html<html> ...</html> HTTP
  20. 20. If-None-Match PHP// 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;}
  21. 21. If-None-Match HTTPGET /etag.php HTTP/1.1Host: www.paris-web.localIf-None-Match: abcdef HTTPHTTP/1.1 304 Not Modified
  22. 22. Validation Last-Modi ed If-Modi ed-Since
  23. 23. Last-Modi ed// Determine the last modified date PHP$date = Sat, 12 Aug 2011 10:00:00 GMT;header(HTTP/1.1 200 OK);header(Last-Modified: . $date);HTTP/1.1 200 OKDate: Thu, 18 Aug 2011 20:07:55 GMTLast-Modified: Sat, 12 Aug 2011 10:00:00 GMTContent-Type: text/html<html> ...</html> HTTP
  24. 24. If-Modi ed-Since PHP// 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;}
  25. 25. If-Modi ed-Since HTTPGET /last-modified.php HTTP/1.1Host: www.paris-web.localIf-Modified-Since: Sat, 12 Aug 2011 10:00:00 GMT HTTPHTTP/1.1 304 Not Modified
  26. 26. Validation & ExpirationCombiner les deux stratégies reste possibleen sachant que l’expiration l’emported’abord sur la validation.
  27. 27. Cache côté serveur Reverse Proxy Cache Surrogate Cache Gateway Caches
  28. 28. Reverse Proxy CacheUn reverse proxy cache siège devant leserveur web, intercepte les requêtesentrantes et retourne les réponses fraîchesde son cache.
  29. 29. Quelques caches intermédiaires connus… Squid Varnish Mod_Cache (Apache)
  30. 30. Varnish-Cache.org
  31. 31. Con guration de Varnish# Make Varnish listen to port 80backend default { .host = "127.0.0.1"; .port = "80";}# Add ESI support header to all incoming requestssub vcl_recv { set req.http.Surrogate-Capability = "abc=ESI/1.0";}# Remove Surrogate-Control header from response headers# And parse the response for ESIsub vcl_fetch { if (beresp.http.Surrogate-Control ~ "ESI/1.0") { unset beresp.http.Surrogate-Control; set beresp.do_esi = true; }}
  32. 32. Cacher des réponses dans Varnish Cache-Control Public Shared MaxAge
  33. 33. Cacher des réponses dans Varnish PHPheader(HTTP/1.1 200 OK);header(Cache-Control: public, s-maxage=60);HTTP/1.1 200 OKDate: Thu, 18 Aug 2011 20:54:08 GMTCache-Control: public, s-maxage=60Content-Type: text/html<html> ...</html> HTTP
  34. 34. Cacher tout en restant dynamique Edge Side Includes http://www.w3.org/TR/esi-lang
  35. 35. Edge Side Includes <esi:include src="/banner.html"/>
  36. 36. Edge Side Includes Non caché
  37. 37. Edge Side Includes 3600 seconds <esi:include … />
  38. 38. Edge Side Includes http://paris-web.local/index.php http://paris-web.local/index.php 1 2 Lorem ipsum dolor sit Reverse Proxy Cache amet, consectetur <esi:include > adipiscing elit. Praesent eu Serveur Web odio eget eros vehicula pulvinar id sed turpis.Client Vivamus a velit quam, Lorem ipsum dolor sit Lorem ipsum auctor euismod tortor. amet, consectetur dolor sit amet, adipiscing elit. Praesent eu consectetur odio eget eros vehicula adipiscing elit http://paris-web.local/sidebar.html pulvinar id sed turpis. 3 Vivamus a velit quam, auctor euismod tortor. Lorem ipsum dolor sit amet, consectetur 4 adipiscing elit
  39. 39. « Happy Caching! »Questions ?Hugo Hamon (@hhamon)http://hugohamon.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×