Performance tips for Drupal Theming

Performance optimization is a key element of every website development and often is not considered in the process of designing and theming. We have put together several tips which can help you to improve your site's performance from the Drupal's front-end perspective. I hope you will find these tips useful.

Source: http://developer.yahoo.com/yslow

Use YSlow to identify problems

As on most of our projects we use YSlow as a tool for front-end performance testing and optimization. It helps us to identify problems and suggest a way to improve performance based on the set of rules for high performance websites.

Optimize your design

• Over usage of graphic elements, ornaments, details can result in higher file sizes. Amount of colors, gradients, swirls, shadows, etc can rapidly increase the final image size.
• Try to use CSS instead of images for background, rounded corners, box shadows, borders...
• Think about how big the background image size will be, always use repeatable pattern instead of single large file
• Try to have same design for blocks across the site as much as possible. Make elements repeatable, this will not only help to speed the site up, but will make the themer happy:)
• Remember - Less is more! Reuse as many design elements as possible. This will lead in less images, http requests and make the design clean and consistent.

Optimized image sizes

Correct image formats usage

Using PNG8/24, JPEG, GIF formats correctly can dramatically cut the file size. In general use JPEG for photographic images, PNG 24 for transparent images and PNG 8 instead of GIF for images with low amount of colors (less than 256 colors).

• Further reading: Optimizing images for web

Photoshop

• Always use "Save for web and devices" when saving image to be used on web instead of "Save" or "Save as"
• Blur the background if possible, this will reduce the depth of details and will decrease the file size
• Use "Posterize" to reduce the amount of colors by merging similar colors into one single color which leads in better scanline filtering and better compression.
• Excellent article which describes many techniques to optimize image sizes in Adobe Photoshop: Image optimization and compression: tools, tips and tricks
• Another article with great tips: Clever PNG Optimization Techniques

Other tools to optimize images

• Smush.it
• RIOT
• Shrink O'Matic

Put the theme images in sprites

Image sprites are a powerful way to reduce the amount of HTTP requests, which  improves the overall website performance.  That is the main reason why CSS sprites are so often used on heavy traffic websites like Facebook, Google or Amazon. With image sprites the site will load the whole master image at once instead of loading every image separately.

• Spriteme.org
• Spritegen.website-performance.org
• Further reading: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• CSS Sprites Showcase

Use a Content Delivery Network (CDN)

To save bandwidth and improve page loading time you can serve all site images and css files from external servers

• CDN module
• List of free and commercial CDN providers on Wikipedia

Aggregate CSS and JS

Modules and themes may load lots of CSS and JS files. To reduce the amount of HTTP requests and speed up the page load time, turn on the CSS and JS aggregation in site Performance configuration page.

Install the CSS Gzip module

Enable server-side compression to reduce the sizes of your aggregated CSS files.

• CSS Gzip module
• Part of Drupal 7 core

Simplify your Drupal theme

David Robert Nadeau has a great article on speeding up a Drupal web site by using a simpler theme. He describes how different theme sizes will