Presentation is loading. Please wait.

Presentation is loading. Please wait.

High Performance Web Sites 14 rules for faster pages Steve Souders Chief Performance Yahoo!

Similar presentations

Presentation on theme: "High Performance Web Sites 14 rules for faster pages Steve Souders Chief Performance Yahoo!"— Presentation transcript:

1 High Performance Web Sites 14 rules for faster pages Steve Souders Chief Performance Yahoo!

2 Exceptional Performance quantify and improve the performance of all Yahoo! products worldwide center of expertise build tools, analyze data gather, research, and evangelize best practices

3 Scope performance breaks into two categories –response time –efficiency current focus is response time of web products coming up next: mobile, backend

4 The Importance of Frontend Performance Backend = 5% Frontend = 95% Even primed cache, frontend = 88%

5 Time Spent on the Frontend Empty CachePrimed Cache amazon.com82%86% aol.com94%86% cnn.com81%92% ebay.com98%92% google.com86%64% msn.com97%95% myspace.com96%86% wikipedia.org80%88% yahoo.com95%88% youtube.com97%95%

6 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. Greater potential for improvement Simpler Proven to work

7 Agenda Performance Research 14 Rules (plus more) Case Studies Evangelism Live Analysis

8 Performance Research

9 Browser Cache Experiment Add an image to the page: Expires: Thu, 15 Apr :00:00 GMT Last-Modified: Wed, 28 Sep :49:57 GMT # users with at least one 200 response total # unique users Percentage of users with an empty cache? Percentage of page views with an empty cache? # of 200 responses total # responses

10 Browser Cache Expt Results page views with empty cache 40-60% ~20% users with empty cache

11 Experiment Takeaways The empty cache user experience is more prevalent than you think! Optimize for both primed cache and empty cache experience.

12 Impact of Cookies on Response Time 80 ms delay dialup users Cookie SizeTimeDelta 0 bytes78 ms0 ms 500 bytes79 ms+1 ms 1000 bytes94 ms+16 ms 1500 bytes109 ms+31 ms 2000 bytes125 ms+47 ms 2500 bytes141 ms+63 ms 3000 bytes156 ms+78 ms keep sizes low

13 Experiment Takeaways eliminate unnecessary cookies keep cookie sizes low set cookies at appropriate domain level set Expires date appropriately –earlier date or none removes cookie sooner

14 Two in parallel Four in parallel Eight in parallel Parallel Downloads

15 Maximizing Parallel Downloads response time (seconds) aliases

16 Maximizing Parallel Downloads response time (seconds) aliases rule of thumb: use at least two but no more than four aliases

17 Experiment Takeaways consider the effects of CPU thrashing DNS lookup times vary across ISPs and geographic locations domain names may not be cached

18 14 Rules

19 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put stylesheets at the top 6.Move scripts to the bottom 7.Avoid CSS expressions 8.Make JS and CSS external 9.Reduce DNS lookups 10.Minify JS 11.Avoid redirects 12.Remove duplicate scripts 13.Configure ETags 14.Make AJAX cacheable

20 Rule 1: Make fewer HTTP requests CSS sprites combined scripts, combined stylesheets preloading image maps inline images

21 CSS Sprites size of combined image is less

22 Combined Scripts, Combined Stylesheets ScriptsStylesheets amazon.com31 aol.com181 cnn.com112 ebay.com72 msn.com91 myspace.com22 wikipedia.org31 yahoo.com41 youtube.com73 Average6.51.5

23 Combined Scripts, Combined Stylesheets combining six scripts into one eliminates five HTTP requests challenges: –develop as separate modules –number of possible combinations vs. loading more than needed –maximize browser cache one solution: –dynamically combine and cache

24 Preloading Download resources for the next page after the current page is done loading. Examples: – –

25 Image maps server-side client-side – preferred … drawbacks: –must be contiguous –defining area coordinates – tedious, errors

26 Inline Images data: URL scheme data:[ ][;base64], Red not supported in IE avoid increasing size of HTML pages: put inline images in cached stylesheets

27 Rule 2: Use a CDN distribute your static content before distributing your dynamic content amazon.comAkamai aol.comAkamai ebay.comAkamai, Mirror Image msn.comSAVVIS myspace.comAkamai, Limelight yahoo.comAkamai

