CS193H: High Performance Web Sites Lecture 12: Rule 8 – Make JavaScript and CSS External

1. CS193H:High Performance Web SitesLecture 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: <imgsrc="image/blank.gif" height=1 width=1/> 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

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? <script type='text/javascript'> var favNumber = 128; </script> OR <script type='text/javascript' src='fav.js'></script> <style> #favNumber { font-weight: bold; } </style> OR <link rel='stylesheet' type='text/css' href='fav.css'>

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

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?