Google に PageSpeed Insights
というツールがあることを知りまして、実際に採点しました。
得点は、中々の点数の悪さで、
すぐにできそうな以下の設定の変更を行いました。

django-compress を使って、js/css を圧縮する について
mezzanineでは、OPTIONAL_APPS 扱いで使用は想定されているものの、
デフォルトでは OFF になっていたので、ON にするためにやったことを
備忘として記述します。

0. 前提

以下の環境で実行しています。 * OS
CentOS release 6.7 (Final)

  • Python Version
    Python 2.7.8

  • Package (必要そうなものだけ抜粋)
    Django (1.9.6)
    Mezzanine (4.1.0)

1. インストール

基本インストールさえしてしまえば、
そのまま設定がONになり、使用可能な状態になります。
詳細は2. 以降に記載。

  • command

    pip install django_compressor

  • 確認

    pip list

django-compressor (2.0) がインストールされました。

2. 設定

settings.pyは、変更しなくても、インストールすれば認識してくれます。 理由は、settings.py 内に OPTIONAL_APPS として記載されているためです。

# These will be added to ``INSTALLED_APPS``, only if available.
OPTIONAL_APPS = (
    "debug_toolbar",
    "django_extensions",
    "compressor",
    PACKAGE_NAME_FILEBROWSER,
    PACKAGE_NAME_GRAPPELLI,
)

OPTIONAL_APPSは、同じくsettings.py の set_dynamic_settings で読み込まれ、
インストールされている場合、INSTALLED_APPS として追加されます。

####################
# DYNAMIC SETTINGS #
####################
# set_dynamic_settings() will rewrite globals based on what has been
# defined so far, in order to provide some better defaults where
# applicable. We also allow this settings module to be imported
# without Mezzanine installed, as the case may be when using the
# fabfile, where setting the dynamic settings below isn't strictly
# required.
try:
    from mezzanine.utils.conf import set_dynamic_settings
except ImportError:
    pass
else:
    set_dynamic_settings(globals())

set_dynamic_settings では、以下の処理を行っており。
インストールされていたら、INSTALLED_APPSに追加を実現しています。

    # Setup for optional apps.
    optional = list(s.get("OPTIONAL_APPS", []))
    for app in optional:
        if app not in s["INSTALLED_APPS"]:
            try:
                __import__(app)
            except ImportError:
                pass
            else:
                s["INSTALLED_APPS"].append(app)

3. template内の compressの記載と使用時の注意点

base.html 内では、
以下のように compress するcss/js を記載しています。

template 内の compressの記載

  • css
    {% block extra_css %}{% endblock %} が継承ページ側で記述していく、
    css ブロックになります。継承ページ側で記載したcss もまとめて圧縮されます。

{% compress css %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.css" %}">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{% static "css/bootstrap-rtl.css" %}">
{% endif %}
{% ifinstalled cartridge.shop %}
<link rel="stylesheet" href="{% static "css/cartridge.css" %}">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{% static "css/cartridge.rtl.css" %}">
{% endif %}
{% endifinstalled %}
{% block extra_css %}{% endblock %}
{% endcompress %}

  • javascript
    js についても同じように、{% block extra_js %}{% endblock %} が継承ページ側で記述していく、
    js ブロックがあります。

{% compress js %}
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}"></script>
{% block extra_js %}{% endblock %}
{% endcompress %}

使用時の注意点

{% block extra_js %}{% endblock %} 継承ページ側で、
外部サイトのjavascript 読み込み記載をしたところ以下のエラーが出力され、
Internal server error になりました。

UncompressableFileError at /blog/Make_sure_you_are_not_calling_WARNING_on_wicket/  
'https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.4/gist-embed.min.js' isn't accessible via COMPRESS_URL ('/static/') and can't be compressed

外部サイトのファイルは圧縮できないので、
記載している場合は、記載の移動が必要になります。

ちなみに、compressedをON にすると、
このサイトだと4点ほど加点されました。。

追記

続きを書きました。
django-compressor デフォルトの設定を少し変えてみる
gzip の圧縮設定と、css の圧縮方法の変更についてです。

以上です。

コメント

カテゴリー

最近の投稿