gzip圧縮と画像減色で、サイトの速度を最適化する方法（1/2）

ページの表示速度が遅いことは、ユーザーにとってストレスを感じさせ、離脱の大きな要因となります。またわずかながらもGoogleにおけるSEOにも影響を与えると言われています。そこで今回はPageSpeed Insightsの分析結果をヒントに、gzip圧縮と画像減色を行い、サイトのパフォーマンス向上を試みてみたいと思います。

Googleアナリティクスで、PageSpeedの提案を見てみる。

Googleアナリティクスのレポート画面において、行動 > サイトの速度 > 速度の提案から見ることができる PageSpeedの提案 タブでは、サイトの速度改善に取り入れるべき方法の数を PageSpeed Insights から取得して表示してくれています。提案数をクリックすることで、具体的な提案の概要を表示できます。

何も施していない状態での当社トップページの分析結果です。
[！]修正が必要 に以下が表示されています。

圧縮を有効にする
画像を最適化する
スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除する
ブラウザのキャッシュを活用する

この状態から、すぐに導入できそうな圧縮を有効にする（→gzip圧縮）と画像を最適化する（→画像の減色）を行い、どれだけパフォーマンスに差が出るか見ていきたいと思います。

gzip圧縮を行うというのは、サーバーとブラウザとの間でやりとりされるデータを圧縮して転送し、ブラウザが解凍表示することで通信データ量を抑えることをいいます。繰り返しの多い、規則性のあるテキストデータに有効で、画像には効果がありません。

以下のページでは、図表入りで分かりやすい解説が記載されています。

参考：gzip圧縮のしくみ · t32k/speed · GitHub

なお、PageSpeed Insightsの診断画面の下部からは、すでに圧縮（非gzip圧縮／改行削除）されたhtml/JS/CSSファイルおよびロスレス圧縮された画像ファイルを、まとめてダウンロードすることが可能です。
まずは簡単に取り入れてみたいということであれば、これらをこのままアップロードするだけでも、多少の効果は期待できるかもしれません（※後述しますが、PageSpeed Insightsからダウンロード可能な減色画像は、あまり優秀なものではありません）

このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。

gzip圧縮を有効にする3つの方法

gzip圧縮を有効にするには以下の3つの方法があります。
利用しているサーバーや環境によって最適なものを選択してください。

.htaccessに記述して有効にする（mod_deflateで、一括指定）
→サーバーが対応していれば一番簡単に導入できます。
php.iniを編集して有効にする（zlibで、PHPによる出力を圧縮指定）
→WordPressなどPHPで構築されたサイトで有効です。
自分で個別にgzipファイルを作成して有効にする（.htaccessにて振り分け）
→gzipファイルを自身で作成し、対応ブラウザにのみ転送します。

mod_deflateとはmod_deflateはコンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下します。Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法[OXY NOTES]

apacheWebサーバでは、apacheモジュールのmod_deflateを利用して、gzip圧縮に対応しているクライアントに対して、コンテンツを圧縮して転送することが可能です。gzip でコンテンツを圧縮することにより、ネットワークの負荷を軽減させることができ、レスポンススピードの向上が期待できます。しかしながら、mod_deflateが利用できない場合もあります。phpの拡張 zlibを利用することでコンテンツの圧縮をすることが可能になります。PHPでコンテンツをgzip圧縮する方法 zlib編[薫のHack]

.htaccessの記述サンプル

<IfModule mod_deflate.c>
#モジュールを有効化
SetOutputFilter DEFLATE
#レガシーブラウザへの対応
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#対象から画像を除外
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
#プロクシサーバへの対応
Header append Vary User-Agent env=!dont-vary
</IfModule>

.htaccessに記述する場合、上記の内容を追加してください。
記述に関しては、Apacheドキュメントを参考にしました。
この場合、画像を除くhtml/CSS/JSなどすべてのファイルが圧縮されて転送されます（対応ブラウザのみ）。

Apacheドキュメント
Apache モジュール mod_deflate

※共用レンタルサーバーの場合、mod_deflateによる圧縮が使えない場合があります。
例：さくらやエックスサーバーは使えるが、お名前サーバーは使えないなど。