28 Rule 2: Use a CDN Adding your CDN(s) to YSlow –Go to about:config –Right-click in the window and choose New and String to create a new string preference. –Enter extensions.firebug.yslow.cdnHostnames for the preference name. –For the string value, enter the hostname of your CDN, for example, –Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

29 Rule 3: Add an Expires header not just for images ImagesStylesheetsScripts % with Expires Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days

30 Rule 4: Gzip components you can affect users' download times 90%+ of browsers support compression

31 Gzip: not just for HTML HTMLScriptsStylesheets amazon.comx aol.comxsome ebay.comx msn.comxdeflate myspace.comxxx wikipedia.orgxxx yahoo.comxxx youtube.comxsome gzip scripts, stylesheets, XML, JSON (not images, PDF)

32 Gzip compresses more Gzip supported in more browsers Gzip vs. Deflate GzipDeflate Size SavingsSizeSavings Script3.3K1.1K67%1.1K66% Script39.7K14.5K64%16.6K58% Stylesheet1.0K0.4K56%0.5K52% Stylesheet14.1K3.7K73%4.7K67%

33 Gzip Configuration Apache 2.x: mod_deflate AddOutputFilterByType DEFLATE text/html text/css application/x-javascript HTTP request Accept-Encoding: gzip, deflate HTTP response Content-Encoding: gzip Vary: Accept-Encoding needed for proxies

34 Gzip Edge Cases <1% of browsers have problems with gzip –IE 5.5: –IE 6.0: –Netscape 3.x, 4.x consider adding Cache-Control: Private remove ETags (Rule 13) hard to diagnose; problem getting smaller

35 Rule 5: Put stylesheets at the top stylesheets block rendering in IE solution: put stylesheets in HEAD (per spec) avoids Flash of Unstyled Content use LINK

36 Slowest is Fastest CSS at the bottom: resources load faster, but nothing renders CSS at the top: resources take longer, but render at the top: same problems as bottom right choice

37 Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnames scripts block rendering of everything below them in the page script defer attribute is not a solution –blocks rendering and downloads in FF –slight blocking in IE

38 Rule 7: Avoid CSS expressions used to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? 600px : auto ); problem: expressions execute many times –mouse move, key press, resize, scroll, etc. alternatives: –one-time expressions –event handlers

