CS193H: High Performance Web Sites Lecture 17: Rule 14

1
CS193HHigh Performance Web SitesLecture 17
Rule 14 Make Ajax Cacheable

• Steve Souders
• Google
• souders_at_cs.stanford.edu

2
announcements

• 11/17 guest lecturer Robert Johnson
  (Facebook), "Fast Data at Massive Scale - lessons
  learned at Facebook"

3
Web 2.0, DHTML, Ajax
communities rich UI mashups
JS, CSS, DOM used to modify the page
Asynchronous JS and XML layer between data and UI
4
Async Instantaneous (?)

• try Google Maps on dialup
• passive Ajax requests
• in anticipation of user's needs
• e.g., download address book for webmail
• active Ajax requests
• in response to user action
• e.g., email search request
• user is waiting not instantaneous
• optimize these first

5
Ajax optimizations

• add an Expires header
• gzip components
• minify JavaScript
• avoid redirects
• configure ETags

most important
6
cache Ajax? Really?!

• but...
• it's dynamic
• yes, but for this user time browser it's
  always the same doesn't change for awhile
• it's data
• sometimes data doesn't change
• it's private
• no-store doesn't always work
• should you use https?

7
caching XHR vs. HTML

• XHR and HTML often contain dynamic, personalized
  data
• why can I cache XHR, but not HTML?
• the URL for HTML is often frozen
• bookmarks
• cross-references
• prettier
• memorized
• developers control what's in XHR URLs
• the XHR URL is contained inside the HTML
• the developer can modify the XHR URL with data to
  avoid a cache hit

8
ex Google Calendar

• http//www.google.com/calendar/contacts
• HTTP/1.x 200 OK
• Cache-Control no-cache, no-store, max-age0,
  must-revalidate
• Pragma no-cache
• Expires Fri, 01 Jan 1990 000000 GMT
• Content-Type text/javascript charsetUTF-8
• Content-Encoding gzip
• Date Mon, 10 Nov 2008 220057 GMT
• Content-Length 1562
• solution
• add modification timestamp to URL
• http//www.google.com/calendar/contacts_1226354800
  

9
Homework

• 11/12 315pm Web 100 Double Check
• look at your rows in Web 100 spreadsheet
• double-check your entries for any rows in red
• update incorrect entries
• enter "y" in "Double Checked" column

10
Questions

• Which performance rules so far apply to Ajax?
• What are passive Ajax requests? active?
• Why may developers view the cacheability of Ajax
  responses differently than other content?
• If I can cache XHRs, why can't I cache HTML that
  also contains dynamic data?