Web ページを高速化する

非常に効果がある 20 (プラスアルファ) のヒント

皆さんは Web ページのロードをもっと高速にしたいと思いませんか。ロード時間を短縮すること (場合によっては 80 パーセントも短縮) で、ダイヤルアップ・ユーザーにとってのブラウジング・エクスペリエンスを改善する方法を学びましょう。

Marco Kotrotsos, Founder and developer, Incredicorp

author photoMarco Kotrotsos はソフトウェア・システムの構築に 10 年の経験を持つ開発者で、これまでに携わったシステムは、超一流の保険会社用のエンタープライズ・クラスのアプリケーションから、中規模から小規模のビジネス用の管理ツールや新興企業用の Web アプリケーションに至るまで、広範囲にわたります。彼は新興企業や小規模ビジネスが製品を市場導入する際の支援に焦点を当てる Incredicorp の創設者です。彼は最先端の話題 (セマンティック Web や AI、CSS3、セマンティック検索など) に関して技術エキスパートと協力し合いながら業務を行っています。



2009年 1月 27日

はじめに

すべての人が高速インターネット接続の恩恵を受けているわけではありません。たとえすべての人がその恩恵を受けられたとしても、Web アプリケーションの動作が遅く見える原因は何百もあります。今日ではブロードバンド回線の速度が向上し続けていますが、それでも Web ページのロード時間に関心を持つ必要がないと考えるべきできはありません。ページのロードに要する秒単位の貴重な時間や、リクエストやレスポンスに要するもっと貴重なミリ秒単位の時間さえも短縮しましょう。そうすれば、より良いエクスペリエンスをサイト訪問者に提供することができます。

この記事を最後まで読み終えれば、Web ページのロード時間を最適化するための基本を十分理解できるはずです。また、ロードに時間のかかる長いページ・セグメントやボトルネックを的確に特定し、判断するためのツールや知識を得ることもできます。

前提条件

理想的には、Mozilla Firefox をインストールしておく必要があります。また Web 開発全般を理解している必要があります。この記事で取り上げる話題は難しいものではありませんが、HTML (Hypertext Markup Language) や CSS (Cascading Style Sheet)、JavaScript™ プログラミング言語などの知識があれば、そうした話題をより速く理解することができます。IDE (integrated development environment: 統合開発環境) は必要ではありません。適当なエディターがあれば十分です。

使用するブラウザーでは JavaScript を有効にしておく必要があります。また、Firebug や YSlow に関する説明を理解するためには Firefox Web ブラウザーをインストールしておく必要があります。

ブロードバンド接続が利用できない場合

多くの人は、DSL であれ、ケーブルテレビであれ、光ファイバーであれ、あるいは他の方法であれ、何らかの種類のブロードバンド接続をとおしてインターネットにアクセスしています。しかし、そうした技術を利用できない人達はダイヤルアップ接続を使うしかありません。きっと皆さんはダイヤルアップ接続の経験を忘れてしまったことでしょうが、Web ページが 1 行・・・、そしてまた 1 行・・・、とロードされる様子が見られた時代を思い出してください。

2006年の OECD (Organization for Economic Cooperation and Development: 経済協力開発機構) の報告書では、データのダウンロード速度が 256 キロビット/秒を超える場合のみをブロードバンドと定義しています。米国の FCC (Federal Communications Commission: 連邦通信委員会) は現在、768 キロビット/秒を超えるものをすべてブロードバンドと定義しています。

幸いなことに、そうした低速回線を利用してインターネットに接続している人達に救いの手が差し伸べられようとしています。ページのロードに必要な時間を短縮することで、そうした人達のエクスペリエンスを改善することができるのです。しかしロードやレスポンスの時間を短縮する理由はダイヤルアップ・ユーザーのためだけではありません。多くの Web デザイナーは、高速インターネット接続が可能になったことによって Web サイトのパフォーマンスの最適化が無意味になったと誤解してしまったのです。これはまったくの見当違いです。例えば、これまではデスクトップ・ソフトウェアを使って行われていた多くの作業を今やオンラインで行うことができます。しかし、Web アプリケーションでデスクトップ・ソフトウェアと同等の応答性の感覚を得ることが非常に難しい場合があり、パフォーマンスの最適化は極めて重要なのです。幸いなことに、いくつかのツールやベスト・プラクティスを活用すると、レスポンスやロードに要する時間を短縮し、より応答性の高いエクスペリエンスを実現することができます。

