Learn Django

Compressing Static Assets

It's usually better if web pages load fast. Users don't like to wait for pages to load. Search engines don't either; they do measure it and factor it into scoring a website. Therefore, one goal of web developers is to ensure pages load as fast as possible.

One thing that can help speed up page loads is compressing static assets together. Right now the project includes several separate CSS and JS files. Each additional file causes overhead when a page loads. If the files can be compressed then browser doesn't have to do as much work and can load the page faster.

In this lesson you'll learn how to compress CSS and JS files. This is achieved using the django-pipeline utility.

Follow these steps to compress the files.

1. Install the necessary components

Open a terminal and install these components.

1
2
3
4
$ pip install django-pipeline
$ pip install jsmin
$ pip install csscompressor
$ pip freeze > requirements.txt

2. Create the CSS compressor

Create these two files: /.../crmeasy/crmapp/utils/__init__.py /.../crmeasy/crmapp/utils/cssmin.py

Then add this code to the cssmin.py file:

1
2
3
4
5
6
7
from pipeline.compressors import CompressorBase
from csscompressor import compress

class CSSCompressor(CompressorBase):

    def compress_css(self, css):
        return compress(css)

3. Add pipeline to the Installed App settings.

Open the /.../crmeasy/crmapp/settings.py file, locate the installed apps config, and add the following line:

1
2
3
4
INSTALLED_APPS = (
   ... add to the end of this config
   'pipeline',
)

4. Configure static file storage and CSS and JS compressor utilities

Open the /.../crmeasy/crmapp/settings.py file, scroll to the end, and add this code with comment:

1
2
3
4
# django-pipeline config
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.jsmin.JSMinCompressor'
PIPELINE_CSS_COMPRESSOR = 'mvp.plans.CSSMin.CSSCompressor'

5. Tell django-pipeline what files to compress

Add this to the end of `/.../crmeasy/crmapp/settings.py:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
PIPELINE_CSS = {
    'site_css': {
        'source_filenames': (
          'css/bootstrap.min.css',
          'css/app.css',
        ),
        'extra_context': {
            'media': 'screen',
        },
        'output_filename': 'css/site.css',
    },
}

PIPELINE_JS = {
    'site_js': {
        'source_filenames': (
          'js/jquery.min.js',
          'js/bootstrap.min.js',
          'js/app.js',
        ),
        'output_filename': 'js/site.js',
    }
}

6. Update base.html to use django-pipeline

Open /.../crmeasy/crmapp/templates/base.html and update the two code blocks below.

1
2
3
4
{% block head_css_site %}
    {% load compressed %}
    {% compressed_css 'site_css' %}
{% endblock head_css_site %}

And

1
2
3
{% block footer_javascript_site %}
    {% compressed_js 'site_js' %}
{% endblock footer_javascript_site %}

That's it!

Track your progress with a free account