mod_pagespeed を利用して純粋に速度を高める

Web サイトの高速化は Google に任せましょう

mod_pagespeed は Google が Apache HTTP サーバー用に提供しているモジュールです。このモジュールを使用すれば、Web サイトのページのロード時間を改善することができます。また、Web サイトを高速化するためのベスト・プラクティスのすべてをプログラムによって自動的にサイトに組み込むことができ、ほとんど構成を必要としません。Apache で Web サイトをホストしている場合、mod_pagespeed を使用することで、サイトの速度を迅速かつ容易に改善することができるのです。

Michael Abernethy, Programmer, Freelance

Mike AbernethyMichael Abernethy は多種多様な技術を扱い、また広範にわたる顧客と共に作業を行ってきました。彼が取り組んでいるのは、より優れていて洗練された Web アプリケーションを作成すること、それらのアプリケーションを実行するブラウザーの限界をテストすること、そしてそのアプリケーションの作成および保守をもっと容易に行えるようにする方法を見つけることです。コンピューターで作業をしていないときは、子供と本を読んだりして過ごしています。



2012年 3月 01日

はじめに

前提条件

mod_pagespeed を使用するには、32 ビットまたは 64 ビットの Linux 上で実行される Apache バージョン 2.2 に mod_deflate モジュールをインストールしておく必要があります。

現状では、mod_pagespeed は Windows や古いバージョンの Apache には対応していません (mod_pagespeed のドキュメントや FAQ から推測する限り、これらに対応することはしばらく期待できそうにありません)。

Google が提供している Apache モジュール mod_pagespeed は、Apache Web サーバーにそのままインストールできる「ドロップイン」モジュールとして設計されており、インストールした瞬間からユーザー側でのページの表示速度が大幅に向上します。Web サイトの応答速度を改善する方法がわからない場合や、構成が最適でないために Web サイトのパフォーマンスが得られていない場合には、このモジュールこそ皆さんが求めるソリューションとなるかもしれません。例えば、Wordpress をインストール時のデフォルト設定のまま使用してブログを運営している場合には、mod_pagespeed モジュールによって大きな違いがもたらされる可能性があります。

mod_pagespeed モジュールはページのロード時間を最適化するためのベスト・プラクティスを 1 つのモジュールにまとめたものであり、そうしたベスト・プラクティスを実践するのに必要なステップを自動的に実行します。

速度の定義

インターネット接続の速度がどうであろうと、利用者は常に Web ページのロードを速くしたいと望んでいます。一方で、Web ページのコンテンツを提供する側も、Web サーバーからのコンテンツの送信を高速化したいと望んでおり、それには 2 つの理由があります。1 つは、Web サーバーの速度が遅い企業は顧客を失うことになるからであり、もう 1 つは、個々のページのロードを高速化した企業はサーバーに余裕ができるため、あらゆる人々にページを提供できる機会がより多くなるからです。ある企業の Web ページを皆さんが訪れるのは 1 日 1 回かもしれませんが、企業はその同じ Web ページを他の顧客に 1 日 10 万回提供しています。そうした企業にとって、たとえわずかな速度の向上であっても非常に大きな効果があります。

この記事では、ユーザーの観点から「速度」をページのロード時間として定義します。www.google.com のように瞬時にロードされる Web ページは、速いとみなします (www.google.com のページのロード時間は非常に小さな値です)。逆に、かつての Pentium II 600 MHz で動作する 1 台のサーバー上にホストされた、40 個の巨大な画像ファイルを含む架空サイトは、遅いとみなします (このサイトのページのロード時間は非常に大きな値です)。また、1 日の訪問者が数人のみの場合には高速な Web ページも、10 分間に数千人が訪問した場合には信じられないほど遅くなる可能性があります。つまり、「速度」は A から B に至るまでに要する時間として定義され、その場合の A はアドレス・バーに何かを入力した後でリターン・キーを押した瞬間であり、B はブラウザーでページのロードが完全に完了した瞬間です。

Web サーバーの観点から見ると、(ハードウェアを変更せずに) 速度を高める最善の方法は、送信するデータ量を少なくした上で、そのデータを高速に送信することです。もう少し具体的に言えば、マシンのレイテンシー (レイテンシー = 応答時間) を低く抑え、転送されるデータのサイズ (転送されるデータの実際のキロバイト数) を小さくする必要があります。つまり、Web サーバーの観点とユーザーの観点の両方から Web サイトを「高速化」するためには、サーバーのレイテンシーを低く抑えると同時に、転送されるデータのサイズを小さくする必要があるということです。

速度を高める方法

Web サイトを高速化するために考えられる方法は次の 5 つのカテゴリーに分けられます。キャッシュを最大化する方法、参照を最小限にする方法、各リクエストのオーバーヘッドを最小限にする方法、データ・サイズを最小限にする方法、そしてブラウザーの描画を最適化する方法、という 5 つです。それぞれのカテゴリーは、「最大化する」や「最小限にする」といった限界の状態にする動作になっており、ある機能や設定を「オンする」とか「オフする」などの単純なソリューションではないことに注意してください。では、各カテゴリーを詳細に調べ、そのカテゴリーで何を行うのかを説明しましょう。