39 One-Time Expressions expression overwrites itself P { background-color: expression(altBgcolor(this)); } function altBgcolor(elem) { = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF"; }

40 Event Handlers tie behavior to (fewer) specific events window.onresize = setMinWidth; function setMinWidth() { var aElements = document.getElementsByTagName("p"); for ( var i = 0; i < aElements.length; i++ ) { aElements[i].runtimeStyle.width = ( document.body.clientWidth<600 ? "600px" : "auto" ); } }

41 Rule 8: Make JS and CSS external inline: HTML document is bigger external: more HTTP requests, but cached variables –page views per user (per session) –empty vs. primed cache stats –component re-use external is typically better extra credit: post-onload download, dynamic inlining

42 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"; document.body.appendChild(elem);... } speeds up secondary pages

43 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 all pages

44 Rule 9: Reduce DNS lookups typically ms block parallel downloads OS and browser both have DNS caches

45 Adding DNS Lookups Increasing parallel downloads is worth an extra DNS lookup.

46 TTL (Time To Live) minute minute minutes hour minutes minutes hour hour minute minutes TTL – how long record can be cached browser settings override TTL

47 Browser DNS Cache IE –DnsCacheTimeout: 30 minutes –KeepAliveTimeout: 1 minute –ServerInfoTimeout: 2 minutes Firefox –network.dnsCacheExpiration: 1 minute –network.dnsCacheEntries: 20 –network.http.keep-alive.timeout: 5 minutes –Fasterfox: 1 hour, 512 entries, 30 seconds

48 Reducing DNS Lookups fewer hostnames – 2-4 keep-alive

49 minify inline scripts, too Rule 10: Minify JavaScript Minify External? Minify Inline?

50 Minify vs. Obfuscate OriginalJSMin SavingsDojo Savings (15%)48K (24%) (10%) (20%)24K (25%) (27%)24K (28%) (34%)16K (38%) (22%)10K (29%) Average85K17K (21%)21K (25%) minify – it's safer not much difference

51 Rule 11: Avoid redirects 3xx status codes – mostly 301 and 302 HTTP/ Moved Permanently Location: add Expires headers to cache redirects worst form of blocking

52 Redirects – secondary page – initial page – secondary page – initial page – secondary page – secondary page – secondary page

53 Avoid Redirects missing trailing slash – –use Alias or DirectorySlash mod_rewrite CNAMEs log referer – track internal links outbound links – harder –beacons – beware of race condition –XHR – bail at readyState 2

54 Rule 12: Remove duplicate scripts hurts performance –extra HTTP requests (IE only) –extra executions atypical? –2 of 10 top sites contain duplicate scripts team size, # of scripts

55 Script Insertion Functions "; } ?>

56 Rule 13: Configure ETags unique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct :54:08 GMT used in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct :54:08 GMT if ETag doesn't match, can't send 304 ETag format –Apache: inode-size-timestamp –IIS: Filetimestamp:ChangeNumber Use 'em or lose 'em –Apache: FileETag none –IIS:

57 Rule 14: Make AJAX cacheable XHR, JSON, iframe, dynamic scripts can still be cached (and minified, and gzipped) a personalized response should still be cacheable for that person

58 AJAX Example: Yahoo! Mail Beta address book XML request GET /yab/[...]&r= HTTP/1.1 Host: HTTP/ OK Date: Thu, 12 Apr :39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar :17:17 GMT Content-Type: text/xml; charset=utf-8 Content-Encoding: gzip address book changes infrequently –cache it; add last-modified-time in URL

59 Next Rules Split static content across multiple domains Reduce the size of cookies Host static content on a different domain Minify CSS Avoid IFrames

60 Case Studies

61 Case Study: move JS to onload remove bottom tabs avoid redirects image sprites host JS on CDN combine JS files 40-50%

62 What about performance and Web 2.0 apps? client-side CPU is more of an issue user expectations are higher these rules still apply, new rules will come out start off on the right foot

63 Case Study: User Workflow view inbox folder read messages (x3) compose message confirm send total time: Time 2.40 s 4.98 s 6.39 s 2.21 s 2.10 s s Time s 1.52 s 1.53 s 0.34 s 0s s Delta +420% -70% -76% -85% -100% -12% Mail Mail Classic

64 Evangelism

65 Book High Performance Web Sites Conferences Yahoo! F2E Summit Web 2.0 Expo Rich Web Experience Blogs YUI Blog: YDN Blog: Open Source YSlow OSCon Ajax Experience Blogher Future of Web Apps

66 YSlow performance lint tool scores web pages for each rule Firefox add-on integrated with Firebug open source license


68 Ten Top U.S Web Sites Page Weight Response Time YSlow Grade secD secF secF secC secA secF secD secC secA secD

69 Strong Correlation total page weight response time inverse YSlow grade correlation(resp time, page weight) = 0.94 correlation(resp time, inverse YSlow) = 0.76

70 Live Analysis

71 IBM Page Detailer packet sniffer Windows only IE, FF, any.exe c:\windows\wd_WS2s.ini Executable=(NETSCAPE.EXE),(NETSCP6.EXE),(firefox.exe) free trial, $300 license


73 Firebug web development evolved inspect and edit HTML tweak and visualize CSS debug and profile JavaScript monitor network activity (caveat) Firefox extension free

74 Takeaways focus on the frontend harvest the low-hanging fruit you do control user response times small investment up front keeps on giving LOFNO – be an advocate for your users

75 Steve Souders

76 CC Images Used "Need for Speed" by Amnemon: "Max speed 15kmh" by xxxtoff: "maybe" by Tal Bright: "takeout" by dotpolka: "how do they do that" by Fort Photo: "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: "Zipper Pocket" by jogales: "new briefcase" by dcJohn: "Told you it was me!" by Pug!: "Robert's Legion" by dancharvey: "thank you" by nj dodge:

Download ppt "High Performance Web Sites 14 rules for faster pages Steve Souders Chief Performance Yahoo!"

Similar presentations

Ads by Google