Code well!

Write good code.

Lovers of good code know that they will have faster sites and happy visitors. Editors of good code know they won't find any hard-to-understand bits of code. Creators of good code know that they'll be able to finish a project more quickly and have it perform successfully across browsers. Take the time to plan out your code so it'll remain semantic, reusable, and easily edited by others.

There are some developers, however, that may need more convincing - or perhaps there are non-developers that want you to just code fast and ignore good coding methods just to get the job done. This experiment's goal was to demonstrate the business value of coding well. Page speed is directly proportional to revenue, and coding well greatly impacts your page speed.

We tested the below "bad" versions of the baseline using WebPageTest. They were tested at the same time of day, and tested on the browsers that WebPageTest offers, all out of the same location. Each browser test contained five runs, and the times below represent the median run time for each browser. The Change column represents the difference in average page load time over the baseline test.

Performance Results

Roll over each test name to see more details. Click on a test name to see the test page.

BaselinePage Load Time
TestSizeIE7IE8IE9ChromeAverageChange
Basic PageThe basic includes basic text, three regular images, a few CSS background images, and some CSS3 techniques.23.4K 0.643s 0.521s 0.602s 0.434s 0.550s -
HTML TestsPage Load Time
TestSizeIE7IE8IE9ChromeAverageChange
HTML5 DoctypeWe used the HTML5 Doctype and also changed the architecture to use HTML5 structure elements instead of divs.23.4K 0.653s 0.521s 0.580s 0.408s 0.541s -1.727%
Transitional DoctypeIn addition to the Transitional Doctype, we changed some self-closing elements to remove their / from the HTML.23.4K 0.648s 0.587s 0.578s 0.412s 0.556s 1.136%
+10KB HTMLWe added 10KB of Lorem Ipsum to the text before gzip 24.0K 0.689s 0.550s 0.619s 0.447s 0.576s 4.773%
CSS TestsPage Load Time
TestSizeIE7IE8IE9ChromeAverageChange
Unused CSSWe added unused styles to the stylesheet, doubling its size before gzip.23.7K 0.648s 0.518s 0.602s 0.410s 0.545s -1.000%
not using shorthand stylesWe broke shorthand CSS out into an additional 10 styles, such as margin-left, margin-right, margin-top, margin-bottom23.6K 0.652s 0.531s 0.588s 0.407s 0.545s -1.000%
Split CSS into two filesSplitting CSS into two files can save time downloading the files, since the browser may be able to do it concurrently.23.6K 0.662s 0.521s 0.612s 0.486s 0.571s 3.818%
Embedded CSSThe additional styles that we embedded in the <head> intentionally change existing styles from the stylesheet.24.2K 0.654s 0.575s 0.609s 0.454s 0.573s 4.182%
Inefficient rulesAn inefficient selector (such as #footer ul li.youtube a) requires more browser processing.23.5K 0.687s 0.596s 0.600s 0.438s 0.580s 5.500%
using @importWe split the existing stylesheet into two, and used @import to call the first half into the second.23.7K 0.673s 0.697s 0.544s 0.454s 0.592s 7.636%
IE-specific CSS filesWe added the same 10 styles to IE6-, IE7-, and IE8-specific stylesheets.23.5K 0.661s 0.735s 0.564s 0.416s 0.594s 8.000%
Image TestsPage Load Time
TestSizeIE7IE8IE9ChromeAverageChange
background-image for li'sThe background image replaced the normal disc23.8K 0.703s 0.549s 0.614s 0.433s 0.575s 4.500%
no sprite22.5K 0.718s 0.548s 0.808s 0.426s 0.625s 16.636%
+1 image in HTML43.9K 0.768s 0.636s 0.749s 0.609s 0.691s 25.545%
+10 images in HTML227.6K 1.815s 1.607s 1.666s 1.499s 1.275s 131.26%
JPGs at 50% (instead PNGs)We took some the images that were PNGs and turned them into JPGs, and exported using Save for Web in Photoshop at 50%34.2K 0.711s 0.663s 0.594s 0.457s 0.606s 10.277%
JPGs at 60%43.2K 0.816s 0.686s 0.643s 0.538s 0.671s 21.955%
JPGs at 75%52.5K 0.840s 0.737s 0.673s 0.561s 0.703s 27.773%
JPGs at 100%88.1K 0.906s 0.878s 0.870s 0.752s 0.582s 54.818%

Try it!

Check out our GitHub repository to download our tests and add your own.