Reducing page load size with Django Compressor

Reducing css and javascript page load size is integral to web development. Minimization will

reduce web page size as well as the overhead cost of requesting files from the server resulting

to reduced web page latency. Listed below are some of the Django static file compressors


I chose to go with django_compressor since it is well documented, actively developed, and

like most of the well developed apps, it is very easy to install and use. But of course, you can

choose other compressors as you see fit.

Here are the basic steps on how to install and use django compressor

●Install django_compressor using your package manager

pip install django_compressor

●Add ‘compressor’ to your INSTALLED_APPS setting:

# other apps

●In case you use Django 1.3’s staticfiles contrib app (or its standalone counterpart

django-staticfiles) you have to add Django Compressor’s file finder to the

STATICFILES_FINDERS setting, for example withdjango.contrib.staticfiles:

# other finders..

In addition, Django Compressor have several settings that controls it behaviour. Sensible

defaults are given to this settings and you can change them to your specifications.

Here are some important settings.

django.conf.settings.COMPRESS_ENABLED: Boolean value that decides whether compression will happen.

Default : opposite of DEBUG

django.conf.settings.COMPRESS_URL: Controls the URL that linked files will be read

from and compressed files will be written to

Default : STATIC_URL (MEDIA_URL for older Django versions)

django.conf.settings.COMPRESS_CSS_FILTERS: A list of filters that will be applied to

the CSS.

Default : [‘compressor.filters.css_default.CssAbsoluteFilter’]

django.conf.settings.COMPRESS_JS_FILTERS: A list of filters that will be applied to the javascript.

Default : [‘compressor.filters.jsmin.JSMinFilter’]

Sample Usage :

{% load compress %}
{% compress <js/css> %}
<html of inline or linked JS/CSS>
{% endcompress %}


{% load compress%}
{% compress css %}
<link href=”{{STATIC_URL}}css/default.css” rel=”stylesheet” type=”text/css”
media=”all” />
<link href=”{{STATIC_URL}}css/layout.css” rel=”stylesheet” type=”text/css” media=”all” />
{% endcompress %}
COMPRESS_CSS_FILTERS = [‘compressor.filters.cssmin.CSSMinFilter’]

Source :