btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

Web制作全般

.htaccess で gzip 圧縮してデータ転送量を少なくする方法。

投稿日:

メモ的エントリー。
タイトルのまんまです。

Web ページを表示するときには、まず HTML やら CSS やら JavaScript やら 画像やらをダウンロードする必要があります。
それら各ファイルを圧縮することで転送量を小さく抑え、結果的にパフォーマンス向上(時間短縮)に繋げましょう、というお話。
ページのつくりにもよりますが、70~80% くらいフツーに圧縮されちゃいます。強力。

自宅サーバーや専用サーバーを使ってる場合は Apache の設定を直接いじることも可能ですが、今回はとりあえずパス。
httpd.conf あたりを触ることになるんでしょうけど。

あと、「gzip」とは何ぞや、というのも、正直よく分かりません。
昔から使われてるし一番普及してるし圧縮率も高いし使用制限とかもフリーだし標準化もされてるし、っていう感じなので、あまり深く考えず乗っかった方が良さげかな、と。

.htaccess での gzip 圧縮設定方法

さて、gzip 圧縮するには、「mod_deflate」モジュールを使います。
(ただ、これは Apache 2.x 系の場合で、Apache 1.3 とかの場合は「mod_gzip」を使うそうです)
で、これを .htaccess で設定するワケですが、ただ圧縮するだけなら以下の一行を書いてアップするだけでOK。

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

他にも色々細かく設定できるみたいなんですけどね。圧縮率とか。
そんなにこだわらず「圧縮できりゃいいや」っていう(僕みたいな)人ならこの一行で充分でしょう。

「AddOutputFilterByType DEFLATE」の後に、圧縮の対象とするファイルの形式(メディア・タイプ、コンテント・タイプ)を指定します。
上記の指定は HTML と CSS と JavaScript の3種類で、画像は対象から外しています。
(jpg や gif やもともと圧縮してますし、png も一応最適化してるので、gzip 圧縮したところでそれほど効果は望めない)
まぁ、通常はこの 3 つで大丈夫なハズ。

ちなみに、PHP のページについても、「text/html」に含まれてます。
デフォルトでそうなのか、meta タグで「content=”text/html; charset=UTF-8″」というような設定をしているからなのか……。
詳しいことは分かりませんけど。

圧縮できてるかどうかの確認は、Firebug の「接続」タブや「YSlow」でも出来るのですが、↓のような便利なサイトもあります。

»GIDZipTest: Web Page Compression (Deflate / Gzip) Test – GIDNetwork

URL を入力したら、圧縮可否だけでなく、圧縮率やレスポンスヘッダーまで表示してくれます。

注意点など

アクセスのたびに圧縮して転送して……ということを繰り返すので、ユーザー数によってはサーバーにかなりの負荷がかかることも有り得ます。
サーバーのスペックや Web システムとの絡みもあるのでケースバイケースになるんでしょうけど、もし動作が重くなったりした場合は別な方法を検討した方が良いかも知れません。

WordPress で gzip 圧縮

WordPress が入ってるサイトに↑の方法を試してみたら、「Internal Server Error」が発生。
どうしたものかと思ったら、そのままズバリのプラグインがありました。

»WordPress › GZIP Output « WordPress Plugins

管理画面から「GZIP Output」を検索して、インストール→有効化するだけです。
設定は特に無し。いや便利。

WordPress 本体のバージョンについては、2.8.3 までしか動作確認されてないっぽいのですが、2.9.2 と 3.0 に入れても(今のところ)ちゃんと動作してます。

参考サイト







-Web制作全般
-, , , , ,

執筆者:


  1. […] .htaccess で gzip 圧縮してデータ転送量を少なくする  […]

  2. […] .htaccess で gzip 圧縮してデータ転送量を少なくする方法。 […]

  3. […] 圧縮等のパフォーマンスチューニングは、下記サイトが参考になりそうです WordPress(Page Speed対応) – 圧縮を有効にする .htaccess で gzip 圧縮してデータ転送量を少なくする方法。 | btmup Blog […]

  4. […] browser caching解決!さくらでmod_expiresが使えるように(Field Archive).htaccess で gzip 圧縮してデータ転送量を少なくする方法。(btmup […]

  5. […] を減らすことができます。」とかって言われたりする場合は.htaccessを編集してファイルの圧縮を有効にしてください。(.htaccess で gzip 圧縮してデータ転送量を少なくする方法。を参照) […]

  6. […] を減らすことができます。」とかって言われたりする場合は.htaccessを編集してファイルの圧縮を有効にしてください。 (.htaccess で gzip 圧縮してデータ転送量を少なくする方法。を参照) […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ウィルス対策ソフトで Illustrator ファイルが上書きできなくなる件。

未だに Illustrator 8.0.1 を Classic 環境でしぶとく使っているのですが、最近こんなエラーが頻発するようになりました。 イラストレーションを保存できません。このファイルは使用中 …

no image

ファーストサーバでCGIが「505 Internal Server Error」になる問題。

久々、ファーストサーバネタです。 まぁ別にファーストサーバが悪い訳ではないんですし、ここに限った話でもないんですけど、なぜか色々ややこしいことになることが多いもんで。 今回は CGI の設置方法につい …

no image

Google Analytics のトラッキングコードがちょっとだけ変更されていた。

Google Analyticsにプロファイルを追加したときに気が付いたのですが、トラッキングコードがビミョーに変わってますね。 ほとんど同じなんですが、2つめのスクリプトの中身がちょっとだけ書き替え …

no image

【更新】Dreamweaver CS4 でテンプレートを適用すると文字化けする件。(CS5 でも発生する模様)

Dreamweaver CS4 で、テンプレートを作成・適用すると、文字化けするという現象が起きました。 結論から言うと、HTML5 でコーディングするときのエンコーディングの設定の解釈にバグがあるよ …

no image

UX と UI の違いを具体例で説明してみる。

どうもまだまだ UX と UI を混同している人が多いっぽいので、具体的な例を挙げて説明してみたいと思います。 「説明」という言葉を使うのは、ちょっとおこがましい気もするんですけどね。 「僕なりの解釈 …