Birds-Eye 社の Broadband Statistics for 2007 (2007年のブロードバンド統計) によると、米国民の 25 パーセントはインターネット接続環境を持っておらず、53 パーセントがブロードバンド接続を持ち、21 パーセントは相変わらずダイヤルアップを使用しています。

ツールと必須事項

どのような最適化作業を行う場合にも、ボトルネックの診断と問題の特定のためのツールが必要です。今日の Web 開発で最も広く使われている 2 つのツールが Firebug と YSlow です。どちらも Firefox のプラグインであり、オープンソースとして無料で入手することができます。

Firebug

Firebug (「参考文献」を参照) は Firefox の拡張機能として最もよく使われているものの 1 つであり、Web 開発者の作業を非常に容易なものにしてくれるアプリケーションです。Firebug には以下のように数多くの便利な機能があります。

  • JavaScript のデバッグ機能
  • JavaScript のコマンドライン機能
  • JavaScript のパフォーマンスの監視機能と XmlHttpRequests の追跡機能
  • Firebug コンソールへのロギング機能
  • トレース機能
  • HTML 要素を調査する機能と HTML コードのライブ編集機能
  • CSS 文書のライブ編集機能

YSlow

YSlow (「参考文献」を参照) は Web ページを分析し、なぜそうした Web ページが遅いのかを、ハイパフォーマンスの Web サイトのために Yahoo! が作成したルール (「参考文献」を参照) に基づいてレポートします。YSlow は Firefox のアドオンですが Firebug と統合されて動作するため、まず Firebug をインストールしてから YSlow をインストールして使い始める必要があります。

Firebug をインストールする

どちらの Firefox 拡張機能もインストールは容易です。Firebug をインストールするためには以下のステップを実行します。

  1. Firefox を開き、Firebug のホームページに行きます。
  2. 最新バージョンの Firebug をインストールするボタンをクリックします。
  3. Firefox がポップアップをブロックするように構成されている場合には、インストール・ウィンドウが開くように「許可」をクリックします。インストール・ウィンドウが開いたら、「今すぐインストール」をクリックします。
  4. Firefox を再起動します。

これで、「ツール」メニューから Firebug を利用することができます。Firebug を新しいウィンドウで開くこともでき、あるいは既存のウィンドウの中で開くこともできます (図 1)。

図 1. Firefox のスタート・ページを Firebug の「HTML」ビューと「スタイル (Style)」ビューで表示した画面
Firefox のスタート・ページを Firebug の「HTML」ビューと「スタイル (Style)」ビューで表示した画面

YSlow をインストールする

Firebug をインストールしたら、次のステップは YSlow をインストールすることです。そのためには以下のステップを実行します。

  1. Firefox を開き、YSlow のホームページにアクセスします。
  2. YSlow アドオンをインストールし、Firefox を再起動します。

    注意: 他の多くの Firefox 拡張機能とは異なり、YSlow は自動的には起動しません。まず YSlow を有効にする必要があります。

  3. YSlow を有効にするためには、ステータス・バーにある YSlow のアイコンを右クリックし、表示されるコンテキスト・メニューで Autorun をクリックします。

図 2 は YSlow によるパフォーマンス分析の結果を示しています。

図 2. Firefox のスタート・ページを YSlow でパフォーマンス分析した結果
Firefox のスタート・ページを YSlow でパフォーマンス分析した結果

常識に従い、設計ルールを忘れないこと

驚いたことに、非常に多くのケースで簡単な設計ルールが無視され、その結果として最適化されずにダウンロードの遅いページが作られています。以下のルールを念頭に設計すれば、ページのロードはもっと速くなるはずです。

適切な構造を使う

XHTML (Extensible HTML) には多くの利点がありますが、欠点も同じくらい目立ちます。XHTML によって、より標準に準拠したページが出来上がるかもしれませんが、XHTML はタグを過剰に使用するため (<start> タグと <end> タグが必須など)、ブラウザーがダウンロードするコードが多くなります。そのため、他の条件が同じであるなら、ページの中で XHTML によるコーディングをなるべく使わないようにし、ページ・サイズを減らすように心がけることです。

どうしても XHTML を使わざるを得ない場合には、可能な限り XHTML を最適化するようにします。例えば空白を削除し、厳密な XHTML のコーディング・プラクティスに従うことでダウンロードや構文解析を速くすることができます。XHTML Strict を強制するためには、以下の DOCTYPE のステートメントを文書に追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Strict は Strict HTML 4.01 と等価であり、HTML 4.01 仕様で非推奨とはされていない要素と属性を含んでいます。XHTML Transitional で許可されていた、いくつかのタグは XHTML Strict では許可されていないことを忘れないでください。以下はその一例です。

  • <center>
  • <font>
  • <iframe>
  • <strike>
  • <u>