キャッシュを最大化する

ブラウザーはファイルをローカルにキャッシュすることができるため、ページをロードするたびに多くのファイルをロードする代わりに、それらのファイルのローカル・コピーを使用することができます。この動作は (ブログ・ページなど) 動的な Web ページにはあまり意味がありませんが、ページと共にロードされるさまざまな画像、CSS ファイル、JavaScript ファイルに関してはどうでしょう。これらのファイルは、変更される場合があるとしても稀です。同じ CSS ファイルを取得するために何度もサーバーにアクセスする必要はありません。これは、サイト全体に対して 1 つの CSS ファイルを使用する場合はなおさらです。ユーザーがロードするすべてのページで同じ CSS ファイルを使用していれば、サーバー上にあるファイルを使用する代わりに、ローカルにキャッシュされたコピーを使用しても同じなのです。

実際には、ブラウザーはサーバーからキャッシュ・コマンドを取得します。サーバーはブラウザーに対し、それらの項目が有効かどうか、またそれらの項目がどの程度の期間有効なのかを伝えることができます。つまり、サーバーはそれぞれのファイルにこれらのコマンドを追加することができるのです。このように、サーバーの呼び出しではブラウザーに対して、JS ファイル、CSS ファイル、JPG ファイルはキャッシュに入れ、HTML ファイル、TXT ファイルはキャッシュに入れないように、指示することができます。さらにサーバーはブラウザーに対し、「これらの CSS ファイルと JPG ファイルは 1 年間有効です」と伝えることができます。ブラウザーはこれらのコマンドを解釈し、サーバーが以下のように伝えていると判断します。「ここにある JPG ファイルは 1 年間変更されることがないため、今から 1 年間は、サーバー上のいずれかのページでこのファイルが参照されるときは、常にブラウザーのローカル・コピーを使用する必要があります。」

参照を最小限にする

どのような種類のファイルであれ、サーバーからブラウザーにファイルが送信される際には、各ファイルに対して HTTP 接続を確立するためのオーバーヘッドを伴います。言い換えると、各ファイルに対してサーバーとブラウザーとの間で通信チャネルを確立する必要があります。一般的な Web サイトのほとんどでは、数十個のファイルを転送する必要があり、その都度サーバーは一定の時間をかけて接続を確立するため、このオーバーヘッドを伴うことになります。従って、参照の数を減らすことにより、サーバーが接続を確立するために必要とする時間を減らすことができます。

この目標を実現するための主な方法は明らかです。Web ページ上にある、転送が必要なファイルの数を減らせばよいのです。例えば、ある Web ページに 10 個の画像がある場合、10 個の HTTP 接続を作成する必要があるかもしれませんが、ファイル数が最小限になるようにリソースを組み合わせることで、必要な接続の数を減らすことができます。そのための方法の例として、すべての jQuery プラグインを 1 つのファイルに入れてしまう方法や、ページ上の小さな画像すべてを組み合わせて 1 つの大きな画像ファイルにした後、その大きな画像のうちの必要な一部のみを CSS を使用して表示する方法があります。

各リクエストのオーバーヘッドを最小限にする

各 Web ページをロードするときや、POST や GET を呼び出すときには、ブラウザーはクッキーなどの特定の情報をサーバーに伝えます。これには当然、時間がかかります。ページをロードするたびにクライアントからサーバーにクッキー情報をアップロードする必要があるためです。Web サイトによっては膨大な情報をクッキーに保存しており、アップロードする必要がある情報が増えれば増えるほど、それにかかる時間は長くなります。

より望ましい設計としては、クッキーに保存する情報をできるだけ少なくし (例えばユーザー ID のみにするなど)、その情報をキーとして使用することで、データベースに保存可能な情報の中から必要なすべての情報を見つけるようにします。この方法により、クッキーの情報をアップロードする時間を大幅に減らすことができます。

データ・サイズを最小限にする

200KB の画像ファイルを送信するよりも 20KB の画像ファイルを送信する方が高速です。このカテゴリーには、この点に関連するあらゆるプラクティスが含まれます。例えば、できれば JPG ではなく GIF を使用する、JavaScript ファイルを縮小化する、本来の画像を送信する代わりにサムネイル画像を送信することで済ます、などの方法があります。

ブラウザーの描画を最適化する

このカテゴリーは難題です。このカテゴリーには、最適化された CSS セレクターを使用するなどのプラクティスがありますが、多くの場合、サイトは既に設計済みであり、CSS ファイルを担当する人はサーバーのパフォーマンスの最適化を担当する人と同じではありません。また、このカテゴリーに含まれる手段は、最低限の成果しかもたらしてくれない結果になりがちです。

