Объединение css и js файлов в один - django-compressor

Для увеличения производительности веб-приложения нужно стремиться к уменьшению количества запросов к веб-серверу при загрузке каждой страницы.
Этого можно достичь объединением файлов стилей и скриптов в единые файлы. В итоге на страницу будет загружаться по одному .css и .js файлу.
 Чтобы объединять файлы стилей и скриптов в один файл, можно воспользоваться приложением django-compressor.

Установим и настроим приложение django-compressor:

1. Для работы с django-compressor нужно установить приложение django-appconf для управления дефолтными настройками приложений. Поместите папку appconf в свой проект.

2. Скачаем приложение django-compressor и также поместите папку compressor в проект.

3. Также в некоторых случаях потребуется установить модуль питона six.

4. В файле settings.py проекта:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)

INSTALLED_APPS = (
    # ... другие приложения

    'appconf',
    'compressor',
)

COMPRESS_ROOT = os.path.join(os.path.dirname(__file__), '../static/')

COMPRESS_ENABLED = True

Мы здесь указываем COMPRESS_ENABLED = True потому, что приложение django-compressor сжимает файлы, если DEBUG = False. Такой настройкой мы принуждаем приложение всегда сжимать файлы.

5. В шаблоне django оберните место подключения стилей и скриптов в соответствующие теги:

{% load compress %}

{% compress css %}
<link rel="shortcut icon" href="{{ STATIC_URL }}style/images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style/main_style.css" media="all" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style/css/view.css" media="all" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style/type/marketdeco.css" media="all" />
{% endcompress %}

{% compress js %}
<script type="text/javascript" src="{{ STATIC_URL }}style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}style/js/html5.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}style/js/selectnav.js"></script>
{% endcompress %}

6. Посмотрите теперь, как выглядит страница. Вместо 4-х файлов стилей и 5 файлов скриптов на страницу подключается два файла:

<link rel="stylesheet" href="/static/CACHE/css/3ffce519817b.css" type="text/css" media="all" />
<script type="text/javascript" src="/static/CACHE/js/70f4a8c37c6d.js"></script>

Сравнение времени загрузки страницы (слева - до оптимизации)

Таким образом нам удалось уменьшить число запросов к веб-серверу, и увеличить скорость загрузки страницы примерно на 11% (до оптимизации время загрузки страницы 247 мс, после оптимизации 222 мс).

Для увеличения скорости загрузки страницы нужно также минифицировать файлы стилей и скриптов - удалять из файлов комментарии, переносы строк. Такая операция "обезображивания" (uglify - от англ. "обезображивать") кода позволяет сэкономить десятки килобайт.

Минифицировать код в django можно с помощью сторонних приложений, которые, как правило, используют node.js. Но это уже тема отдельной беседы.