過剰なレイアウトにしない

ブログ (そしてニュース・サイト全般) が一般的になる前には、横にスクロールするページや、さらには縦にスクロールするページを使うことすら不適切なプラクティスと見なされていました。ページのサイズは小さく、体裁よく画面一杯に表示することは (もちろん不可能ではありませんが) 現在よりも困難でした。しかし今や、ブログやコンテンツ駆動の Web サイトのおかげで、何百キロバイトものサイズを持つ長いページを目にすることも珍しくなくなりました。以前よりも広い空間を埋める必要があることは確かですが、だからといって、そうした空間を巨大な背景画像や、膨大な数の表、あるいは単純に大量のコンテンツで埋める必要があるということにはなりません。最小主義者に徹し、少なければ少ないほど良いと考える必要があります。あらゆる種類の画像や動画、広告等々を整理せずに配置すると、乱雑なだけでなく非常に使いにくいページになってしまいます。そのため、視覚的に過剰なページにしてしまう前に、それが本当に必要かどうかを十分に考える必要があります。

文字を表現するために画像を使用しない

さまざまなブラウザーでフォントがどう表示されるかを制御することはほとんどできませんが、画像はフォントとは異なり、必ず設計どおり正確に表示されます。しかしこれは、テキストの代わりに画像を使うための言い訳にはなりません。

文字を表現するために画像を使用している例で、最もよくあるものの 1 つがナビゲーションです。装飾的なボタンは視覚に訴えるかもしれませんが、そうしたボタンのロードには時間がかかります。さらに、検索エンジンでは画像に直接、索引付けすることはできないため、ナビゲーションに画像を使うことは SEO (Search Engine Optimization: 検索エンジン最適化) に反しています。画像を使わなくても CSS によるさまざまな手法を使って見栄えの良いボタンを作成できるにもかかわらず、画像を使って文字を表現する理由は何もありません。

CSS によるスタイリングに特に適したナビゲーション・タイプの 1 つが、タブ・スタイルのナビゲーションです (図 3)。

図 3. タブ・スタイルのナビゲーション
タブ・スタイルのナビゲーション

この方法によるナビゲーションの実装は簡単であるだけでなく、より Web 標準に準拠しています。

包括的に Web 標準と呼ばれる一連のベスト・プラクティスに従う Web サイトは、軽量であり、アクセスしやすく、検索エンジンで検索しやすく、使いやすく、そして CSS をベースにしています。

リスト 1リスト 2 のコードは、タブ・ベースのナビゲーションを純粋な CSS/XHTML として実装しています。

リスト 1. タブ・ベースのナビゲーションのための CSS 文書
    #nav {
      float:left;
      width:100%;
      background:#E7E5E2;
      font-size:95%;
      line-height:normal;
      border-bottom:1px solid #54545C;
      }
    #nav ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #nav li {
      display:inline;
      margin:0;
      padding:0;
      }
    #nav a {
      float:left;
      background:url("tableftK.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #nav a span {
      float:left;
      display:block;
      background:url("tabrightK.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav a span {float:none;}
    /* End IE5-Mac hack */
    #nav a:hover span {
      color:#FFF;
	  background-position:100% -42px;
      }
    #nav a:hover {
      background-position:0% -42px;
      }
    #nav a:hover span {
      background-position:100% -42px;
	  }
リスト 2. タブ・ベースのナビゲーションのための HTML コード
<div id="nav">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
  </ul>
</div>

クッキーは小さなファイルかもしれませんが、それでもブラウザーはクッキーをダウンロードする必要があります。大きなクッキーはダウンロードに時間がかかるため、ブラウザーがページをロードするための時間が増大します。そのため、可能な限りクッキーを小さく保ち、ブラウザーの応答時間への影響を最小限にとどめることが重要になります。

また、expire の日付を現在よりも前に設定したり、あるいはまったく設定しなかったりすると、応答時間が長くなります。クッキー用の expire の日付を PHP 言語で設定するためには以下のようなコードを使います。

<?php 
 $expire = 2592000 + time(); 
 // Add 30 day’s to the current time 
 setcookie(userid, “123rrw3”, $expire);
