Google PageSpeed Insights の、
「次のリソースの HTML を縮小すると、サイズを 776 バイト(17%)削減できます。」という
提案に応えるため、django-htmlminインストールして HTML圧縮してみます。

前提

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

  • Python Version
    Python 2.7.8

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


参考サイト


インストールと設定

インストール

  • command

    pip install django-htmlmin
    -----------------------------------------------
    Requirement already satisfied (use --upgrade to upgrade): beautifulsoup4 in /usr/local/lib/python2.7/site-packages (from django-htmlmin)
    Requirement already satisfied (use --upgrade to upgrade): html5lib in /usr/local/lib/python2.7/site-packages (from django-htmlmin)
    Requirement already satisfied (use --upgrade to upgrade): six in /usr/local/lib/python2.7/site-packages (from html5lib->django-htmlmin)
    Installing collected packages: argparse, django-htmlmin
    Successfully installed argparse-1.4.0 django-htmlmin-0.9.1
    -----------------------------------------------
    

  • 確認

    pip list | grep django-htmlmin
    -----------------------------------------------
    django-htmlmin (0.9.1)
    -----------------------------------------------
    

settings.py MIDDLEWARE_CLASSES追記

当ブログは、django-request使用しているため、
request.middleware.RequestMiddleware一番上に記載しました。
※ログ書き込んでるミドルウェアなので、ライフサイクルの外で一番最初に書くよね
云う判断です。
また、GZip middlewareセキュリティホールがあるから、気をつけて使ってねと、
こちら記載があったので、使っておりません。

  • Cache 関連のミドルウェアを使っていない場合

    # other middleware classes
    'htmlmin.middleware.HtmlMinifyMiddleware',
    'htmlmin.middleware.MarkRequestMiddleware',

  • Cache 関連のミドルウェアを使っている場合

MIDDLEWARE_CLASSES = (
    'django.middleware.cache.UpdateCacheMiddleware',
    'htmlmin.middleware.HtmlMinifyMiddleware',
    # other middleware classes
    'django.middleware.cache.FetchFromCacheMiddleware',
    'htmlmin.middleware.MarkRequestMiddleware',
)

  • Cache 関連のミドルウェアを使っていて、且つ、django-request使っている場合

IDDLEWARE_CLASSES = (                                                                                                                                                              
    # django-request をtopに記述
    "request.middleware.RequestMiddleware",
    "mezzanine.core.middleware.UpdateCacheMiddleware",
    "htmlmin.middleware.HtmlMinifyMiddleware",
    # other middleware classes
    "mezzanine.pages.middleware.PageMiddleware",
    "mezzanine.core.middleware.FetchFromCacheMiddleware",
    "htmlmin.middleware.MarkRequestMiddleware"
)
先頭にある RequestMiddleware1番最後に実行されます。

HTML_MINIFY設定

DEBUG モードの設定で、切り替わるようなので、未設定にしておきます。
DEBUG = True場合、 HTML_MINIFY = False
DEBUG = False場合、 HTML_MINIFY = True、になります。

EXCLUDE_FROM_MINIFYING設定

HTML 圧縮の対象外にするディレクトリを指定します。
README.rst通り、 ADMINURL設定します。

EXCLUDE_FROM_MINIFYING = ('^admin/','^ja/admin/','^admin_keywords_submit')

  • ^admin_keywords_submitついて

mezzanine blog 投稿を行う際、上記 URL ajax リクエストを送信しているようです。
上記を設定しないと、以下のようなエラーが出力され、blog 投稿が失敗します。

invalid literal for int() with base 10: '<html><head></head><body>'

KEEP_COMMENTS_ON_MINIFYING設定

デフォルト動作だと、HTML内のコメントは全て削除するようです。
削除したくない時は、以下のように
KEEP_COMMENTS_ON_MINIFYING True設定します。

KEEP_COMMENTS_ON_MINIFYING = True

これで設定は完了です。
HTTPサーバの再起動で HTML 圧縮が行われるようになります。


HTMLの圧縮要領の説明

出力された HTML 全ての改行を除去とかするわけではなく、
それなりに「いい感じ」でサイズを小さくしてくれます。

preタグ、scriptタグ、 textarea タグ内は、スペースも改行も除去しない。

htmlmin/minify.py 内に以下のように記載されています。
EXCLUDE_TAGS含まれるタグは、スペース、改行の除去がスキップされるようです。

EXCLUDE_TAGS = set(["pre", "script", "textarea"])

htmlmin/minify.py 内に以下のように記載されています。
条件付きコメントはKEEP_COMMENTS_ON_MINIFYING False場合でも、
除去されません。

# see http://en.wikipedia.org/wiki/Conditional_comment
re_cond_comment = re.compile(r'\[if .*\]>.*<!\[endif\]',
                             re.MULTILINE | re.DOTALL | re.UNICODE)
re_cond_comment_start_space = re.compile(r'(\[if .*\]>)\s+',
                                         re.MULTILINE | re.DOTALL | re.UNICODE)
re_cond_comment_end_space = re.compile(r'\s+(<!\[endif\])',
                                       re.MULTILINE | re.DOTALL | re.UNICODE)

適用後、いくつかページを確認したところ、
問題なく表示はできているようです。

issues見ると、
パターンによってはうまく動作しないケースも記載もあるようなので、
ページ構成によって、使える使えないはあるのかもしれません。


HTML 圧縮後の PageSpeed Insights得点 について

HTML圧縮後のPageSpeed Insights得点は、
下がります。。

条件付きコメント部が、以下のように圧縮されますが、

<script src="/static/CACHE/js/4462284b3590.js" type="text/javascript"></script><!--[if lt IE 9]><script src="/static/js/html5shiv.js"></script> <script src="/static/js/respond.min.js"></script><![endif]--></head>
1行で記述すると、
PageSpeed Insights条件付きコメント内の記載も読み込みにいってそうな挙動をしています。
Chrome だと、うまく認識しているので圧縮はしておくで
以上です。

コメント