1. CS193H: High Performance Web Sites Lecture 12: Rule 8 – Make JavaScript and CSS External Steve Souders Google souders@cs.stanford.edu

2. Announcements 11/3 – Doug Crockford from Yahoo! will be guest lecturer talking about "Ajax Performance"

3. Browser Cache Experiment how much are resources cached? http://yuiblog.com/blog/2007/01/04/performance- research-part-2/ add transparent pixel image: with specific headers: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 22 Oct 2008 23:49:57 GMT requests from the browser will have one of these response status codes: 200 – the browser does not have the image in its cache 304 – the browser has the image in its cache, but needs to verify the last modified date

4. Desired metrics What percentage of users view with an empty cache? # unique users with at least one 200 response total # unique users What percentage of page views are done with an empty cache? total # of 200 responses # of 200 + # of 304 responses

5. Cache Results 40-60% of users/day visit with an empty cache 75-85% of page views/day are primed cache

6. Inline or external? var favNumber = 128; OR <script type='text/javascript' src='fav.js'> #favNumber { font-weight: bold; } OR <link rel='stylesheet' type='text/css' href='fav.css'>

7. doc size, # requests, cache inline html 20K css 10K js 20K png 10K html 50K external html 20K css 10K js 20K png 10K html 50K read from cache empty cacheprimed cache 3 requests 70K faster 5 requests 70K slower 1 request 50K slower 1 request 20K faster

8. Inline or external? inline: faster, but HTML document is bigger external: more HTTP requests, but cached variables page views per user (per session), external empty cache stats, external component re-use across pages, external external is typically better main exception: home pages best of both worlds post-onload download dynamic inlining

9. Post-Onload Download inline in front page download external files after onload window.onload = downloadComponents; function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; var head = document.getElementsByTagName('head')[0]; head.appendChild(elem);... } speeds up secondary pages

10. Dynamic Inlining start with post-onload download set cookie after components downloaded server-side: if cookie, use external else, do inline with post-onload download cookie expiration date is key speeds up initial and secondary pages

11. Module boundaries fewer files are better – combine JS across all pages into one script? all CSS into one stylesheet? too much combining – a single page downloads more than it needs compromise define a few page "types", build JS and CSS modules for each page type definite DHTML components, build JS and CSS modules for each component optimization – lazy-load modules for other pages from the landing page

12. Homework read Chapter 10 of HPWS 10/29 3:15pm – check five Web 100 Performance Profile sites 10/31 3:15pm – midterm 11/7 11:59pm – rules 4-10 applied to your "Improving a Top Site" class project

13. Questions What's a 200 status code? 304? If 40-60% of users come in with an empty cache once per day, why are only 15-25% of page views done with an empty cache? What's typically better, inlining or external? What are three variables to consider? Why are home pages the most likely candidates for inlining JS and CSS? What are two techniques for achieving the speed of inlining and the benefits of caching external files? How do they work? For dynamic inlining, what's the relationship between cookie expiration date and amount of inlining?