?>

このスニペットでは、userid というクッキーを設定しており、その中で expire の日付を現在の日付の 30 日後に設定しています。


必要のない JavaScript コードを含めず、可能な限り外部化する

クッキーと同様に JavaScript ファイルもダウンロードに時間がかかるため、JavaScript ファイルが含まれていると必然的にページ全体のロードに時間がかかるようになります。したがって、JavaScript ファイルは賢く使う必要があります。つまり本当に必要な場合にのみ使用し、ロードするサイズとそれに要する時間が最小になるようにスクリプトを最適化します。

JavaScript のダウンロードを高速化するためのもう 1 つの方法は、スクリプトをインラインに含めるのではなく、外部ファイルを使う方法です。この方法は CSS にも適用することができます。なぜなら、外部化されたファイルはブラウザーでキャッシュされますが、(HTML ページ自体の中に) インラインでコード化された CSS や JavaScript は HTML と共に毎回ロードされるからです。CSS と JavaScript のコードのロードを外部化するためには、それらのコードを HTML の中で参照します。以下のコードはそのためのコードです。

<link href="/stylesheets/myStyle.css" media="all" rel="Stylesheet" type="text/css" />
   <script src="/javascripts/myJavascript.js" type="text/javascript"></script>

可能であれば、表を避ける

表はかつて Web ページの中心的なビルディング・ブロックでしたが、今やページ・レイアウト要素としては不適切なプラクティスと見なされています。しかし場合によると、表を使わなければならないことがあります (そしてそれは表データを表示するための適切なプラクティスと見なされます)。表を使う場合には、表のセルや行、列の幅と高さを明示的に指定する必要があります。そうしないとブラウザーは表の表示方法を計算するために数多くの操作をしなければならず、ページをロードする速度が低下します。

<td width="50px" height="10px">...</td>

必要ないものをすべて削除する

これはあらゆるヒントの中で最も明白なものかもしれませんが、最もよく忘れられるヒントの 1 つでもあります。先ほど「少なければ少ないほど良い」と言いましたが、そうすることによって、より幅広いユーザー層に視覚的に訴えられるだけではなく、ダウンロードや処理を必要とする内容も少なくなります。どうしても大量の内容を Web ページに配置する必要がある場合には、そのページを 2 ページか 3 ページに、あるいはもっと多くのページに分割することを検討する必要があります。

Web ページを最適化するためのヒント

Web ページを最適化するための方法はいくつかあり、例えば JavaScript ファイルを圧縮したり、HTTP (Hypertext Transfer Protocol) 圧縮を使用したり、画像サイズを設定したりする方法などがあります。

JavaScript ファイルを圧縮してサイズを縮小する

JavaScript ファイルのサイズは驚くほど巨大であり、場合によると JavaScript ファイルをダウンロードする時間の方が他のすべての要素をダウンロードする時間よりも長いこともあり得るということです。この問題に対する 1 つの方法が JavaScript ファイルを圧縮する方法です。圧縮アルゴリズムとしては、多くのブラウザーでサポートされている GNU zip (gzip) を使うことができます。

もう 1 つの方法は JavaScript ファイルのサイズを縮小する方法です。サイズを縮小することによって、不必要な文字 (タブや改行、空白など) をコードからすべて削除することができます。また、コードの中に残されたコメントや空白も削除されるため、さらにファイル・サイズが小さくなります。縮小は外部スタイルシートにも内部スタイルシートにも使うことができます。最もよく使われる縮小ツールとして JSMin と YUI Compressor があります (「参考文献」を参照)。


HTTP 圧縮を使用し、必ず小文字の div とクラス名を使う

HTTP 圧縮を使用するとサーバーとブラウザーの間のトラフィックを減らすことができます。HTTP 圧縮の構成は Apache (.htaccess ファイル) で行うこともでき、あるいは Web ページに HTTP 圧縮を含めることもできます (PHP の場合には HTTP_ACCEPT_ENCODING ヘッダーを使います)。ただし、すべてのブラウザーが圧縮をサポートしているとは限らないことに注意してください。また、たとえブラウザーが圧縮をサポートしていても、圧縮と解凍はプロセッサーに負荷がかかります。包括的な (つまりすべてのテキストと HTML に対する) 圧縮を Apache で有効にするためには、下記のコマンドを使います。

AddOutputFilterByType DEFLATE text/html text/plain text/xml

