2012年10月25日木曜日

mod_pagespeedの超簡単なインストールと設定 CentOS+Apache

mod_pagespeedというウェブページの表示を高速化するGoogle謹製Apache組み込みモジュールがあります。
コンテンツの内容はそのままに、ファイルのダウンロード回数とダウンロードサイズを最小化することで、ウェブページの表示を速くします。対象はHTMLはもとより、CSS、JAVAScript、画像ファイルにまで及びます。

今回これをCentOSにインストールしてみました。
といっても、ものすごくあっさり使えるようになります。

1.mod_pagespeedパッケージをダウンロード

Installing mod_pagespeed From Packages
上のページに行き、右側から該当のファイルをひとつダウンロードします。
「Latest Beta Version」はベータ版、「Latest Stable Version」は安定版です。
CentOSの32ビット版なら「mod_pagespeed 32-bit .rpm (CentOS/Fedora)」を64ビット版なら「mod_pagespeed 64-bit .rpm (CentOS/Fedora)」をダウンロードします。

2.mod_pagespeedをインストール
そうしたら2つコマンドを入れます。
# yum install at
すでにatがインストールされていたら実行する必要ありませんが、インストールされていたら何も起こらないだけなので一度やっておくといいと思います。
次に、mod_pagespeedをインストールします。
# rpm -U mod-pagespeed-*.rpm
勝手にインストールされて、すぐに終わります。

おめでとうございます。以上で、インストールは終わりです。
すでにApacheに組み込まれていて、mod_pagespeedが有効化されています。
Apacheを再起動してください。
# /sbin/service httpd restart
試しに、何かウェブページを表示してみましょう。もちろん見た目は何も変わらないはずです。
ウェブブラウザのソース表示機能でHTMLソースを表示してみるとHTMLに含まれるJAVAScriptのスペースや改行が詰められていたり、画像がHTML中にエンコードされているかもしれません。
また、サーバーの /var/www/mod_pagespeed の下にキャッシュが作成されているはずです。

はじめはデフォルトの設定で使うのが安全だと思いますが、動作をカスタマイズしたい時には /etc/httpd/conf.d/pagespeed.conf を書き換えます。
とりあえず、mod_pagespeedを無効にしたいときは pagespeed.conf の「ModPagespeed on」を「ModPagespeed off」に変更してください。

pagespeed.confの詳しい設定方法は以下に記載していますので、ご覧ください。
mod_pagespeedの統計情報を使う
・フィルターをカスタマイズする(作成中)

CSSスプライトでウェブページを高速化する方法

CSSスプライト画像を作成するものすごく簡単な方法

ウェブサイトにとってページの表示速度は重要で、ウェブサイトを見ていて表示速度が遅いと、ページを閲覧していくのが億劫に感じます。SEO的観点から考えても、ページの表示速度が遅いことが不利に作用することをGoogle自身が言っています。
ページ表示速度が遅い原因は、サーバーのスペックや回線速度など様々ですが、ページ内に画像がたくさんあるような場合には、それらのダウンロードに時間がかかっている可能性があります。サーバースペックやネットワークインフラが悪ければ、なおのこと遅くなります。
動的に作成されるような画像は、簡単に対策のしようのない面があるのですが、静的に配置されているアイコンやバナー、ボタン等の画像については、ひとつにまとめることでダウンロードを一回かぎりにして高速化することができます。ひとつひとつのダウンロードのたびに、サーバーとのHTTP通信が起こり、TCPセッションを作ることを考えると、オーバーヘッドが画像数に比例して削減されることが理解できます。

こうした画像をまとめて高速にページを表示する手法をCSSスプライトと言います。
GoogleがYouTubeのページで行ったりして、現在ではウェブページの高速化手法として一般的になっています。

具体的にはテーブルやリスト等のエレメントの背景に画像を設定できることを利用します。
背景画像の表示オフセット座標を指定することで、画像中の左上基点座標を移動します。そして表示する幅と高さを画像サイズに限定することで、画像中の一部分だけをトリミングして表示できる仕組みです。

HTMLやCSSの知識のある方は、ウェブページで使う画像をひとまとめにした大きな画像を作成して、いろいろ試行錯誤すればできるのではないかと思います。
画像をまとめるためのツールもあるようですが、私はウェブのサービスで作成してます。HTMLも自動生成してくれます。
そのような中で一番簡単にできる、普段使っているサイトでのCSSスプライトの使い方をご紹介します。

・画像をアップロードする
「参照」をクリックしてCSSスプライト座標に含める画像をアップロードします。
PNG、GIF、JPEGの各ファイルか、それらをまとめてZIPに圧縮したファイルをアップロードできます。
次々と追加アップロードしていくと、下の枠の中にアップロードした画像が追加表示されていきます。
スプライト画像は最終的にソートされて作られるので、アップロードする順番は意識しなくてもかまいません。

・アップロードした画像を確認する
アップロードした画像の中で不要なものがあったときは、削除して取り除くことができます。

・CSSスプライトを作成する
「CSSスプライト作成」をクリックします。
画像間隔はCSSスプライト画像中のひとつひとつの画像の間隔です。Safariの不具合やユーザーがフォントサイズを変更した時の対応用だと思われますが、通常はデフォルトのままで特に問題ありません。
作成するCSSスプライト画像の保存形式をPNG、GIF、JPEGから選べますが、オールマイティなデフォルトのPNGを使うのがいいのではないかと思います。

・画像をダウンロード
生成されたCSSスプライト画像をダウンロードします。
また、同時に生成されるHTMLコードを使うためにダミー画像もダウンロードします。これはIMGタグで必須となるSRC属性にダミーとして指定するためのもので、縦横1ピクセルサイズの透過色画像です。これがないと、IMGタグで表示した位置に画像のプレースホルダーが出てしまいます。
←生成されたCSSスプライト画像
生成できるHTMLは「1画像1行」「クラス定義に分ける」の2種類あります。
「1画像1行」は、ひとつひとつの画像を一行のHTMLで記述されていますので、シンプルで分かりやすく、使いやすいHTMLになっています。
「クラス定義に分ける」を選ぶと、スタイル設定を別の場所に記述するHTMLが生成されます。こちらは、CSSファイルに外出しして使いまわすような用途や、HEAD内に書いてBODY内の記述をシンプルにしたいときに使えます。

以上ですが、普通は何も考えなくても、画像をアップロードして、作成ボタンをクリックするだけで使えます。
CSSスプライト作成サイト

ウェブサイトの表示を速くしたいような方には、CSSスプライトは効果の表れやすい検討する価値のある手法だと思います。