理論的な説明はこのくらいにして、このモジュールをダウンロードして実行してみましょう。何といっても、このプラグインの素晴らしいところは、単純に Apache に追加するだけでよく、速度向上のためのさまざまな詳細事項を気にする必要はないことです。

mod_pagespeed をダウンロードして、インストールし、構成する

mod_pagespeed のパッケージをダウンロードし (「参考文献」のリンクを参照)、適切な Linux コマンドを実行してシステムに mod_pagespeed をインストールします。

Linux システムに mod_pagespeed をインストールしても、まだ mod_pagespeed は Apache と関連付けられていません。インストールが完了したら、作業を楽にするために、最初にインストールした場所から Apache の conf ディレクトリーに pagespeed.conf ファイルをコピーするようにお勧めします。また、mod_pagespeed.so ファイルも Apache の modules ディレクトリーにコピーします。最後に、キャッシュを保存するためのディレクトリーと、mod_pagespeed モジュールが生成するファイルを保存するためのディレクトリーを作成します。ここではそれぞれのディレクトリーに cache、files という名前を付けることにします。

次に、mod_pagespeed モジュールを使用するように Apache に指示する必要があり、そのためには http.conf ファイルを編集する必要があります。http.conf ファイルの最後に以下の行を追加します。

リスト 1. Apache の http.conf ファイルを変更する
Include "{your-path-to-this-file}/pagespeed.conf"

次に、上記のファイルとディレクトリーへの正しいパスを指すように pagespeed.conf を以下のように少し変更する必要があります。

リスト 2. pagespeed.conf ファイルを変更する
# at line 1 of the file
LoadModule pagespeed_module {your-path-to-this-file}/mod_pagespeed.so

# down at line 25-26 in the file
ModPagespeedFileCachePath "{your-'cache'-file-path-here}"
ModPagespeedGeneratedFilePrefix "{your-'files'-file-path-here}"

そして最後に、Apache サーバーを起動します。


インストールした mod_pagespeed をテストする

いくつかの項目をチェックし、インストールした mod_pagespeed が適切に動作しているかどうかを確認します。当然ですが、Apache が適切に起動していることを確認します (起動していない場合には mod_pagespeed のインストールと構成が適切ではなかったということです)。次に cache フォルダーを調べ、mod_pagespeed が cache フォルダーに適切に書き込んでいるかどうかを確認します。

今度は作業対象のサイトの Web ページを訪れます (そのページには JS ファイルや CSS ファイルなどが含まれている必要があります)。そのページを訪れたら、cache フォルダーを調べます。cache フォルダーには、gzip されるか圧縮されることになる、縮小化可能なファイル ( JS ファイルや CSS ファイル) が含まれているはずです。これらのファイルがあれば、mod_pagespeed のインストールと構成が適切だったかどうかの最初のチェックをクリアしたことになります。

最後のチェックとして、サーバーから返送されたレスポンス・ヘッダーを確認します。この確認には Firebug や Google の Page Speed などのツールを使用することもでき、さらにはレスポンス・ヘッダーを検索するための PHP コードを作成する方法もあります。レスポンス・ヘッダーを確認する場合には「modpagespeed」への参照を探します。Google のツールはレスポンスにタグ付けするからです。

おめでとうございます。cache フォルダーとレスポンス・ヘッダーを確認して問題がなかったということは、mod_pagespeed のインストールと構成が適切だったということです。


mod_pagespeed を使って実験する

mod_pagespeed を本格的に使用する前に mod_pagespeed を試したい場合には、上記の手順に従ってください。また、実際に mod_pagespeed を使用する準備が整うまで pagespeed.conf ファイルを無効にしておくことができます (Apache の http.conf ファイルの構成設定を取り消す必要はありません)。pagespeed.conf ファイルの中で、単純に mod_pagespeed をオン/オフすることができます。10 行目にあるパラメーター ModPagespeed on を探してください。この変更を有効にするには Apache を再起動する必要があります。


まとめ

ほとんどの Web マスターは速度とページのロード時間の重要性を理解していますが、ロード時間の統計や最大値をモニタリングしている熱心な Linux 技術者はほとんどいません。ほとんどの Web マスターにとって、mod_pagespeed のような単純なツールは理想的です。つまり mod_pagespeed はインストールが容易でほとんど構成が必要なく、しかもユーザーにとってページのロード時間を大幅に改善することができます。

参考文献

学ぶために

製品や技術を入手するために

  • Google から mod_pagespeed をダウンロードしてください。
  • 皆さんに最適な方法で IBM 製品を評価してください。製品の試用版をダウンロードする方法、オンラインで製品を試す方法、クラウド環境で製品を使う方法、あるいは SOA Sandbox で数時間を費やし、サービス指向アーキテクチャーの効率的な実装方法を学ぶ方法などがあります。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Linux
ArticleID=795482
ArticleTitle=mod_pagespeed を利用して純粋に速度を高める
publish-date=03012012