The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective. But where should you start?
As a first step to implementing geographically dispersed content, don't attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.
Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule, as explained in The Importance of Front-End Performance. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse your static content. This not only achieves a bigger reduction in response times, but it's easier thanks to content delivery networks.
A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.
Some large Internet companies own their own CDN, but it's cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Steve Souders
[Steve Souders is Yahoo!'s Chief Performance Yahoo!. This is one in a series of Best Practices for Speeding Up Your Web Site. This article is based on Steve's book High Performance Web Sites, published by O'Reilly.]
60 Comments
Sounds good. You guys are hosting my site. What should I do about these CDN suggestions? TIA.
We use a CDN but it reports we do not only because we cname the akamai url to a match.com url. This is a little misleading.
I would suggest allowing users to disable this rule. for a large percentage of sites a CDN won’t be an option due to cost constraints, so this just adds noise to the results.
You can add your own CDN hostnames to YSlow as described in the FAQ. In a future release we’ll have a way for these CDN preferences to be fed back into the main YSlow source code. Using Yahoo! web hosting doesn’t make it a CDN. For smaller sites that can’t afford a for-profit CDN service, you can try free services such as Globule, CoDeeN, and CoralCDN.
Are you guys getting a kickback from Akamai or what? You give Google’s front page a ‘C’ purely on the basis of not using a CDN. How stupid is that? My own site which is a single 11KB HTML file also gets a ‘B’, purely based on not using a CDN. This rule is amazingly stupid.
FAQ does explain how to add your hostname to the CDN list, so let’s move on and pay attention to all the other good suggestions this tool is producing :)
Wouldn’t it make more sense to talk about http pipelining here? What use is a CDN, when your hitting a single hostname?
Mileage varies on CDNs. My company tried a CDN (one of the ones mentioned in the article) for a while and we found no measurable performance difference, from multiple client networks, between serving our own static files and serving them from the CDN. And, we had multiple technical issues with the CDN, where certain customers would not be able to see our images, or something would get “stuck” in the CDN cache even though it had clearly expired and needed to be refreshed from our servers. The whole experience left a pretty bad taste and the bottom line was it didn’t seem to increase performance at all.
On high-traffic sites, there’s clearly a benefit to moving static files OFF of application web servers and onto servers that are optimized just for serving that static content.
And I do suspect that CDNs provide benefits for sites with truly global audiences– latency on transcontinental internet connections can be kind of high. If this is your situation, make sure your CDN has adequate nodes in the countries where your audience lives.
Amazon’s S3 is worth a mention here: It’s distributed, pay-as-you-go, and very cheap. It costs me about $3/mo to host >130,000 PNG images (including traffic costs), and it’s definitely helped response times.
We’re using the Cachefly CDN (http://www.cachefly.com), which starts at $15 per month and we’re very happy with it. Before getting our Cachefly ‘Plus’ plan ($99/month) we were paying $1000+ per month to one of the bigger CDN vendors. Performance is similar. If you want to customize a lot of settings I can recommend Akamai and Mirror Image.
I agree totally that there should be the option to disable this rule… Yslow is being used by myself and my development team at the moment, working on building a large ecommerce site, but when you are testing pages from a local server, or even a virtual machine, you are not going to be running a CDN. Firebug’s primary use is during the development cycle of a project, and not many people would roll out their project across a CDN until it is finished. Having the rule in there, for us, makes for misleading results, as it is an automatic F for the pages we are coding.
Thanks for all the great feedback.
David Mcanulty: HTTP pipelining is discussed in the book. Unfortunately, the lack of support in IE and off-by-default in FF preclude it from being a viable factor.
David Eglin: That’s an interesting problem. Development at Yahoo! is similar – for some components moving them to the CDN happens later in the process. But that’s also a common problem: people forget to move components to the CDN. Since the page works fine, they overlook that last step of the push process. I would suggest leaving the rule on. It helps remind folks to complete the push to CDN.
I’ve been looking into the results of YSlow on a project I’m currently working on, in which is have seem to have some trouble getting the CDN hosts configured properly. The site we’re talking about is for sure using a CDN Network (Savvis), but for some reason YSlow seems to ignore the hostname I configured for that CDN. I have been trying to enter the CDN hostname in various way, but still then YSlow keeps complaining about all of the files not being on a CDN network. Could anyone tell me in what way YSlow tries to check if files are being retrieved from a CDN network or not? Or try to help me out on how to configure the CDN hostname properly?
A way to get around the push problem is to replace references to assets on the fly. This can be easily accomplished in Apache’s httpd 2.0+ using the modextfilter module and sed. Set up a regular expression to filter the web server output and replace references to assets to those that need to fetched from the CDN. Using this method there was a minimal impact on the server load on a dynamic site doing 40-60 hits/s spread across 3 nodes and the process was completely transparent to developers. Additionally, when we needed to take the CDN off the site. It took less than a minute to comment out the line enabling the filter in httpd.conf and restarting the servers. With a load balanced site you won’t even have downtime.
One thing to note is that you still have to judge the results of YSlow intelligently based on the traffic characteristics of your own site. When in doubt of YSlow, use curl to verify some of the results.
I love YSlow and Steve’s book, but I find it funny that akamai.com scores an F for the CDN rule.
Yes, we pre-load YSlow with just a few well known CDNs (Yahoo’s, S3). I’ll add akamai.com. A future feature will be a way for people to “nominate” their CDN so that it’s automatically included in YSlow (as opposed to having to set it in your FF about:config preferences).
We decided to use Amazon S3 as our CDN, which I know is not a tru CDN, but at least helps with storage, bandwidth, and parallel downloading. The problem is that now my YSlow score is awful. Mainly because S3 cannot GZIP items.
At the moment we have all js, css, and images on S3. Is it recommended to only host certain files (images, media) and let the server handle the js and css?
I also wanted to know if I can just use alias domains to handle the parallel download issue for JS and CSS, but keep them on the same server.
Thanks.
You should host all your static content (including scripts and stylesheets) on your CDN. Ideally S3 would gzip your scripts and stylesheets. I expect they’ll add that soon.
Until then, it is possible to set headers when you store an object (resource) on S3 (see http://docs.amazonwebservices.com/AmazonS3/2006-03-01/gsg/writing-an-object.html). This could be used to achieve your goal, but you’ll have to do the work. You could, for example, push a gzipped and non-gzipped version of your file to S3 (eg, module1-gzip.js and module1.js). Make sure to add the Content-Encoding: gzip header per the documentation in the previous URL. Then, when generating your HTML page serve the appropriate SCRIPT SRC value based on the Accept-Encoding request header.
I would like to second the comments several others made in reference to optioning this feature in YSlow evaluations, which otherwise I find to be interesting and often very informative and useful in performance tuning. The option to deploy your site via a CDN is not pertinent to many, many sites, particularly smaller ones obviously, and it should be permitted to be disabled so as not to skew the overall evaluation.
Why not option each of the features so as to enable customized performance results – compilation, analysis and resultant tuning efforts.
You might want to check out Panther Express (http://www.pantherexpress.net/). It’s very cost effective.
Umm. We use Akamai but YSlow is not seeing it. I’ll look at the FAQ. Great article in Baseline Steve.
Has anyone tried CacheFly (http://www.cachefly.com)? I’ve had a great experience with them so far.
SECURITY! SECURITY! SECURITY!
I am surprised that I see no mention of possible security concerns associated with use of CDNs. Clearly, I recognize the performance gains possible from CDNs (especially when page weight is high due a richer user experience) but I think there are possible security concerns that need to be addressed here as well.
My intent is not to be alarmist but simply foster a dialogue so these may be addressed. I am open to sound arguments that address these concerns but let’s at least recognize them as a possible concern and proactively address them
images and possibly css files are likely candidates for CDN but Isn’t it fair to say that risks vary across all possible static files that could be offloaded to a CDN. What about js files? Doesn’t anyone else see the possible security concerns associated with offloading js files to another network? I mean if the CDN is compromised from either an internal attack at the CDN or external attack, then the entire DOM on the respective site is potentially exposed. I can think of a few very clever attacks on a site once the attacker has compromised the integrity of the js files.
Is the position that CDN is useful to everyone unless you are a bank or have other personal user data hosted on your site?
Just got agree with everyone already mentioning how this value is tainting an otherwise great tool. Maybe rather than nixing it there could be a site “profile” selection (based in traffic, bandwith, etc..) that determines whether it belongs in the grade. Surely for most sites it should not factor.
From the beginning I knew the CDN rule would be hard to apply to all web sites. That’s why I provided the option to add your own CDN (see http://developer.yahoo.com/yslow/faq.html#faq_cdn ).
Although this preference setting exists, it’s still problematic. Users have to manually add their CDNs. Two people won’t necessarily be comparing apples to apples if they compare their YSlow grades without identical CDN preference settings. Unless you know the CDNs used by other sites (not your own), you don’t necessarily know if the YSlow score is accurate. etc.
My plan has been to allow people to “nominate” a CDN to a backend YSlow server that would validate it was a CDN (primarily that the hostname had geographically dispersed locations). Whenever YSlow started up it would ask this backend server for the list of validated CDN hostnames and apply that to Rule 2. I almost started working on that this week, but now I don’t think it’ll scale well (the JSON response would be huge).
Another idea would be to do it in realtime: When YSlow runs it asks a backend YSlow service whether or not the hostnames are CDNs. Results could be cached locally in the browser for better performance. Although I say “realtime” this would actually cause the score for Rule 2 to be delayed so the overall score would be delayed or updated. This realtime check could also be made an option, so it would only performed when the user chooses.
Finally, I want to mention that another high priority feature is customized grades: Users will be able to alter the entire scoring algorithm for YSlow – giving rules different weights and thresholds. Users who wanted to skip the CDN rule could give it a weight of zero.
Thanks for all the feedback.
-Steve Soudes creator of YSlow
There are many other smaller CDN companies out there offering very competitive rates. Nice post – thumbs up!
I tried using CacheFly for a small image, but then the image (which was previously cached when not on a CND) isn’t cached by the browser. Can this be a problem? Is there a solution?
There are quite a few low cost and budget CDN providers. While it’s great it also saves some $$ in bandwidth fees not only lowers your front-end server load.
http://www.valuecdn.com/
You can do load balancing based on IP Deny http://www.ipdeny.com/ IP address blocks in Cidr format.
Hi, when you use Yslow to test your sites locally, you can add your own CDN’s as many virtual domains you have… but don’t leave spaces between this virtual domains names! :D
Want an “A” rating for CDNs? Don’t want to wait for Steve’s next upgrade to YSlow?
“Grade on a curve!”
In about:config add the following preference as an INTEGER with a VALUE of “0″ (zero):
extensions.firebug.yslow.pointsNotCDN
You’ll still get the “Use a CDN” and all of the associated noise, but it will grade “A” and appropriately bump your score. Enjoy. Now, go read my blog; I’ll be posting more details on hacking the tool to ignore CDN all together, similiar how “Rule 8″ currently works.
I have been a web developer for 10+ years and this is the first that I am hearing about “CDN”. I can’t believe that this idea is being sold and to be honest this seems more of a money making ploy than anything else and the reason that I say that is because of one; Broadband is more rapid than it’s ever been, and two; If you design your web site with maximum efficiency then you should not need to bother with a “CDN”. This is just my opinion and I would love to hear what others have to say.
Nixit….do you really think the CDN industry would exist and continue to expand if this was nothing more than a “money making ploy”.
I don’t doubt your expertise as a web developer but the reason CDN’s exist is not because of poor web page construction, it is because of the network conditions that exist between the source of the content and the end user. Latency has a significant impact to the protocols that are used in the TCP/IP stack and high latency results in slow page downloads or video stream delivery. While you are correct that the last mile to the end user is certainly better than it was by having broadband connections instead of dial-up, that alone doesn’t overcome issues of latency and packet loss that directly affect throughput rates. If you can deliver the web or video content from a source closer to the end user from a CDN provider, you can reduce the impact of latency has on TCP throughput and deliver the content much faster and more reliably. This is the main value that CDN’s provide. But they also reduce the amount of capital investment needed to deliver content to a wide audience. Rather than have to continue to purchase servers and bandwidth for the origin website, enterprises can utilize the CDN infrastructure that is already built out and can scale as web/video delivery needs increase.
The cost of a CDN for the majority of websites out there would be counterproductive. I think users should be able to ignore this rule.
Another vote for letting users ignore this rule. I develop web GUIs for embedded devices, none of which will ever use a CDN. There are many, many standalone webserver applications in the world and the number is growing. CDNs are irrelevant to most of these applications. Please let me switch it off so I can point at a nicer letter grade and make my boss happy.
A great CDN, http://www.simpleCDN.com (I am not affiliated). Affordable and easy to setup.
Hi guys there is a new CDN provider from india they are giving CDN in low cost.They are also giving some other features such as Reliability, Automatic Scalability etc.. just check it out http://www.angelsvista.com/index.php
“Just got agree with everyone already mentioning how this value is tainting an otherwise great tool. Maybe rather than nixing it there could be a site “profile” selection (based in traffic, bandwith, etc..) that determines whether it belongs in the grade. Surely for most sites it should not factor.”
Yeah, something seriously needs to be done about this value for small, low-traffic sites.
Hi. You probably could use Google’s new App Engine as a free CDN: http://www.coderjournal.com/tags/google-app-engine/ or http://der-entreprenerd.blogspot.com/2008/11/faster-websites-using-your-free-google.html
It’s also probably a good idea to use google ajax library service: they will serve some popular ajax libraries (e.g. jQuery, jQuery UI, Prototype, script.aculo.us, MooTools and Dojo). See http://code.google.com/apis/ajaxlibs/
Are you guys going to roll *.cloudfront.net into the plugin as a CDN in a future version? It’s a drag to have to enter it in the preferences for each Cloudfront host.
What I’m still unconvineced of is whether using a CDN is worth it if you only target a given country (such as a site here in the UK targetting only UK customers) when you’re site and hence images are hosted at a decent datacentre based in the only “target” country already.
Otherwise – great tool! :)
Interesting. I just ran firebug on this page and it came up with an “F” on step 2, CDN. Kind of ironic.
This page also gets “F”s on steps 1 (HTTP requests) and 3 (Expires header) and a “D” on 9 (DNS lookups).
hallo,
I am trying to get a green light on the CDN test. To do so, I created a subdomain and updated my about:config to add it to my extensions.yslow.cdnHostnames. Then I ran a check to get the list of components that are not on CDN and check if YSlow reckognized my config change: it did. Finally I changed the site header to load the css from the CDN subdomain.
Now the problem is that YSlow still report about the CDN problem even for files that are coming from the CDN itself.
Am I missing some info? Thank you for your help!
t’s stupid to try to rate compliance to this rule by a script. As pointed out many times on this comments page, Yahoo itself and the page at mozilla.org for this add-on both fail this standard (https://addons.mozilla.org/en-US/firefox/addon/5369). I mean come on, what did you even test it on?
Do you consider Rackspace to be a CDN? They do, but wonder what your thoughts are.
Thanks
I don’t agree with this rule, because it requires that you pay for a CDN. I’m able to match every ruleset except this one, because I don’t have the funds for a CDN – it’s a personal website, and I think YSlow shouldn’t exclude such sites (as they are extremely common) from acing the test. I’ve never had any problems with CDNs, and I think most sites could do without one. And if they can’t, they don’t need YSlow to tell them. I imagine more people are using YSlow on their personal website, and are being recommended to get a CDN, when a single server is probably much more than capable of handling their small website. So, I just don’t see the point in this rule. However, keep up the good work, whoever is in charge of these, because ETags are some of the best things I’ve discovered in terms of website optimization – and thanks to YSlow for that. :)
I love the YSlow plugin.
Switching to a CDN can be a pain for a lot of sites that have a lot of IT projects. Switching URLs can be a real barrier to getting images/javascript/css onto a CDN as advised by YSlow.
For sites running WordPress, there are plugins for WordPress CDN. These plugins make it so that rewriting the URLs to a CDN that does origin pull is easy.
One thing that I’d love to see is YSlow making it easier and more intuitive to add lists of URLs which are on a CDN – rather than having to dig through the settings in firefox.
Regardless, keep up the great work – and keep working towards a faster web.
–John
Here’s an example of how I use amazon cloudfront CDN. http://bowlersway.com/bowlersway-amazonaws-cdn-technology.php
You can also see the y-slow grade and other interesting stats.
I agree with many people here about this rule. But it does certainly work. Specially for high trafficked sites – but if you’re going to add this rule in your addon you should include with it a more complete list of CDNs, like amazon s3 and rackspace. These should be included in the next release.
Hi, About the CDN thing, i followed the insctruction on how to add our CDN in the about:config of firefox but it had not change our Yslow grade for the CDN catergory rather it just indicated the CDN name on the bottom part of the report. Wondering what had gone wrong
@Aldrina I think you need to restart Firefox as well
It seems that ySlow! doesn’t accept that Google’s CDN for AJAX frameworks (eg http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) isn’t accepted as a CDN. Any idea why?
We are using AKAMAI CDN by CNAME entry. I do not get how YSlow got such information ? As per my understanding YSLOW or any such tool never get any information. When some one use CNAME (s)he can configure different rules in CDN network to serve cached contents or having trip to original server.
Just think about some protocol which shared by all CDN to specify some value in response header.
While a CDN has some applicability for larger files, I converted about half of our small images to be served by 2 different ip numbers – in the form
http://23.111.123.456/image.gif
We serve up to 30 small images on a few pages (images for advertisers) and looked to speed up the page.
Serving the images from two different ips (on the same dedicated server) speeds up the parallel downloading of the images and eliminates the overhead of the dsn lookup.
With the parallel downloads and no dns look ups, I was able to trim the page from 2.5 seconds or so to 1.5 seconds on the largest pages.
I am using Amazon Cloudfront for CDN integration. I have created a bucket and uploaded all the static images, js,and css files over there. Also, I have replaced all the image urls on my site to that with bucket url. Still i am not been able to get my CDN grade down.
I am using ubuntu instead of windows OS.
Can anybody guide me regarding how to integrate CDN with Yslow on ubuntu and how to add expiration headers for the images getting from S3 bucket?
Thanks in advance…
YSlow gives yahoo.com a B. WTH. Can you implement some of this stuff yourself before preaching to others….not that your suggestions aren’t great.
CDN is not a good example for the first steps of performance optimization. Before implementing CDN you should really consider and analyse the distribution of your traffic – does it really require you to distribute content?
Still client optimization is really one of the most important tasks in website optimization process.
I think that is is just a good habbit to do everything to make your website faster. Even you can hardly meeasure it, make it your own habbit to keep on doing so. I am just a beginner with yslow, but it gave me good hints to keep me working at my project.
One thing, i have registered googles api as a cdn, but yslow doe not recogize it, it keeps saying that i dont use cdn??
Using these CDN hostnames from your preferences: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
and it still comes up with:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js
i have tried different settings, closed and opened firefox again, but still the same message:(
After hours searching i found the solution, dont use http in the string field. Only the domainname like ajax.googleapis.com will do the job.
What are the scoring rules for this? Do ALL components need to be on a CDN to get a 'A'? How many am I allowed to score a 'B'?
Does anyone know??
I have moved 3/4 of my components (8 left) and still getting a 'F'.