1<!doctype html> 2<html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 7 8 <meta name="keywords" content="performance"> 9 10 11 12 13 <meta name="description" content="Official YSlow Open Source Project Website. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages."> 14 15 16 17 18 <meta name="author" content="Marcel Duran"> 19 20 21 22 <title>YSlow - Official Open Source Project Website</title> 23 24 25 26 27 28 <link rel="stylesheet" href="../stylesheets/styles-13101021-min.css"> 29 30 <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh"> 31 </head> 32 <body> 33 <a id="fork" href="https://github.com/marcelduran/yslow">Fork me on GitHub</a> 34 <div class="wrapper"> 35 <div id="content"> 36 <header> 37 <h1><a href="/">YSlow FAQ</a></h1> 38 <p>YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites</p> 39 40 <ul id="install-btns"> 41 <li><a id="install" href="#"><strong>Install YSlow </strong><span id="browser"></span></a></li> 42 </ul> 43 44 <ul id="menu"> 45 46 <li><a href="/">Home</a></li> 47 48 <li><a href="https://github.com/marcelduran/yslow/">Source</a></li> 49 <li><a href="https://github.com/marcelduran/yslow/issues">Issues</a></li> 50 <li><a href="/faq/">FAQ</a></li> 51 <li><a href="/user-guide/">Help</a></li> 52 <li class="mobile"><a href="/mobile/">Mobile</a></li> 53 </ul> 54 </header> 55 <section> 56 <div class="adsense">
56<script>google_ad_client="ca-pub-4420779685366214";google_ad_slot=screen.width<468?"7124019480":"5683129086";google_ad_width=screen.width<468?234:468;google_ad_height=60;</script>
56<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
56 57</div> 58 <h2 id="questions">Questions</h2> 59 60<ul> 61 <li><a href="#faq_platforms">What platforms does YSlow run on?</a></li> 62 <li><a href="#faq_work">How does YSlow work?</a></li> 63 <li><a href="#faq_grading">How are the grades computed?</a></li> 64 <li><a href="#faq_ajax">Does YSlow handle DHTML? Ajax? Web 2.0?</a></li> 65 <li><a href="#faq_netpanel">How does YSlow integrate with Firebugâs Net Panel?</a></li> 66 <li><a href="#faq_accuracy">How accurate is YSlow at finding the components in the page? Why do YSlow and Firebugâs Net Panel lists differ?</a></li> 67 <li><a href="#faq_resptime">How is the response time calculated? Why is it sometimes missing?</a></li> 68 <li><a href="#faq_cdn">How do I add my CDN hostname to YSlow for Rule 2?</a></li> 69 <li><a href="#faq_frames">Does YSlow work with frames?</a></li> 70 <li><a href="#faq_expires">My component has an <code class="language-plaintext highlighter-rouge">Expires</code> or a <code class="language-plaintext highlighter-rouge">Cache-Control</code> header - why does YSlow say it doesnât?</a></li> 71 <li><a href="#faq_beaconformat">What YSlow results are included in the YSlow beacon?</a></li> 72 <li><a href="#faq_license">What are the license terms that apply to YSlow?</a></li> 73</ul> 74 75<p><a name="faq_platforms"></a></p> 76<h3 id="what-platforms-does-yslow-run-on">What platforms does YSlow run on?</h3> 77<p></a></p> 78 79<ul class="avail"> 80 <li><a class="firefox" href="https://addons.mozilla.org/en-US/firefox/addon/5369">Firefox</a> 81 <li><a class="chrome" href="https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh">Chrome</a> 82 <li><a class="mobile" href="../mobile/">Mobile/Bookmarklet</a> 83 <li><a class="opera" href="https://addons.opera.com/addons/extensions/details/yslow/">Opera</a> 84 <li><a class="safari" href="../safari/">Safari</a> 85 <li><a class="command" href="../command-line-har/">Command Line (HAR)</a> 86 <li><a class="phantomjs" href="../phantomjs/">PhantomJS</a> 87 <li><a class="nodejs" href="../node-server/">Node.js Server</a> 88 <li><a class="source" href="https://github.com/marcelduran/yslow">Source Code</a> 89</ul> 90 91[» View YSlow Ruleset Limitations](../ruleset-limitations/) across several browsers/platforms. 92 93<a name="faq_work"> 94### How does YSlow work? 95</a> 96YSlow works in three phases to generate its results. 97 981. YSlow crawls the DOM to find all the components (images, scripts, stylesheets, etc.) in the page. After crawling the DOM, YSlow loops through Firebug's Net Panel components and adds those to the list of components already found in the DOM 991. YSlow gets information about each component: size, whether it was gzipped, Expires header, etc. YSlow gets this information from Firebug's Net Panel if it's available. If the component's information is not available from Net Panel (for example, the component was read from cache or it had a 304 response) YSlow makes an XMLHttpRequest to fetch the component and track its headers and other necessary information. 1001. YSlow takes all this data about the page and generates a grade for each rule, which produces the overall grade. 101 102<a name="faq_grading"> 103### How are the grades computed? 104</a> 105The grades for individual rules are computed differently depending on the rule. For example, for Rule 1, three external scripts are allowed. For each script above that, four points are deducted from the grade. The code for grading each rule is found in rules.js. The overall grade is a weighted average of the individual grades for each rule, calculated in controller.js The rules are approximately in order of importance, most important first. The specific weights are in the ruleset objects in rules.js. 106 107Rule weights of YSlow V2 Ruleset. 108 109<table> 110<tr><th>Rule Name</th><th>Rule Id</th><th>Default weight</th></tr> 111<tr><td>Make fewer HTTP requests</td><td>ynumreq</td><td>8</td></tr> 112<tr><td>Use a CDN</td><td>ycdn</td><td>6</td></tr> 113<tr><td>Avoid empty src or href</td><td>yemptysrc</td><td>30</td></tr> 114<tr><td>Add an Expires header</td><td>yexpires</td><td>10</td></tr> 115<tr><td>Compress components</td><td>ycompress</td><td>8</td></tr> 116<tr><td>Put CSS at top</td><td>ycsstop</td><td>4</td></tr> 117<tr><td>Put Javascript at the bottom</td><td>yjsbottom</td><td>4</td></tr> 118<tr><td>Avoid CSS expression</td><td>yexpressions</td><td>3</td></tr> 119<tr><td>Make JS and CSS external</td><td>yexternal</td><td>4</td></tr> 120<tr><td>Reduce DNS lookups</td><td>ydns</td><td>3</td></tr> 121<tr><td>Minify JS and CSS</td><td>yminify</td><td>4</td></tr> 122<tr><td>Avoid redirects</td><td>yredirects</td><td>4</td></tr> 123<tr><td>Remove duplicate JS and CSS</td><td>ydupes</td><td>4</td></tr> 124<tr><td>Configure ETags</td><td>yetags</td><td>2</td></tr> 125<tr><td>Make Ajax cacheable</td><td>yxhr</td><td>4</td></tr> 126<tr><td>Use GET for AJAX requests</td><td>yxhrmethod</td><td>3</td></tr> 127<tr><td>Reduce the Number of DOM elements</td><td>ymindom</td><td>3</td></tr> 128<tr><td>No 404s</td><td>yno404</td><td>4</td></tr> 129<tr><td>Reduce Cookie Size</td><td>ymincookie</td><td>3</td></tr> 130<tr><td>Use Cookie-free Domains</td><td>ycookiefree</td><td>3</td></tr> 131<tr><td>Avoid filters</td><td>ynofilter</td><td>4</td></tr> 132<tr><td>Don't Scale Images in HTML</td><td>yimgnoscale</td><td>3</td></tr> 133<tr><td>Make favicon Small and Cacheable</td><td>yfavicon</td><td>2</td></tr> 134</table> 135 136[» View YSlow Ruleset Matrix](../ruleset-matrix/) for more detailed information. 137 138<a name="faq_ajax"> 139### Does YSlow handle DHTML? Ajax? Web 2.0? 140</a> 141Many web pages are moving to a Web 2.0 style where the components in the page and the page itself are built dynamically in the browser using JavaScript. The main function behind Ajax is `XMLHttpRequest`. Similar functionality can be achieved using [JSON](http://www.json.org/) and hidden iframes. YSlow analyzes all the components in the page, including components downloaded using these Web 2.0 techniques. If these dynamically loaded components are missing an `Expires` header or aren't gzipped they will be reported by YSlow, as expected. 142 143If your Web 2.0 page dynamically downloads components after the onload handler or uses Ajax, these components will be excluded from YSlow grading. To run YSlow on these components, you will need to set `extensions.yslow.excludeAfterOnload`, _disable_ the YSlow Autorun option, and launch YSlow manually after all these requests are done. 144 1451. Go to `about:config` in Firefox. You'll see the current list of preferences. 1461. Enter `extensions.yslow.excludeAfterOnload` in Filter:. 1471. If it does not exist, right-click in the window and choose New and Boolean to create a new Boolean preference. Enter `extensions.yslow.excludeAfterOnload` for the preference name. 1481. Choose `false` and click OK. 149 150<a name="faq_netpanel"> 151### How does YSlow integrate with Firebug's Net Panel? 152</a> 153YSlow uses the components' HTTP response headers to compute a score for each of the [performance rules](http://developer.yahoo.com/performance/rules.html). For example, YSlow uses the `Expires` header to evaluate **Rule 4**, and the `ETag` header for **Rule 14**. If necessary, YSlow gets this header information by re-requesting the components using `XMLHttpRequest`, but this takes time and CPU. 154 155The alternative that YSlow tries first is to get this header information from Firebug's Net Panel. Since YSlow is part of Firebug, it has access to Net Panel's data. Net Panel collects the HTTP header information from the original request for the component, so an additional `XMLHttpRequest` is not required. YSlow still has to do the `XMLHttpRequest` if Net Panel doesn't have a component (it was cached) or there was a `304 Not Modified` response status code. 156
157YSlow also uses Net Panel to "discover" components that are not part of the DOM (such as `XMLHttpRequests`) and examines those as well. 158 159<a name="faq_accuracy"> 160### How accurate is YSlow at finding the components in the page? Why do YSlow and some packet sniffers differ? 161</a> 162There are two main approaches for finding components in a web page: sniffing packets and crawling the DOM. Firebug's Net Panel, [ethereal](http://www.ethereal.net/), and [IBM Page Detailer](http://alphaworks.ibm.com/tech/pagedetailer) are packet sniffers. YSlow, [Instant Source](http://www.blazingtools.com/is.html), and the [AIS Accessibility Toolbar](http://www.webaim.org/resources/ais/) crawl the DOM. 163 164The problem with sniffing packets is sometimes components are read from the browser's disk cache. If the user forgets to clear their cache, the components shown by the packet sniffer don't reflect all the components in the page. Packet sniffers tell the user only about the components that generated network traffic for the current web page request. 165 166DOM crawlers, on the other hand, report all the components found in the DOM of the current page, whether they were read from disk or downloaded over the Internet. The problem with DOM crawlers is not all HTTP requests show up in the DOM. Specifically, beacons, XHR, and JSON requests aren't found in the DOM. 167 168YSlow is a combination of a DOM crawler and a packet sniffer. YSlow has a built-in DOM crawler that discovers components, but in addition YSlow also integrates with Net Panel to find additional components that are not part of the DOM, such as XMLHttpRequests and image beacons. The Stats view in YSlow gives a breakdown of empty cache versus primed cache component counts, so you can get an idea of the amount of network traffic that would occur under each scenario. 169 170Firebug's Net Panel generally lists only the components that generated network traffic, as expected of a packet sniffer. 171 172<a name="faq_resptime"> 173### How is the response time calculated? Why is it sometimes missing? 174</a> 175The response time shown by YSlow in the status bar is the number of milliseconds between the `onbeforeunload` and `onload` events, in other words, the time between when the previous page unloaded and the requested page was done loading. If you download components after the onload event, those aren't included. Sometimes the response time isn't shown. This typically happens if there was no previous page, such as the first page viewed after the browser starts or after a browser tab was just opened. This also happens if the page being viewed is not an HTML document, such as `about:blank`. 176 177<a name="faq_cdn"> 178### How do I add my CDN hostname to YSlow for Rule 2? 179</a> 180Rule 2 says to use a content delivery network (CDN). The score for this rule is computed by checking the hostname of each component against the list of known CDNs. Unfortunately, the list of "known CDNs" are the ones used by Yahoo!. Most likely these are not relevant to your web site, except for potentially `yui.yahooapis.com`. If you want an accurate score for your web site, you can add your CDN hostnames to YSlow for Firefox and Chrome only, using the <button>Add as CDN</button> button right next to each offender hostname under details. YSlow recalculates scores and grade automatically. 181 182The list of custom CDN hostnames can also be set on Firefox's preferences or Chrome's options. Here are the steps to follow: 183 184#### Firefox 1851. Go to `about:config` on location bar. You'll see the current list of preferences. 1861. Right-click in the window and choose New and String to create a new string preference. 1871. Enter `extensions.yslow.cdnHostnames` for the preference name. 1881. For the string value, enter the hostname of your CDN, for example, `mycdn.com`. Do not use quotes. If you have multiple CDN hostnames, separate them with commas. 189 190#### Chrome 1911. Right-click YSlow button on extension bar and choose **Options**. You'll see the current list of preferences. 1921. Look for `extensions.yslow.cdnHostnames` preference item. 1931. Enter/edit the hostname of your CDN, for example, `mycdn.com`. Do not use quotes. If you have multiple CDN hostnames, separate them with commas. 194 195Firefox and Chrome no longer need to be restarted in order to the list of custom CDNs to become effective. Just hit Run button to recalculate YSlow scores and grade. 196 197If you specify CDN hostnames in your preferences, they'll be shown under the details for Rule 2 in the Performance view. 198 199<a name="faq_frames"> 200### Does YSlow work with frames? 201</a> 202YSlow loops through all frames (recursively) searching for components. Frames are listed as `doc` components, while iframes show up as `iframe`. 203 204<a name="faq_expires"> 205### My component has an `Expires` or a `Cache-Control` header - why does YSlow say it doesn't? 206</a> 207The expiration time must be at least 48 hours in the future for components to avoid being flagged by [Rule 4](http://developer.yahoo.com/performance/rules.html#expires). 208 209<a name="faq_beaconformat"> 210### What YSlow results are included in the YSlow beacon 211</a> 212Please see the [YSlow Beacon section in YSlow documentation](../user-guide#yslow_beacon). 213 214<a name="faq_license"> 215### What are the license terms that apply to YSlow? 216</a> 217Most files comprising YSlow are licensed under the [New BSD License](https://raw.github.com/marcelduran/yslow/master/LICENSE.txt), with a couple of exceptions. YSlow includes [JSLint](http://www.jslint.com/) by Douglas Crockford, which is licensed under a derivative of [MIT License](http://en.wikipedia.org/wiki/MIT_License). YSlow also includes files from the [Yahoo! User Interface library](http://yuilibrary.com/), which are licensed under the [BSD license](http://yuilibrary.com/license/). 218</li></li></li></li></li></li></li></li></li></ul> 219 220 <div class="adsense">
220<script>google_ad_client="ca-pub-4420779685366214";google_ad_slot=screen.width<468?"1077485881":"5554713481";google_ad_width=screen.width<468?234:468;google_ad_height=screen.width<468?60:15;</script>
220<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
220 221</div> 222 </section> 223 </div> 224 <div id="sidebar"> 225 <a class="twitter-timeline" href="https://twitter.com/yslow" width="299" height="500" data-widget-id="279685301323042816">Tweets by @yslow</a>
226<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
226 227 228 <iframe id="fb" src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fgetyslow&width=299&colorscheme=light&show_faces=false&stream=true&header=false&height=395&border_color=%23d9d9d9' scrolling="no" frameborder="0"></iframe> 229 </div> 230 </div> 231 <footer> 232 <p>Project maintained by <a href="https://github.com/marcelduran">marcelduran</a></p> 233 <p>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></p> 234 <p id="translator"></p> 235 </footer> 236 237
237<script> 238 (function(e){var c,d=e.getElementById("install"),b=navigator.userAgent,g=function(h){return b.indexOf(h)>-1},f=function(i,h,j){e.getElementById("browser").innerHTML="for "+i;d.href=h;d.target=j?"_self":"_blank"};function a(h){h.preventDefault();chrome.webstore.install()}if(g(" Firefox/")&&!(" Fennec/")){f("Firefox","https://addons.mozilla.org/en-US/firefox/addon/5369")}else{if(g(" Chrome/")){f("Chrome","https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh");if(typeof chrome!=="undefined"&&chrome.webstore&&chrome.webstore.install&&chrome.app&&!chrome.app.isInstalled){d.addEventListener("click",a,false);c=e.querySelector(".avail .chrome");if(c){c.addEventListener("click",a,false)}}}else{if(g("Opera/")&&!g(" Mini/")){f("Opera","https://addons.opera.com/addons/extensions/details/yslow/")}else{if(g(" Safari/")&&!g(" Mobile")&&!g(" CrMo/")&&!g(" Silk/")&&!g(" Kindle")){f("Safari","/safari/",1)}else{f("Mobile/Bookmarklet","/mobile/",1)}}}}}(document)); 239 240 (function(d,a,b,c){b=d.getElementsByTagName(a)[0];c=d.createElement(a);_gaq=[["_setAccount","UA-30790475-1"],["_trackPageview"],["_trackPageLoadTime"]];c.src="//www.google-analytics.com/ga.js";setTimeout(function(){b.parentNode.insertBefore(c,b)},0)}(document,"script")); 241 (function(d,a){var c=d.createElement(a),b=d.getElementsByTagName(a)[0];window.translate=function(){new google.translate.TranslateElement({pageLanguage:"en",gaTrack:true,gaId:"UA-30790475-1",layout:google.translate.TranslateElement.InlineLayout.SIMPLE},"translator")};c.src="//translate.google.com/translate_a/element.js?cb=translate";c.async=1;setTimeout(function(){b.parentNode.insertBefore(c,b)},0)}(document,"script")); 242 </script>
242 243 </body> 244</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.