Wednesday, August 29, 2012

Hack to Lighten Drupal 6 css Size

Even when using css agregator the size of the css file in a Drupal 6 site is too big.
Why? Because with every module Drupal has a tendency to load the module css style that goes with it.

You know how important is page speed for visitors and SEO also, so before doing any changes you may want to check your page speed and page size with Yslow or Page Speed plugins.

The lighter is your page, the faster it will load.

This trick is valable if you are using a diferent theme for the front page and let's say that for administration purposes you use Garland, so we are not goig to modify the admin Garland theme in this case as some of the functions related to styles classes with javascript may not work.

To lighten Drupal css sytle sheet, first you need to go to Performance setting and uncheck compress css styles.
Then open the template.php file on your active theme folder, for example if you are using the theme basic open the /sites/all/themes/basic/template.php file, but first of all make a copy of it!
Then find the preprocess_page function and add all the lines marked in pink:

function basic_preprocess_page(&$vars, $hook) {
  // Hack to lighten css
  $css = $vars['css'];
// Modules installed by you
  $vars['styles'] = drupal_get_css($css);
  // end of hack

  // .. more code here

The path to sites/all/modules/ may change depending where you have installed your particular modules, if you are not sure of this do not include these lines.

Once you've done this go to Performance setting and check compress css styles back again.
Then check again speed and size of your page and see the difference.

Thanks to this trick my page loads 1 second faster!


Drupal Development Company said...

Nice drupal 6 css information.

Post a Comment

Your opinion is very appreciated, thank you!