Compress Drupal Files to Speed Up Your Site
It’s not unusual for people to tell us that their Drupal sites run slowly.
Part of the reason that Drupal sites run slowly is that Drupal will load around a dozen CSS and Javascript files by default.
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.
Multiple Javascript files
If you haven’t noticed the Aggregate JavaScript files options yet, please take another look at the Performance configuration page. Depending on the modules you have loaded, you might have several JavaScripts being retrieved from the server and sent to your user. Remember, the fewer times the server has to do something, the better your performance.
Will multiple JavaScript files make your theme disappear? Not likely, but hey, maximizing performance is a good thing so let’s give it go.
First, take a look at the source code for webpages – look at several. Do you have JavaScript loading? The screen shot shows one of my sites without the compression. Goodness!! What a mess. If you haven’t already done so, check the box to aggregate the JavaScript files.
Fewer JavaScript files are sent
Again … much better.
Troubleshooting
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.
This is definitely the one of the things along with page caching which will speed up your Drupal site. Something that is also important to know is how to include your own external CSS & JS files so they’re also aggregated, ie. not just including them in the of your site template.
Here’s a post on how to include external CSS & JS files so they’re also optimised and aggregated.
[url=http://www.drupalden.co.uk/including-optimising-external-javascript-css-files-drupal]http://www.drupalden.co.uk/…[/url]
Adding write permissions to Other/World is a bad idea.
Two better choices would be to either change ownership of the files folder to your the user that your webserver runs as, or (if you’re still using FTP) change the group of the files folder to the group that your webserver runs as.
JS and CSS aggregation & compression is an effective way to clean and speed up Drupal pages.
There are two other issue to consider:
– Hosting has to be “sized” to run a resource consuming Drupal site
– DB. This is a unsolved issue. IMHO. 120-140 or more tables are too much. Cache tables speed up the site but increase the ever growing DB size. And big DB with lots of (big) table tendslacks in effectiveness.
Compressing your files really does help to speed up your pages. After I learned more about it my average page speed has gone up by at least double the amount as it was before. However, using this built-in function was not the optimal way for me to compress Javascript and CSS files. I discovered that using many of the free available online tools (like [url=http://refresh-sf.com/yui/]http://refresh-sf.com/yui/[/url] for CSS and [url=http://www.giftofspeed.com/javascript-compressor/]http://www.giftofspeed.com/…[/url] for Javascript files) saved me more kilobytes as using the built-in one.
It doesn’t make a huge difference, but every KB helps 🙂
Is this Drupal 7?
Thanks
Hi Derek,
Yes – this blog post was created for Drupal 7. This setting is on by default in Drupal 9.