It’s not unusual for people to tell us that their Drupal sites run slowly.
And, if you haven’t noticed, each time you add a module to Drupal, there is a chance you are adding even more files.
The image below shows a fairly normal Drupal site and it’s loading 31 files!
Before you move on to our recommeded solutions, go to your site and check the source code. If your source code looks like the image below, keep reading and we’ll show you how to fix this problem.
Dealing with many CSS files
Your Drupal site comes, by default, with a Performance Configuration page located at example.com/admin/config/development/performance.
There are two performance configuration options on this page: Caching and Bandwidth Optimization. Under the Bandwidth Optimization options, you have two choices. Can you guess which one you want to check if you want to consolidate your CSS files? Yep! Aggregate and compress CSS files. It’s that simple.
CSS compression results
Ah!! Much better.
Again … much better.
While writing this blog, I discovered that my server persmissions weren’t set just right in order for the aggregation feature to work. If you get the message below, go to sites/default/files and locate the js directory and look at the permission settings. I added write permissions to Other and saved the configuration settings again and all was good.
“The specified file temporary://filev4LMdV could not be copied, because the destination directory is not properly configured. This may be caused by a problem with file or directory permissions. More information is available in the system log.”
Is this all you need to know? Well … no. If you ever need to tweak the CSS on your site and you use a tool like Firebug in Firefox, you will see the CSS on each item of the page but you won’t see where that CSS is stored. This is when you want to roll your eyes and growl. If you want a quick way to reveal the CSS file that needs to be changed, put your site into maintenance mode, uncheck the compression feature, use Firebug to locate the CSS code and CSS file that needs to be changed, change it and then recompress. Oh! And don’t forget to take your site out of maintenance mode.