A Drupal theme controls the look of a web site by setting text colors, fonts, and decorative images. Speed up a web site by selecting a theme that has fewer and smaller images and CSS files. This will make your web pages smaller, faster to send to your site's visitors, and easier for their web browsers to draw. This article benchmarks 23 common themes and concludes with a few guidelines on what to watch out for when selecting a theme.
Table of Contents
This article is part of a series on Essential steps to speed up a Drupal web site. Other articles in the series discuss enabling file compression and using PHP, MySQL, and Drupal caching to speed up a web site.
How to select a simpler Drupal theme
Drupal's default theme is "Garland." The theme is attractive, but it includes a lot of decorative images and a big CSS file. Switch to a simpler theme to reduce the amount of data sent to a site visitor and speed up the site.
- Log in as your Drupal site’s administrator.
- Go to the Administer » Site building » Themes page.
- Check the radio button in the Default column next to a theme to use. Pick a light-weight theme, such as “Blue Marine.”
- Click the Save configuration button.
The largest themes are 10-20 times larger than the smallest themes. These large themes might look nice, but they produce a much slower web site. Only use large themes if you, and all of your site visitors, have fast network connections. To better serve visitors on slower connections, consider using (or modifying) one of the smaller themes. The "Blue Marine" theme is a common starting point for custom site themes.
How well does it work?
I benchmarked the page load time for the home page of a Drupal test site using each of the above themes (see the appendix for details on how I tested). The test site home page is fairly typical: it shows teasers for the 10 most recent articles in the center of the page, and a few blocks on the left and right sides.
Effect on page load time
I measured page load times while simulating two network bandwidths:
- 64 Kbps: Family and small business web sites can be served from a PC over a cable modem or DSL connection. While these connections are fast when receiving data from the Internet, they are much slower when sending out data. A cable modem or DSL connection may have only a 64 Kbps (kilobits per second) maximum upload speed (though this has been increasing in recent years). If you are serving a site this way, your site's speed is limited to 64 Kbps, even if your visitors have faster connections. You just can't send your web pages any faster. Benchmarking at 64 kbps gives us the slowest likely speed for accessing your site.
6 Mbps: Business web sites may be hosted by the business' own IT department, or by an ISP or web hosting company. These sites have high speed commercial connections to the Internet that are faster than a home connection. The bottleneck in serving pages is now the visitor's cable modem or DSL connection, which is typically limited to 6 Mbps (megabits per second). Though the web site can send web pages faster, the visitor can't receive them any faster. Benchmarking at 6 Mbps gives us the fastest likely speed for accessing your site.
|Theme||64 Kbps Time||6 Mbps Time|
At 64 Kbps, the largest of these themes are unusable. Usability studies warn us that web pages need to load in 2-3 seconds or your visitors will be frustrated and leave. All but four of the themes tested exceed this limit. The largest theme, "Fancy", takes an enormous 27 seconds to fully load the page at 64 kbps. Hardly anyone will wait that long. If you are serving a home or small business web site over a cable modem or DSL connection, it is essential that you choose a light-weight Drupal theme to help keep page load times to 2-3 seconds or less.
The cost of sIFR
The myth of the web browser cache
Some designers rationalize using big images and CSS files by saying "It all gets saved in the browser cache anyway." This is only partly true.
A browser cache study by the performance research team at Yahoo! found that 40-60% of all of their site visitors did not have any of Yahoo!'s files in their cache. So, most of their users had to download Yahoo! images and style sheet on every visit, despite Yahoo! being one of the most popular sites on the Internet.
- Select a theme with fewer files. The more files there are, the slower your site and the higher the load on your web server. Even on a fast network connection, the network latency to retreive each file remains a limiting factor.
Page load times were measured by loading the home page into Firefox with its browser cache disabled. Load times were reported by the Charles proxy server which was also used to throttle the network connection to 64 Kbps and 6 Mbps. To discount variations in network and server load, the same page was loaded repeatedly until the standard deviation between the five best load times dropped below a threshold. By using Firefox to load web pages, the load times take into account multi-threaded file requests, keep-alive server connections, and the time required by a browser to parse HTML and CSS files and render the page. This also accounts for downloading all files associated with a page, including images referenced by style sheets.
As with all benchmarking, your own results will vary due to differences in server and client computer CPU power, memory size, page size, page layout, and the type of web browser and web server you use. Use this article's results only as a rough guideline.