php.iniを編集して有効にする

zlib.output_compression = On

php.iniに上記編集を加えれば、zlibによる圧縮が有効になります。
この場合、PHPにより出力されるファイルが圧縮されて出力されます。WordPressの場合、そのままだとCSSやJSなどは圧縮の対象にはなりません。

※php.iniの編集方法は各サーバーごとに異なります。レンタルサーバーの場合、各ヘルプページなどで検索してみてください。
例：管理画面から編集するエックスサーバー、追記部分のみのファイルをアップするお名前サーバーなど。

もしWordPressを使っていて、CSS/JSも簡単に圧縮して出力したいのであればAutoptimizeという便利なプラグインがあります。アップ→有効化して、CSS/JSのチェックボックスをチェックして保存すれば、それぞれ圧縮されて出力されます。ただし投稿記事内のscriptタグやstyleタグがフッタにまとめられてしまうようですので、ブログなどの場合、記事内でscript埋め込みを使っていたり、styleタグを使っている場合そのままでは使用できません。

Autoptimizeプラグインについて詳しく解説されています。
「Autoptimize」CSSとJavaScriptを縮小し最適化するプラグイン。[ミュンヘン]

個別にgzipファイルを作成して振り分ける

Windows環境の場合、おなじみのLhaplusを使ってgzip（gz）ファイルを作成します。インストール（”[圧縮]のサブメニュー項目”の.gz にチェックを入れて）して、対象ファイルを右クリック→圧縮→.gz で簡単に作成できると思います。Mac環境であればターミナルのコマンド入力で作成できます。

Macの該当コマンドについては、以下に一覧で解説されています。
覚えておきたい TAR などの解凍・圧縮コマンドの使い方まとめ[Macとかの雑記帳]

作成後は画像のように、元ファイルと同じ場所にそのままの名称で格納してください。
対象ファイルをすべて圧縮／格納したら、.htaccessに下記の記述を加えます。
※名前を変更すると.htaccessの記述が効かなくなります

#mod_rewriteを有効化
RewriteEngine on
#相手が対応していればリクエストされたファイル名.gzを返す
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

#MIMEタイプを指定（css）
<FilesMatch "\.css\.gz$">
	ForceType text/css
	AddEncoding x-gzip .gz
</FilesMatch>

#MIMEタイプを指定（javascript）
<FilesMatch "\.js\.gz$">
	ForceType application/x-javascript
	AddEncoding x-gzip .gz
</FilesMatch>

#MIMEタイプを指定（html）
<FilesMatch "\.html\.gz$">
	ForceType   text/html
	AddEncoding x-gzip .gz
</FilesMatch>

記述に関して、以下の記事を参考にさせていただきました。
改行削除するくらいなら gzip したらいいじゃない[www WATCH]
gzip圧縮でCSSやJSなどの転送量を減らす方法[Syncer]

※共用レンタルサーバーでWordPressを運用している場合、レンタルサーバーの環境によってzlibでの圧縮と、自作したgzファイル使用とを組み合わせて使用することになると思います。その際もし404エラーが出て.gzファイルが読み込まれなかった場合は、.htaccessに記述を追加する場所を、WordPressのパーマリンク設定の記述より下に挿入してみてください。
参考：WordPress gzip化したcss, jsが404で読み込まれない

gzip圧縮が有効かを確認する。

最後に以下のサイトで圧縮が有効になっているか確認しましょう。
HTTP Compression Test

有効になっていれば、上記の画像のような表示になるはずです（削減結果もあわせて表示されます）。長くなりましたので、画像減色とPageSpeed Insightsでの改善結果については、こちらに続きます。

記事投稿にあたり参考にさせていただいたページ：
gzip圧縮でCSSやJSなどの転送量を減らす方法[Syncer]
改行削除するくらいなら gzip したらいいじゃない[WWW WATCH]
WordPressサイト用の.htaccess例[dogmap.jp]
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法[OXY NOTES]

gzip圧縮と画像減色で、サイトの速度を最適化する方法（1/2）
gzip圧縮と画像減色で、サイトの速度を最適化する方法（2/2）

JSを使わずCSSを書き換える~をマネしてみた。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