Have you ever stopped to wonder how some of the biggest sports websites compare when it comes to speed and modern optimizations? A lot of todays websites are using cutting edge features and embracing new technology, whether it be modern Javascript frameworks or a mesh of flash and embedded videos. While it’s great to use these things to make each site appealing to visitors, it can also lead to increased load and rendering time.
For this post I will be analyzing top sports websites using Firefox’s YSlow 1.5 and PageSpeed 1.5.0.3 extensions to figure out where each site stands in terms of performance to the end user. Each site’s main homepage is loaded without being logged in and the browser cache will be empty. For optimum load time for an end user, I will be using the Google Chrome browser Development builds because of it’s ability to load websites faster than other web browsers.
In terms of what I am looking for to make sure a website is properly optimized are things that every web developer should be looking at. I am checking each website for gzip compression with javascript, css, and html. I am checking each website for the caching of images, css, and javascript. I am also checking to see if it uses ETags, the percentage of files cached, and the length of time each file stays cached. I am also looking at how many HTTP requests per page load, end user page load time via Chrome, and size of the page upon first load / cached loads.
I will break up the listing of websites into two categories.
The first category of websites are the top tier major media outlet sites including: ESPN, CBSSports, Sports Illustrated, and FoxSports.
The second category of websites I will include at fantasy sports and social media websites including: Rotoworld, Fanball, Rotowire, Kffl, Yardbarker,Bleacherreport, and FantasySP . (This will be in its own follow up post)
1.ESPN
As you may remember, ESPN is among the few websites that has undergone a complete overhaul within about a year. This should result in better optimizations than the other sites. It may also be the most visually appealing website in the entire bunch.
| Page Size | Cached Size | HTTP Requests | Server | YSlow | PageSpeed | Chrome Load Time |
| 473.7k | 61.0k | 54 / 13 | Microsoft-IIS/6. | 61 | 74 | 4.54 |
The overall size of the page is quite good at under 500k and the HTTP requests number is great at just over 50. The lack of HTTP requests is a remarkable number considering what is going on with the page. The fewer the requests, the faster the page load. This is a great benchmark that the other sites in the category should strive to match or come close to. In terms of website optimizations, ESPN hits just about every optimization that’s possible for the website. They support gzip compression on javascript, css, and html. Their javascript and css is minified. Their images, css, and images are all cached with the majority in a future date.
Overall ESPN has done a great job optimizing their website. While it’s final load time says 4.54 seconds, its readable much sooner than that. The speed at which it loads is phenomenal considering that the site is rich in video.
2. CBSSports
CBSSports has had their classic blue tinted website for years now. The question is if they have been able to update things behind the scenes to take advantage of modern browser optimizations.
| Page Size | Cached Size | HTTP Requests | Server | YSlow | PageSpeed | Chrome Load Time |
| 335.8k | 174.5k | 96 / 89 | Apache | 56 | 74 | 5.697 |
Page size for an initial load is an astoundingly small 335.8k, which is even better than ESPN. Unfortunately this does not carry over to a primed cache, and the size is a little high at 174.5k with 89 requests. CBSSports utilizes GZip compression for HTML, CSS, and Javascript. They also minify CSS and Javascript, but they could have combined the Javascript into one file instead of several smaller files to reduce HTTP requests. They also have quite a few images to load on every page load which accounts for an increased HTTP request count. Some images have a cache time of today, while others have a cache time of 24hrs. I would suggest changing all cached times to a date further into the future to reduce HTTP requests and decrease the size of a cached page load.
Overall I give CBSSports a very good rating, but could been great with a few minor tweaks.
3. FoxSports
Foxsports has a slightly different layout than the previous two sites because it has a much bigger flash app to showcase today’s top stories.
- foxsports
| Page Size | Cached Size | HTTP Requests | Server | YSlow | PageSpeed | Chrome Load Time |
| 906.8k | 241.8k | 91 / 89 | Apache-Coyote/1.1 | 57 | 65 | 5.72 |
As you can see, the page size is the biggest yet at 906.8k, and the cached size is nearly 250k. Any time page size is close to 1,000k for a news oriented site I consider that a bad job in optimizations unless they are offering a media rich experience that is far better than the other sites. As we can see from the YSlow! chart, the majority of page size is taken up by CSS images, followed by regular images. Weird huh?
It turns out that the majority of CSS Image size is due to the header image (at 62k) which can be reduced to 53k and the foxsports logo at 28.2k. While the foxsports logo size can’t be reduced on my end, there are several pictures on the site that can be redused in size simply by using Smush.it. The big image shown in the flash app weighs in at 230k, which can be shrunk to 218k with Smush.it. Keep in mind there are 5 stories in rotation that need to be loaded. The other 4 images aren’t factored into the initial page load time, but they still add up quick to people on slower connections.
When it comes to caching, the expiration dates for images, css, and js are today instead of far into the future. As a result, cached page load requests are much higher than they should be. It’s also important to note that they are using gizp compression. They also decided to use ETags, which some say it’s better to omit them all together and just include far into the future expiration dates to lessen HTTP requests. I agree with this mindset.
Overall I give foxsports a bad rating and they are in dire need for some optimizations.
4. Sports Illustrated
Sports Illustrated uses a similar style story spotlight app that Foxsports uses, but are they able to do a better job at the page size?
- SI
| Page Size | Cached Size | HTTP Requests | Server | YSlow | PageSpeed | Chrome Load Time |
| 887.8k | 338.7k | 108 / 59 | Apache | 57 | 65 | 5.72 |
Page load size is what I feared, just about on par with FoxSports at 887.8k. On the bright side, SI was able to create pictures that are much smaller in size for their featured stories. So where does all the pagesize go? The majority are images and javascript files. Oddly enough, their biggest javascript file at 108k is not gzipped! Many of their images have expiration dates of today or tomorrow, which results in the large cached load size. They do have gzip compression enabled for javascript, html, but NOT CSS. Interesting. They also have too many separate javascript files that are not cached far into the future and should be combined if at all possible.
Overall Sports Illustrated gets a below average rating because they have some glaring errors that need to be fixed.
Conclusion:
As you can see, many of the websites have done a great job optimizing their sites. ESPN and CBSSports get tops in this category, with ESPN holding the top spot. This is likely due to the fact that it has gotten a recent redesign, and foruntately for us they’ve done an excellent job all around. I suspect CBS won’t be far behind when their redesign launches.
SI and FoxSports are a distant 3rd and 4th in terms of optimizations. As I previously mentioned they have a few glaring problems which result in slowdowns for the end user.
Hopefully this post shed some light on how the top sports websites go about their optimizations. I look forward to any criticism of my critiques or things I might have missed.