OptimizationWeek.com
Website performance news and views™
 | |||
|
| OptimizationWeek.comWebsite performance news and views™ |
|
| Home Sitemap Issues About Contact |
New book on Website Optimization Secrets
| Free Newsletter |
With Thanksgiving fast approaching, what better site to ring in the holidays than Epicurious.com? Epicurious is a great place to go for mouth-watering recipes, food and drink etiquette, and gift ideas. To see how well Epicurious fares with user etiquette, we tested the Epicurious.com home page for speed and accessibility. So how did this popular food site do?
In short, they need to go on a low-byte diet. Epicurious weighs in at over 212K in total, and takes over a minute to load on a 56Kbps modem. However, Epicurious uses a speedy JavaScript delayed loading technique that we'll discuss later. Epicurious also failed our accessibility tests.
We analyzed the home page of Epicurious.com to see how well it complies with the speed guidelines published in our book Speed Up Your Site. This home page was analyzed using our free Web Page Analyzer plus a tool that takes into account dynamically generated content. The results of our analysis are listed in Table 1.
| Home page | Total Page Size | HTTP Requests | HTML Size | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time* (seconds) |
|---|---|---|---|---|---|---|---|---|
| Epicurious.com | 217,534 | 66 | 50,470 | 24,363/15 | 1,528/1 | 141,173/50 | N/A | 19/73 |
*The download times were measured on a slow Macintosh PowerBook with a fast 56Kbps connection. The first number is the time it takes for useful content to display in seconds. The second figure is the time it takes for the entire page to load (i.e., useful content/entire page)
Note: The total page size includes dynamically generated content (ads delivered by JavaScript, etc.).
The Epicurious.com home page is 217,534 bytes in total, requiring 66 HTTP requests to render the page. The HTML size is 50,470 bytes, with 24,363 bytes in 15 external JavaScript files (some of which are dynamically generated ads). One CSS file of 1,528 bytes styles the page. A total of 50 images, including dynamically generated ads, contribute 141,173 bytes to the total page size. Overall the page takes 19 seconds to load useful content (navigation bar) and 73 seconds to load the entire page (see Figure 1).
Figure 1: Epicurious.com and drop-down menus
The total page size of over 212K plus 66 HTTP requests causes an initial load time of 19 seconds on a 56Kbps modem, well above the 2 second guideline we recommend in our book, Speed Up Your Site. As of October 2003, over 59% of users in the US still dial into the Internet at 56Kbps or less. The total load time of 73 seconds (an average of multiple timings) is over 8 times the recommended load time of 8.6 seconds.
The three largest contributors to the large page size are the number of images (50), the HTML page size (49K+), and the number of external JavaScript files (15). These external JavaScript files in particular cause a significant drag on page display speed.
However, the Epicurious designers use an efficient technique for loading six of their JavaScript files used to create their drop-down menus. To improve the initial display speed of their page they define empty "stub" functions that are redefined by external JavaScripts loaded after the body content displays. For example:
<body><script language="javascript">function mi_rovr(){};function mi_rout(){}</script>These mouse over and out functions are then redefined near the end of the page, like this:
<!-- BEGIN FOOTER -->
<script language="javascript" src="http://eat.epicurious.com/dhtml/epi-navbar/scripts_new/sniff.js"></script>
<script language="javascript" ...
This way, users who interact with the navigation bar while the page is loading won't experience JavaScript errors. Once these functions are redefined after the body content displays, they can use the drop-down menus. We'll discuss this delayed loading technique in more depth in this week's Speed Tweak of the Week.
This page exhibits similar problems to other table-based JavaScript-intensive pages. The number of HTTP requests (66), due in part to the graphic rollovers, increases the initial and total download times. The HTML file size in particular is over 49K, due to the problems we outline below. In summary, the most common performance problems that we found were:
We recommend combining and refining the six JavaScript files that load near the end of the page into one, to avoid five HTTP requests. Using relative instead of absolute URLs will save some space, as would switching to an XSSI server-based ad delivery solution instead of using JavaScript to deliver ads. Minimizing the use of JavaScript would also help to streamline this page. Speaking of JavaScript, their technique of delaying the loading of external JavaScript files to create DHTML pull-down menus is a good one. We cover this technique in our delay loading of JavaScript files Speed Tweak.
The graphic navigation bars simulate white text on a flat green background. This effect could be done with CSS2-styled text to create near-identical rollovers, including the highlighted active page. Substituting newer standards-based techniques for old-style techniques is a great way to save HTTP requests, while making your pages faster and more accessible.
The Epicurious home page had one of the five key elements typically included in accessible web pages. They use only three ALT attribute values, while the rest are blank. As a result, with images turned off, their page looks like this (see Figure 2).
Figure 2: Epicurious.com with images turned off
Note that the DHTML menus still work with images turned off. However, without ALT attribute values behind the menu items, screen readers would have difficultly navigating this site. There were no text link alternatives included within the page.
To improve accessibility convert graphical rollover menus to text and CSS2 for higher speed and better accessibility. The DHTML menus can still key off text menus with the proper technique. For the remaining images, add descriptive alt attribute values to functional images, and blank alt attribute values to non-functional images. Our other suggested solutions can be found in our presidential homepage review.
In our opinion, the Epicurious.com home page needs to go on a diet. It scored poorly in our accessibility tests, although its DHTML menus were well-designed and functional even with images turned off. By layering their tables, they display useful content faster than they would in a single table design. Their technique of delaying the loading of external JavaScript files is a good trick to emulate.
Size-wise the Epicurious home page weighs in at over 212K after all the dynamically generated ads are accounted for. This is well above the 30K ideal that we recommend in our book, Speed Up Your Site. Be sure that you don't burn your butterball waiting for that special recipe to display.
Andy King is the founder of five developer-related sites including this one, and the author of Speed Up Your Site: Web Site Optimization from New Riders Publishing. He publishes the monthly Bandwidth Report and Speed Tweak of the Week. He enjoys remote photography and immediate gratification.
Any trademark or tradenames used in this article are owned exclusively by their owners and they do not endorse or sponsor this site. Optimization Week and the author are not affilliated with Epicurious.com or CondéNet Inc. All opinions expressed herein are based on information that we believe to be reasonably accurate at the time of publication. If you find any errors or misstatements of fact please contact us.
Copyright © 2003-2020 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test Local Dumpster Rental | Sleep Supplment
Last modified: November 09, 2004