また、圧縮対象も考慮する必要があります。画像や音楽、ビデオは作成時に既に圧縮されているため、圧縮対象を HTML ファイルと CSS ファイル、そして JavaScript ファイルに限定することができます。

圧縮作業を減らすための、もう 1 つの手法は、小文字の <div> 要素とクラス名を使うことです。大文字小文字が区別され、また可逆圧縮方式が使われることから、<header><Header> と区別され、この 2 つは異なるタグとして圧縮されます。下記の例では、圧縮プログラムにとって Important クラスは important クラスとは別です。つまりこの 2 つは圧縮プログラムにとって異なる 2 つのものを表しており、従って異なるテキスト部分として、それぞれ単独に圧縮されます。

<div class="Important">read this!</div>
<div class="important">This will cost you some valuable load time</div>

こうした細部に注意しても大した効果はないように思えるかもしれません。しかしファイルを最適化する際には、まさにどんな些細なことも影響するのです。


画像サイズを設定する

表のセルや行、列などと同様、画像サイズを明示的に設定しないとブラウザーは画像を表示するために計算を行わなければならず、それによって処理速度が低下します。また場合によると画像サイズが誤って計算され、その結果、画像が歪んで表示されるかもしれません。

頻繁に使用される装飾に対しては CSS イメージ・マップを使う

複数の画像の代わりにイメージ・マップを使う方法も、ロード時間を短縮するための 1 つの方法です。この方法を使えば、画像の別々の部分を同時にダウンロードすることでページ全体のダウンロード・プロセスを高速化できるからです。あるいは CSS Sprite (「参考文献」を参照) と呼ばれるものを使うこともできます。CSS Sprite は HTTP リクエストの数を減らすために役立ちます。CSS Sprite を利用すると、1 つのページの装飾やレイアウトに必要なすべての画像要素を 1 つの画像に保持させることができます。ある特定の要素に対してどのマップを使用するのかは、CSS を使って (特定の位置やサイズを呼び出すことで) 選択します。


可能であれば、スクリプトのロードを遅らせる

先ほど、絶対に必要なわけではない JavaScript コードを含めなければ、ロードや処理を高速化できることを説明しました。しかし、既に不要なものを限界まで除き、ページ上に JavaScript コードを含めることが避けられない場合にはどうすればよいのでしょう。

この場合、ページのダウンロード時間を短縮するために考えられる 1 つの方法として、ページの最後にスクリプトを配置する方法があります。そうすればページのロードをもっと速くすることができます。多くの場合、ブラウザーが (同じドメインから) 並行して同時にダウンロードするオブジェクトは多くても 2 つです。そうしたオブジェクトの 1 つが JavaScript のコード片である場合には、そのスクリプトがダウンロードされるまで他のページ要素のダウンロードは停止されます。JavaScript コードをページの最後に置くと、そのスクリプトは (大部分の場合には) 他の要素の後、最後にダウンロードされます。

どのファイルのロードが遅いのかを Firebug の拡張機能を使って追跡してみると、まず確実に JavaScript ファイルは最も遅い部類に入るはずです。JavaScript ファイルの圧縮は効果的ですが、圧縮だけでは十分ではないかもしれません。JavaScript のロードを遅らせるためには下記のスニペットを使うことができます。

var delay = 5;
setTimeout("heavy();", delay * 1000);

このコードは heavy() メソッドに対する呼び出しを 5 秒間遅延させます。このコードを、この次に説明する手法と組み合わせると、JavaScript ファイル全体のロードを遅らせることができます。

オンデマンドで JavaScript ファイルをロードする

オンデマンドで JavaScript ファイルをロードするためには import() 関数を使います (リスト 3)。

リスト 3. import() 関数
function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms; 
  $import(src + seed);
}

関数のロードを確認する

また、ある関数がロードされたかどうかを確認し、もしロードされていなければ JavaScript ファイルをロードする、ということもできます。そのためにはリスト 4 のコードを使います。

リスト 4. 関数がロードされたかどうかを確認する
if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('http://www.yourfastsite.com/myfile.js');
}

注意:defer 属性を使うこともできますが、すべてのブラウザーが defer 属性をサポートしているわけではありません (Firefox もサポートしていません)。


CSS ファイルを最適化する

CSS ファイルは、最適化と保守を適切に行えば、大きなものにはならないはずです。例えば、どこからも参照されないクラスが大量に含まれる CSS ファイルはダウンロード時間に影響します。JavaScript ファイルの場合と同様、CSS ファイルを最適化し、必要なものをすべて含んだ上で適切なサイズとなるようにする必要があります。またインライン定義ではなく外部ファイルを使うことでブラウザーのキャッシング・メカニズムを活用します。


