Speed up a Drupal web site by using a simpler theme

Technologies: Drupal 5+

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.

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.

  1. Log in as your Drupal site’s administrator.
  2. Go to the Administer » Site building » Themes page.
  3. Check the radio button in the Default column next to a theme to use. Pick a light-weight theme, such as “Blue Marine.”
  4. Click the Save configuration button.

A wide variety of free themes are available in the Themes section of the Drupal web site. The themes vary a lot in size and complexity. Below are sizes for a selection of 23 common themes. For each one, the reported size is the sum of the file sizes for the theme's CSS, image, JavaScript, and Flash files in its theme folder.

Theme sizes (bytes)
(lower is better)
Theme Size  
Aberdeen 27,287
Amadou 54,065
Andreas09 24,409
Antique Modern 64,327
Arcmateria 16,342
Blix 44,004
Blue Breeze 62,429
Blue Marine 7,435
Brushed Steel 78,561
Chameleon 5,806
Fancy 120,409
Gagarin 55,710
Garamond 35,108
Garland 87,070
Glossy Blue 34,704
iTheme 91,572
Kubrick 21,972
News Portal 11,887
Ocadia 79,576
Push Button 42,498
Slash 20,978
Stylized Beauty 28,181
Zen 39,467

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.

Page load times (seconds)
(lower is better)
Theme 64 Kbps Time   6 Mbps Time  
Aberdeen 3.61 0.57
Amadou 5.44 0.63
Andreas09 3.23 0.60
Antique Modern 7.26 0.52
Arcmateria 2.14 0.44
Blix 3.91 0.53
Blue Breeze 8.94 0.59
Blue Marine 2.03 0.36
Brushed Steel 14.25 1.26
Chameleon 2.02 0.43
Fancy 27.59 1.34
Gagarin 7.93 0.51
Garamond 5.41 0.67
Garland 3.82 0.53
Glossy Blue 4.73 0.54
iTheme 13.02 1.16
Kubrick 3.37 0.50
News Portal 3.00 0.48
Ocadia 10.82 0.52
Push Button 4.31 0.47
Slash 4.67 0.62
Stylized Beauty 4.50 0.65
Zen 6.95 0.65

Obviously network bandwidth matters a lot. However, while 6 Mbps is 94 times faster than 64 Kbps, the best page load time improvement was only 20 times better. At higher bandwidths, other factors begin to dominate web site speed. These include the time it takes Drupal to process a web page, the time used by Apache to compress files, and particularly the network latency involved in every file request. At high network speeds, the latency, or delay between a file request and a response, can take more time than sending the file. This makes it particularly important to select a theme with the fewest possible number of CSS, JavaScript, image, and Flash files.

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.

At 6 Mbps, all of the themes enabled the test web site to load in under two seconds. But speed isn't everything. Themes with more CSS, JavaScript, Flash, and image files put a higher demand on your web server. This limits the number of visitors your server can handle at any one time. For a high traffic web site, if you use a heavy-weight theme you'll need to buy more server hardware (or pay for more hardware at your hosting service). Alternatively, lower your hardware costs by using a lighter-weight theme that demands less of your server.

The cost of sIFR

Sometimes the problem isn't bytes, but trickyness. The "Fancy" theme is very large, but it also uses the sIFR (Scalable Inman Flash Replacement) technique to draw page headings using Flash and embedded fonts. Graphic designers like the freedom this gives them to choose fonts not available on every user's computer. But there is a cost. JavaScript added to each page requests a Flash file for every font used. This takes bandwidth to send each Flash file (about 10 Kilobytes per font), adds latency to get each file, and slows down display of the finished page to the visitor (Flash draws text slower than a browser does)

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.

