I want to automate CSS/JavaScript compression in my django application. My choose is: django-compress. Easy-to-use, fast and… it works.

Why do I need CSS/JavaScript compression?

Simple: I want to optimize and speed up my website. One of the most import thing to achieve this, is to compress CSS and JavaScript files. Compression is nothing more than just a removing formatting and white spaces, trimming class names, omitting unambiguous quotes around attributes, etc. This can reduce file size by (more or less) 60%!

Can I automate this process in django?

Sure, yeah. That’s why I use django-compress.

Install django-compress

Ok, let’s start fun…

First, download everything:

svn co http://django-compress.googlecode.com/svn/trunk/ django-compress

move this tool to your django application:

cd django-compress
cp -r compress /opt/django-projects/my_app/

add it to your INSTALLED_APS:

cd /opt/django-projects/my_app/
vim settings.py

and add:

'my_app.compress'

to your INSTALLED_APS

Install CSSTidy

Propably you don’t have csstidy installed. That’s why you should install it right now:

sudo apt-get install csstidy

Configure everything

vim settings.py

… and add all configuration options to this file. All kind of settings you have here.

My django-compress settings look like:

COMPRESS = True
COMPRESS_AUTO = True
COMPRESS_VERSION = True

COMPRESS_CSS = {
    'compressed_css': {
        'source_filenames': ('site.css', ),
        'output_filename': 'all.r?.css',
        'extra_context': {
            'media': 'screen,projection',
        },
    },
}

COMPRESS_JS = {
    'group_js': {
        'source_filenames': ('js/jquery-1.3.2.js', 'js/functions.js', 'js/tweetmeme.js'),
        'output_filename': 'js/all.r?.js',
    },
    'group_google_adv_left_js': {
        'source_filenames': ('js/google_left_adv.js', 'external_js/show_ads.js'),
        'output_filename': 'js/all_google_left_adv.r?.js',
    },
    'group_google_adv_right_js': {
        'source_filenames': ('js/google_right_adv.js', 'external_js/show_ads.js'),
        'output_filename': 'js/all_google_right_adv.r?.js',
    },
    'group_google_analytics_js': {
        'source_filenames': ('external_js/ga.js', 'js/google_analytics.js'),
        'output_filename': 'js/all_google_analytics.r?.js',
    }
}

A little bit of translation…

• compressed_css, group_js, group_google_adv_left_js, group_google_adv_right.js, group_google_analytics_js are my IDs (groups)
• source_filenames is a tuple with the source files to be compressed.
• output_filename is the filename of the (to be) compressed file. ? means some kind of unique identifier (which is django-compress generates automaticly)
• extra_context is a dictionary of values to add to the template context, when generating the HTML for the HTML-tags with the templatetags. This option is not required and can be left out.
• COMPRESS: When COMPRESS is True, CSS and JavaScripts will be concatenated and filtered. When False, the source-files will be used instead. Defaults to not DEBUG (compressed files will only be used in non-DEBUG-mode (production))
• COMPRESS_AUTO: Auto-generate CSS and JavaScript files whenever needed, when the template tags are invoked. This setting will make sure that the outputted files always are up to date (assuming that you are using the provided templatetags to output the links to your files). If you disable this, you can use the management command to keep your files manually updated. Defaults to True.
• COMPRESS_VERSION: regulates whether or not to add a “version number” to the outputted files filename with for use with “far future Expires”. For more information, see FarFutureExpires. When you specify COMPRESS_VERSION you will also need to add a placeholder (which by default is ‘?’) for the version number in the output_filename setting. Files with new filenames will be generated if needed, and old outdated files will be removed at the same time. All files with a matching name e.g. output_filename where ? can be replaced by digits will be removed. If you for some reason have files named in the same way, you should consider moving them or putting the compressed files in their own directory.

Usage

If COMPRESS and COMPRESS_AUTO is enabled (True), the source files will be automatically updated, and re-generated IF NEEDED when invoked from the templatetags. The last modified time of the files will be compared, and if any of the source-files is newer than the output-file, the file will be re-generated.

I have COMPRESS and COMPRESS_AUTO enabled so it will be automatically updated and re-generated.

django-compress includes two template tags: compressed_css and compressed_js, in a template library called compressed.

They are used to output the <link> and <script>-tags for the specified CSS/JavaScript-groups (as specified in the settings). The first argument must be the name of the CSS/JavaScript group.

The templatetags will either output the source filenames or the compressed filenames, depending on the COMPRESS setting, if you do not specify the COMPRESS setting, the source files will be used in DEBUG-mode, and compressed files in non-DEBUG-mode.

So… I just need to add few things to my template file:

{% load compressed %}

at the beginning of file.

{% compressed_css 'compressed_css' %}

in <head /> area.

and all kind of JS groups (e.g. group_js, group_google_adv_left_js, etc) in <body /> area.

so we have for example…

{% compressed_js 'group_js' %}

in our <body />.

The end.

Restart your application, refresh your website in a web browser and preview your source code of the website.
There will be files like: js/all_google_right_adv.r123456.js, js/all_google_left_adv.r123456.js, all.r123456.css, js/all.r123456.js and js/all_google_analytics.r123456.js in it.

Write a comment

Name (required)

Mail (will not be published) (required)

Website

Hello, I'm Karol Zielinski, internet evangelist, an entrepreneur, project manager and a web developer from Gdynia, Poland. I like creative design, good advertisement, social media and all kind of stuff around the web.

Most popular posts

• m2eclipse: Eclipse is running in a JRE, but a JDK is required
• Publish post on Facebook Page wall as a Page (not a user) (python + Facebook REST API)
• Sub domains in Google Analytics
• "decoder jpeg not available" on Mac OS X
• Ruby on Rails: 'require_frameworks': no such file to load -- net/https (RuntimeError)

Much more links

• about me
• all tags
• blog's archive
• contact me
• inspiring sites
• my daily lifestream