コンテンツ配信ネットワークを使う

CDN (Content-Distribution Network: コンテンツ配信ネットワーク) も、ダウンロード時間を改善するための素晴らしい方法です。静的な画像群をインターネット上にある多数のサーバーに配置することによって、ユーザーは彼らの近くにあるサーバーから画像をダウンロードすることができます。また、大部分の CDN は高速なサーバー上で実行されるため、サーバーの負荷がどれほど大きくても、小規模で過負荷のサーバーよりも迅速に応答することができます。

資産に対して複数のドメインを使用し、接続を増加させる

CDN のもう1 つの利点は、CDN が別のドメインにあることです。ブラウザーは 1 つのドメインへの同時接続の数を制限するので、ページをロードする際にはすべてのスレッドが簡単に占有されてしまいます。そのため、他の資産への接続が遅れます。しかしブラウザーは他のドメインへは新しいスレッドや接続を開くことができます。従って、別のドメインからロードされる資産はすべて、他のすべての資産と共に同時にロードされます。


利用できるようになったら Google Gears を使う

Google Gears (「参考文献」を参照) を使う方法も、ユーザーが同じコンテンツを何度も何度も繰り返しダウンロードせずにすむ、素晴らしい方法です。Gears を利用すると Web アプリケーションにオフラインでアクセスすることができますが、ページ要素をユーザーのコンピューターに保存することもできるのです。そのため、頻繁にロードされるけれども頻繁には更新されないコンテンツを Gears データベースに保存することができます (Gear データベースは、SQLite3 リレーショナル・データベース管理システムです)。同じコンテンツに対する next リクエストはすべて、サーバーからではなく Gears データベースから直接ロードすることができます。

Gears をインストールした後、Gears のファクトリーと API (Application Programming Interface) にアクセスしやすいように gears_init.js ファイルを入手して gears_init.js として保存し、このファイルをコードの中で下記のように参照します。

<script type="text/javascript" src="gears_init.js"></script>

Gears がインストールされたかどうかを判断するためには、リスト 5 のコードを使います。

リスト 5. Gears がインストールされているかどうかを判断する
<script>
  if (!window.google || !google.gears) {
    location.href = "http://gears.google.com/?action=install&message=<welcome message>" 
        + "&return=<return url>";
  }
</script>

Gears がインストールされていない場合は、このコードは Gears をダウンロードできる URL を表示します。

すべてが検証され、Gears がインストールされると、信じられないほど便利な Gears のデータベース機能をリスト 6 の JavaScript コードを使ってテストすることができます。

リスト 6. データベース機能をテストする
<script type="text/javascript">
 var db = google.gears.factory.create('beta.db');
 db.open('database-test');
 db.execute('create table if not exists Test' +
           ' (Phrase text, Timestamp int)');
 db.execute('insert into Test values (?, ?)', ['Monkey!', new Date().getTime()]);
 var rs = db.execute('select * from Test order by Timestamp desc');

 while (rs.isValidRow()) {
  alert(rs.field(0) + '@' + rs.field(1));
  rs.next();
 }
 rs.close();
</script>

このコードはユーザーのコンピューター、つまりサーバーに db という名前のローカル・データベースを作成します。まだ Test という名前のテーブルが存在していなければ、このテーブルを作成し、何らかのテスト・データ (ここでは Monkey! と時刻) を挿入します。このコードはデータベースからデータを取得し、そのデータをアラートとしてブラウザーの中に表示します。

この機能による可能性を想像してみてください。


画像には PNG フォーマットを使う

GIF (Graphic Interchange Format) や JPEG (Joint Photographic Experts Group) の画像フォーマットは過去のものであり、PNG (Portable Network Graphic) が今後のフォーマットです。もちろん、GIF や JPEG が廃れたフォーマットであるとか PNG に欠点がないと言うことはできませんが、他の条件を同じとすれば、PNG は最適なファイル・サイズで適切な画質を提供します。そのため、選択できる場合には可能な限り PNG を使うことです。


Ajax 呼び出しを簡潔にし、的を絞る