On the first visit to a site, the visitor's browser saves HTML, CSS, JavaScript, Flash, and image files into a browser cache. On the next visit, if the needed files are already in the cache, the browser uses them instead of downloading the files again. However, browser caches aren't big enough to hold every file the visitor ever downloads. When the cache fills up, the oldest files are tossed to make room for new ones. These oldest files could be your site's files. Once tossed from the cache, the next time the visitor comes to your site, their browser will have to get the files all over again.

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.

Unless your site is a very frequent destination for your visitors, they will have to re-download the files on every visit. If your CSS, JavaScript, and images are big, your site will feel slow, despite the browser cache.

Conclusions

Web site decorative images, Flash, and JavaScript are nice, but they cost in page load time. Visitors are increasingly impatient with slow web sites that take more than a few seconds to load. To keep the visitor experience as fast as possible, keep the site lean by using a simpler theme. Clever, frugal design can still make your site look great.

  • Select a theme with smaller decorative images, Flash, style sheets, and JavaScript. The bigger these are, the slower your site. This is particularly important if you are serving your site over a cable modem or DSL connection.
  • 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.
  • Avoid overly tricky themes that use sIFR and lots of embedded JavaScripts. These things can dramatically slow down your site. They can also make your site fragile and subject to problems whenever versions change for web browsers and browser add-ons.

Further reading

Appendix: How I tested

All testing used a Drupal 5.1 web site loaded with sample content generated by the Devel module's generator scripts. The home page was fairly typical and included multiple Drupal blocks (menus, recent posts, a random image, and a tag cloud) and a view listing teasers for site articles. Drupal's CSS file aggregation and page caching were enabled, MySQL's query cacheing was enabled, Apache was configured to compress all CSS, JavaScript, and HTML, and eAccelerator was used to cache all compiled PHP scripts.

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.

Comments

Web designers, most of the

Web designers, most of the time, trying to make balance between performance and visual appearance/flexibility.
More fancy style (not always) means lower performance.
It is web designer's curse :-(

Thanks

Thanks very much, great Infromative Site.
This help really in taking the choice for the quickest Theme!
Cheers

how do i find the size of a theme

How do i find the size of a theme not listed in your list. How do i compare them with your list.
I am using fancy theme and based on your recomendation want to move away from it.
However i need to knwo that other themes i like are what size so that i can decide which one to take
for exmaple i am considering

1) fourseasons
2) aurora

how do i find the above information
if you can email me a copy of your response

Finding the size of a theme

Getting the size of a theme only takes a few minutes:

  1. Download the theme from the Drupal theme section and unzip it into a temporary folder.
  2. Add together the sizes for CSS, JS, JPG, GIF, PNG, and SWF files (ignore the template files). On Windows, select each file, right-click, and choose the "Properties" menu item to show the size. On Mac OS X, select the file, right-click, and choose "Get Info". On Linux, use a terminal window and type "ls -l".

The total number of files and the total file size are good indicators of the theme's performance.

Zen based theme slow

Are zen based themes considered slower than other themes built from scratch. I have a zen based theme on my site and i have been trying to speed it up, should i consider building it up all over again from scratch. the question is will it be faster if i do

Re: Zen based theme slow

Performance is primarily a function of the number of images required by a page. Themes that use more images are slower. Every theme, including the Zen theme, can be modified to use fewer images and improve its performance. However, many beginning Drupal users stick with the stock themes and do not reduce the theme's image use. The result is a slow web site.

It isn't necessary to start from scratch to get a fast site design. You can start from the Zen theme, or any other well-written generic theme.

Gotta Love This

You really make it seem really easy together with your presentation but I in finding this topic to be really something that I think I might never understand. It seems too complicated and very vast for me. I'm taking a look forward for your next submit, I will try to get the grasp of it!

Re: Gotta Love This

Hang in there. It takes time to learn anything. The payoff is that frustrating mysterious problems gradually become understood then solved. It feels good to gain control over your site and its technology. And with that positive feeling you're energized to take on the next mysterious problem. And the next.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

Nadeau software consulting
Nadeau software consulting