1. CS193H: High Performance Web Sites Lecture 22: Vol 2 – Optimize Images, Use Iframes Sparingly, Flush the Document Early Steve Souders Google souders@cs.stanford.edu

2. announcements Final exam locations: Dec 9, 12:15-3:15 – Gates B03 Dec 12, 12:15-3:15 – Gates B01

3. image optimization – 7 mistakes Stoyan Stefanov (Yahoo!) http://www.phpied.com/image-optimization-7-mistakes/ 1.choose PNG over GIF (lossless) 2.crush your PNGs (lossless) 3.strip needless JPEG metadata (lossless) 4.make all PNGs palette PNGs 5.avoid AlphaImageLoader, try PNG8 or at least _filter 6.crush generated images (lossless) 7.use CSS sprites; stay within the palette number of colors (use PNG8)

4. smushit.com Firefox add-on

5. image optimization savings imagesSmushit aol.com 296K11K ebay.com 145K12K facebook.com 312K18K google.com/search 12K0K search.live.com/results 24K1K msn.com 123K2K myspace.com 583K3K en.wikipedia.org/wiki 789K24K yahoo.com 107K5K youtube.com 196K35K March 2007 November 2008

6. image tools PNG crushers pngcrush – http://pmt.sourceforge.net/pngcrush/ pngrewrite – http://www.pobox.com/~jason1/pngrewrite/ OptiPNG – http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ PNGOut – http://advsys.net/ken/utils.htm Truecolor-to-PNG8 pngquant – http://www.libpng.org/pub/png/apps/pngquant.html pngnq – http://pngnq.sourceforge.net/ JPEG jpegtran – http://jpegclub.org/ also: ImageMagick, jpegoptim CSS Sprites Tool: CSS Sprites Generator – http://spritegen.website-performance.org/ CSS Sprites generator – http://csssprites.com

7. iframes good for: embedding content from another web site sandboxing 3 rd party JavaScript asynchronous loading of external scripts most expensive DOM element IE7Firefox 2 http://stevesouders.com/hpws/iframes-none.php290 ms250 ms http://stevesouders.com/hpws/iframes-10.php410 ms437 ms http://stevesouders.com/hpws/iframes-100.php766 ms4300 ms

8. iframes block parent's onload blocked until iframe finishes http://stevesouders.com/tests/iframes1.php instead, set SRC dynamically: http://stevesouders.com/tests/iframes2.php function setIframeSrc() { var iframe1 = document.getElementById('iframe1'); iframe1.src = "iframe-normal.php"; } setTimeout("setIframeSrc()", 1); something better than about:blank ?

9. flush the document early browser parses HTML document as it arrives by default, servers send response when the page is completed on the backend but, you can explicitly cause the server to "flush" the output buffer do this after to get resources downloading earlier

10. Homework 12/1 11:59pm – Assignment #6 - Improving a Top Site rules 11-14 Vol 2: Split the Initial Payload Load Scripts Without Blocking Don't Scatter Inline Scripts Shard Dominant Domains Optimize Images

11. Questions What are seven image optimization techniques? What are some pros and cons of using iframes? What does it mean to "flush" the document? Why does this help performance?