Webサイト高速化のために行った6つのこと（４）|カメラのちプログラミング♥ところによりカフェ

Webサイト高速化のために行った6つのこと（４）

2017/02/15 16:20

Webサイト高速化のために行ったこと…今回は第四回です。
Djangoで出力したHTMLを圧縮する方法についてまとめました。
１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）
２．ブラウザのキャッシュを有効にする（静的コンテンツにキャッシュを導入する）
３．CSSを縮小する
４．HTMLを縮小する（当記事）
５．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（※一部）
６．読み込み中のときにloading indicatorを表示する（これはユーザー体験を高めるためのおまけ）
では、さっそく行ってみます。
Djangoって機能がモリモリなので、HTMLの圧縮も
標準で入っていそうなものですが、残念ながらなさそうです。（Django1.8)
というわけで、外部アプリを pip でサクッとインストールします。
django-htmlminをセットアップする
他のライブラリを使おうかとも
思いましたが、導入実績が多そうだったのでこれをチョイス。
django-htmlmin
インストール
```
$ pip install django-htmlmin
```
依存パッケージも一緒にインストールされます。
setting.pyへの追記
```
MIDDLEWARE_CLASSES = (
    ...
    # 以下２行追記
    'htmlmin.middleware.HtmlMinifyMiddleware',
    'htmlmin.middleware.MarkRequestMiddleware',
)

# minify HTML
EXCLUDE_FROM_MINIFYING = (
    '^admin/',
)
```
ミドルウェアへの追記と、django-htmlmin 固有の設定を記載します。僕の場合は、少なくとも管理画面は圧縮する必要ないので除外しました。
（実際にはadminっていうパスでは運用してないですが）
Ajaxを利用したフォーム周りで不具合が起きたりするケースがあるようなので、
動作確認は必須です。
これで導入は完了です。サーバーを再起動してソースを確認してみます。
```
<!DOCTYPE html><html lang="ja"><head><meta content="a4u2bJNGWa13LWeuS90PTw9N_o1wSg7DInmhmsVKOKs" name="google-site-verification"/><title>photo.pics</title><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><meta content="風景写真好きWEBエンジニアが日々の発見をゆるやかにまとめつつ、ときどき風景写真も投稿しつつほげほげするサイト。" name="description"/><meta content="photo.pics,4to.pics,カメラ,風景,写真,技術,web,フロントエンド,バックエンド,サーバー,server,Python,Django,blog,ブログ" name="keywords"/><style>#loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background-color: #ffffff; background-image: url(/images/loading.gif); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; }</style></head>
```
こんな感じで圧縮されていることがわかります。
なお、 DEBUG = True の状態では圧縮されませんのでテストのときはご注意を。
また、このライブラリの素晴らしいところは、
script タグ、pre タグ、textarea タグ内はスペースも改行も除去されないところですね。
追加したい場合は EXCLUDE_TAGS をセットすれば良さそう。
参考：mezzanine django-htmlmin を使ってhtmlを圧縮する
個人的にちょっと気になったのは、HTMLを圧縮してもしなくても、Google PageSpeed Insight上では
圧縮判定されてたところです。なんでだろう？
１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）
↑これを対応した時点で圧縮判定されちゃってたようです。^^;

とはいえ、たとえ 1 byte でも容量は小さいほうがいい！ってことで圧縮対応してみた次第ですー。

↑応援よろしくお願いします！m(_ _)m
<2017/02/15 16:16>
サーバー
web site ウェブサイト高速化 mod_deflate apache google pagespeed insights 静的コンテンツ圧縮 CSS HTML JS loading indicator Django django-htmlmin compress
新しい記事へ
[Android] フォトフレームアプリを公開しました
古い記事へ
Webサイト高速化のために行った6つのこと（３）

django-htmlminをセットアップする

インストール

setting.pyへの追記

自己紹介的な何か

Popular Articles