Performance tips for Drupal Theming

25 Nov 2011

Administrator

Drupal Tutorials

1
2
3
4
5

(0 votes)

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

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

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 affect the site loading time and how themes with more CSS, JavaScript, Flash, and image files put a higher demand on your web server.

Disable ‘Rebuild theme registry on every page’

Themers and developers often enable the “Rebuild theme registry on every page load” setting in theme configuration. This registry tells Drupal what template files and overrides exist in the theme’s directory. If Drupal checks this on every page load it will cause noticeable slow down on any website.