Ajax (Asynchronous JavaScript + XML) は手法全体を指してそう呼ばれますが、この手法が 2、3 年前に登場すると、ページのリクエストとレスポンスの扱い方に革命的な方法がもたらされました。しかしダイヤルアップのユーザーは Ajax による真の恩恵を実感することができないかもしれません。多くの場合、Ajax はブラウザーとサーバーとの間に大量の通信を要求するからです。そのため、Ajax 呼び出しを簡潔に、的を絞ったものにとどめれば、ユーザーが要素の更新や応答を延々と待って無駄な時間を過ごす事態を避けることができます。


大がかりな Ajax 呼び出しを 1 度だけ行い、クライアント・データをローカルで処理する

Ajax 呼び出しを簡潔にできない場合、あるいは簡潔にすると必要な結果を得られない場合には、別の方法を検討します。つまり大がかりな Ajax 呼び出しを 1 度だけ行って必要なものをすべて取得し、あとはクライアントにローカルでデータを処理させるのです。そうすれば、クライアントは (データを取得するために) 1 度は待つ必要がありますが、その後は (つまりブラウザーとサーバーとの間の通信が必要ない時には) 処理をもっと迅速に行うことができます。もちろん、Ajax を最適化する方法はこのチュートリアルで説明しきれないほど数多くあります。Ajax に関して詳しく学びたい場合には「参考文献」を参照してください。

コーディングをサンドボックス化する

常識的でありながら、よく忘れられてしまうヒントが、もう 1 つあります。まともな Web 開発者であればアプリケーションをリリースする前にテストしないということはないはずですが、保守作業に関するテストが脇に追いやられたり、十分な検討やテストがなされずに大急ぎで新機能が追加されたり、といったことが起こる場合があります。その結果、スクリプトの他の部分の実行速度が遅くなります。

新しい機能を追加する場合には、まずその機能をサンドボックスの中で (できればアプリケーションの他の部分と完全に切り離して) テストし、単独の機能として動作を検証します。こうすることで、その Web アプリケーションの他の部分を扱うことなく、何度もチェックを繰り返してパフォーマンスや応答時間を分析することができます。そしてその新機能が想定どおりの動作をするようになったら、(その新機能自体は想定どおり動作することがわかっているので) その機能をアプリケーションの他の部分と統合し、アプリケーションを実行して他のテストを行うことができます。


サイトのコードを分析する

自らを振り返るという助言は多くの場面で適切なものです。幸いなことに開発の場合には、自己分析を支援し、このプラクティスを可能な限り客観的に行うためのさまざまなツールがあります。例えば JSLint (「参考文献」を参照) のようなツールは、そのサイトに書かれているとおり「気に障るかもしれません」が、コードに潜在する欠陥をすべて提示してくれるので非常に貴重です (そうした欠陥はデバッグの困難な問題につながるだけではなく、応答時間が長くなる可能性にもつながります)。


エラーや不適切なコーディング・プラクティスがないかどうか、JSLint を使って JavaScript コードをチェックする

JavaScript コードを適切なものにするためには完全主義者である必要はありません。しかし多くの開発者はコード分析を真剣に行わず、開発プロセスの中でコード分析のステップをスキップしてしまうことが多いものです。残念ながら、エラーや不適切なコーディング・プラクティスはプロフェッショナルとして恥ずかしいばかりでなく、それによってアプリケーションの動作が遅くなる可能性があります。また、ブラウザーがエラーや不適切なコーディング・プラクティスと悪戦苦闘していると、ロードに時間がかかるだけではなく、そのファイルをロードすることでデバッグするのが難しいエラーにつながる可能性があります。

そのため、コードを適切なものにするためには、コード分析ツールを使うことを検討します。さまざまなツールがありますが、JavaScript 言語に最適なツールの 1 つが JavaScript Lint、つまり JSLint です (「参考文献」を参照)。Firebug を使うこともできますが、JSLint の方が詳細な分析をすることができます。JSLint は YSlow に含まれています。


孤立したファイルや足りない画像がないかをチェックする

どこからも参照されない孤立したファイルや足りない画像がないかをチェックすることは賢明なことです。大部分の Web 開発者は不適切なファイル参照がないかどうかをチェックしますが、このチェックは改めて指摘するだけの価値があります。ファイルが足りないと結局「画像/ページを表示できません」のようなエラー・メッセージが表示されることになるので問題なのですが、Web ページを適切な速さで表示するという観点からすると、ファイルが足りないことによる問題はもっと大きなものです。ブラウザーは、足りないファイルを探したり、不適切な参照等により見つからないファイルを探したりする間、リソースを消費し続けるため、必然的にページの処理が遅くなります。そうならないように、不適切な参照等により孤立したファイルや足りないファイルがないかどうか、ファイル名のスペル間違いを含めてチェックを実行します。


