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"
)
先頭にある RequestMiddleware は1番最後に実行されます。

HTML_MINIFY の設定

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

EXCLUDE_FROM_MINIFYING の設定

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

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"])

<!–[if lt IE 9]> 等の条件付きコメントは除去しない

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 だと、うまく認識しているので圧縮はしておくで
以上です。

コメント

カテゴリー

最近の投稿