Compress Drupal Files to Speed Up Your Site

compression

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.

media_1374426923480.png

Dealing with many CSS files

media_1374425645419.png

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

media_1374427141830.png

Ah!! Much better.

Multiple Javascript files

media_1374426325118.png

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

media_1374427245014.png

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.

Author

0 0 votes
Article Rating
Subscribe
Notify of
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Justin - DrupalDen.co.uk
Justin - DrupalDen.co.uk
10 years ago

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]

Brian Altenhofel
Brian Altenhofel
10 years ago

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.

Franco
Franco
10 years ago

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.

Will Fischer
Will Fischer
9 years ago

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 🙂

DerekSolutions
DerekSolutions
2 years ago

Is this Drupal 7? 

Thanks

imrodmartin
2 years ago
Reply to  DerekSolutions

Hi Derek,
Yes – this blog post was created for Drupal 7.  This setting is on by default in Drupal 9.

6
0
Would love your thoughts, please comment.x
()
x