YSlow 拡張機能

Firebug の YSlow 拡張機能によって、主観的な Web ページ分析が過去のものになります。YSlow は Yahoo! が作成した、ハイパフォーマンスの Web サイトのための確実なルールを使うことによって Web ページを分析し、なぜ Web ページの動作が遅いのかをレポートします。


YSlow を使って Web ページを分析する

YSlow は Firefox の拡張機能として比較的小さなものですが、非常に便利です。YSlow を起動すると、ブラウザーの下の部分に YSlow が開きます (図 4)。

図 4. Firefox の YSlow 拡張機能
Firefox の YSlow 拡張機能

図 4 に示す「Performance」ビューには、YSlow が Web ページのパフォーマンスを評価した結果と、YSlow が検出したすべての問題が表示されます。リストの中のリンクをクリックすると、エラーを説明したページが開きます。Web ページを構成しているコンポーネントに改善可能なものがある場合には、YSlow はその改善方法を提示します。

図 5 の「調査 (Inspect)」ビューでは、ページを要素ごとに細かく分析することができます。「調査 (Inspect)」ビューで最も便利な機能の 1 つは、ページ上でマウス・ポインターを移動させると、マウス・ポインターが指している要素がビュー上でも表示される機能です。そのため、調査する必要がある行を見つけるために延々とコード行をスクロールする必要がありません。

図 5. Firefox での YSlow の「調査 (Inspect)」ビュー
Firefox での YSlow の「調査 (Inspect)」ビュー

「Stats」ビュー (図 6) はその名前から想像できるように、現在のページに関する統計データを表示します。こうしたデータには、空のキャッシュやクッキー、そして最も重要なキャッシュやクッキーが含まれています。

図 6. Firefox での YSlow の「Stats」ビュー
Firefox での YSlow の「Stats」ビュー

「Components」ビュー (図 7) は現在のページ上のコンポーネントを一覧表示します。各コンポーネントに関して表示されるデータには、ファイル・タイプやパス、有効期限、HTTP レスポンス・ヘッダーなどがあります。あるコンポーネントをクリックすると、そのコンポーネントの内容が表示されます。列の見出しをクリックすると、この表を昇順または降順にソートすることができます。

図 7. YSlow の「Components」ビュー
YSlow の「Components」ビュー

YSlow は小さくて便利な拡張機能であり、ページのロードを速くするための作業に非常に役立ちます。まだ YSlow を試したことがなければ、この記事を読んだ以上、試してみない理由はありません。


まとめ

Web ページの表示が適切な速さで行われるようにすることは、決して難しいことではありません。実際、ごくわずかな作業をするだけで適切な速さで表示できるようになることが多いのです。この記事で紹介したヒントに従い、Web 開発のベスト・プラクティスを守るようにすれば、特別なことをしなくてもページのロードを今より迅速に行えるようになります。

Web ページを適切な速さで表示するためのさまざまなヒントを一ヵ所に集めることは決して無駄ではなく、この記事が貴重なリソースとなることを祈っています。一方で、そのヒントはすべてこの記事で紹介されていると言われると、おそらく皆さんは驚くことでしょう。とは言え、ここで紹介した 20 ちょっとのヒントに従うだけでも Web ページのロードはもっと速くなり、ユーザーを喜ばせることができるはずです。それはユーザーがダイヤルアップで接続している場合も専用のブロードバンド回線で接続している場合も同じことです。

参考文献

学ぶために

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

  • JSMin を使って JavaScript ファイルを徹底的に縮小してください。
  • YUI Compressor は Yahoo! の JavaScript 圧縮プログラムであり、Yahoo! UI Library の一部です。このサイトには、コード圧縮に関する全般や理想的なコードによって副作用を見えにくくする方法など、さまざまな側面に関する素晴らしい資料も用意されています。
  • JSLint は不適切なコーディング・プラクティスを特定するために役立ちます。
  • Firebug は Firefox のアドオンであり、これを利用すると豊富な開発ルールを手にすることができます。
  • Google Gears について学び、ダウンロードしてください。
  • YSlow はYahoo! が開発した Firebug のアドオンであり、Web ページを分析し、Web ページの動作が遅い原因をレポートします。

議論するために

コメント

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=Web development
ArticleID=372553
ArticleTitle=Web ページを高速化する
publish-date=01272009