ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たとえ全員が高速ネットワークにアクセスできる場合でも、Web アプリケーションの実行速度が遅いように見える理由はさまざまです。ブロードバンドの速度が高速化しているこの時代では、ページの読み込み時間に注意する必要があります。貴重なページの読み込み時間を数秒短縮し、さらに貴重なリクエストと応答時間を数ミリ秒短縮します。訪問者にとってより良い体験を創出できます。

この記事を読めば、Web ページの読み込み時間の最適化の基本について十分に理解できるようになります。また、ツールと知識を使用して、読み込みが遅いページセクションやボトルネックをより適切に特定し、診断することもできます。

前提条件<br />理想的には、Mozilla Firefox がインストールされている必要があります。また、Web 開発に関する一般的な知識も必要です。この記事で取り上げるトピックは複雑ではありませんが、ハイパーテキストマークアップ言語 (HTML)、カスケーディングスタイルシート (CSS)、™ プログラミング言語などのトピックを知っていれば、この記事をより快適に学習できます。 IDE は必要ありません。お気に入りのエディターだけが必要です。

ブラウザで JavaScript を有効にする必要があります。さらに、Firebug と YSlow について学習するには、Firefox Web ブラウザがインストールされている必要があります。

ブロードバンドをお持ちでない場合
多くの人は、DSL、ケーブル、光ファイバー、またはその他の方法など、何らかの形のブロードバンド接続を通じてインターネットにアクセスします。しかし、そのような技術にアクセスできないユーザーは、ダイヤルアップ接続を使用せざるを得ません。ダイヤルアップでインターネットを閲覧していたときのことを忘れてしまったかもしれませんが、Web ページが 1 行ずつ読み込まれていたときのことを思い出してみてください。

幸いなことに、これらの貧しい人々は現在、何らかの援助を受けることができます。ページの読み込みにかかる時間を短縮することで、ユーザーエクスペリエンスを向上させることができます。ただし、ダイヤルアップ接続だけが読み込みや応答が遅くなる唯一の原因ではありません。多くの Web デザイナーは、高速インターネット接続の出現により、Web サイトのパフォーマンスを最適化する必要がなくなったと誤解しています。この見解は誤りです。たとえば、かつてはデスクトップソフトウェアを使用して実行されていた多くのタスクが、今ではオンラインで実行できます。デスクトップソフトウェアのような Web アプリケーションで高速かつ応答性の高いエクスペリエンスを実現することは非常に難しいため、パフォーマンスの最適化が非常に重要です。幸いなことに、応答時間と読み込み時間を改善し、よりスムーズなエクスペリエンスを提供するために使用できるツールとベストプラクティスがあります。

必須ツール<br />最適化に関連するすべてのタスクでは、ツールを使用してボトルネックを診断し、問題を特定する必要があります。現在、Web 開発で最も広く使用されている 2 つのツールは、Firebug と YSlow です。どちらもオープンソースの無料 Firefox アドオンです。

ファイアバグ
最も人気のある Firefox 拡張機能の 1 つは、Web 開発者の作業を容易にするアプリケーションである Firebug (リソースを参照) です。次のような非常に便利な機能が多数含まれています。

JavaScript デバッグ

JavaScript のパフォーマンスを監視し、XmlHttpRequests を追跡するための JavaScript コマンドライン
Firebugコンソールにログインしてトラッキングする HTML要素を検査し、HTMLコードを動的に編集する CSSドキュメントを動的に編集する

Yスロー

YSlow (リソースを参照) は、Yahoo! が作成した高性能 Web ルール (リソースを参照) に基づいて、Web ページを分析し、読み込みが遅い理由を通知します。 YSlow は Firebug と統合された Firefox プラグインなので、YSlow をインストールして使用する前に、まず Firebug をインストールする必要があります。

Firebugをインストールする

両方の Firefox 拡張機能のインストールプロセスは非常に簡単です。 Firebug をインストールするには、次の手順を実行します。

Firefox を開き、Firebug のホームページに移動します。
Firebug の最新バージョンをインストールします。
Firefox がポップアップウィンドウをブロックするように設定されている場合は、[許可] をクリックしてインストールウィンドウを開くことを許可します。それ以外の場合は、「今すぐインストール」をクリックします。
Firefoxを再起動します。

ツールメニューから Firebug にアクセスできるようになりました。 Firebug は新しいウィンドウまたは既存のウィンドウで開くことができます (図 1 を参照)。

YSlowをインストールする

Firebug をインストールしたら、次に YSlow をインストールします。これを行うには、次の手順を実行します。

1. Firefox を開き、YSlow ホームページに移動します。
2. プラグインをインストールし、Firefox を再起動します。注意: 他の多くの Firefox 拡張機能とは異なり、YSlow は自動的に起動しません。最初にアクティブ化する必要があります。
3. YSlow をアクティブにするには、ステータスバーのアイコンを右クリックし、[自動実行] をクリックします。
図 2 は、YSlow パフォーマンス分析の結果を示しています。

図 2. Firefox スタートページの YSlow パフォーマンス分析

常識：デザインルールを念頭に置く

単純なデザインルールが無視され、最適化されていない、ダウンロードが遅い Web ページが作成される頻度は驚くほど高いです。以下のルールに留意すると、ページの読み込みが速くなります。

適切な構造を使用する
拡張可能な HTML (XHTML) には多くの利点がありますが、欠点も重大です。 XHTML を使用すると、ページはより標準に準拠したものになりますが、タグ (必須の <start> タグと <end> タグ) を多用するため、ブラウザーがダウンロードするコードが増えます。つまり、コインの表裏があり、ページサイズを小さくするには、Web ページで使用する 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 では使用できないタグが 2 つあることに注意してください。次に例を示します。

<中央>
<フォント>
<iframe>
<ストライク>
<u>

レイアウトに過負荷をかけない

ブログ（および新しいサイト）が普及する前は、ページを水平または垂直にスクロールすることは悪い習慣であると考えられていました。ページが小さくなるほど、画面にきちんと収まるようにするのが難しくなります (不可能ではありませんが)。最近では、ブログやコンテンツ重視の Web サイトでは、サイズが数百キロバイトにもなる長いページを目にすることも珍しくありません。確かに、より多くのスペースを埋める必要がありますが、だからといって大きな背景画像やたくさんの表、たくさんのコンテンツで埋めなければならないわけではありません。シンプルさの原則を守りましょう。少ないほど良いのです。このページにはさまざまな種類の画像、ビデオ、広告などが満載されており、実用性の原則に大きく違反しています。したがって、ページにコンテンツを追加する前によく考えてください。

テキストを表現するために画像を使用しない

異なるブラウザでの表示方法を制御することがほとんどないフォントとは異なり、画像は常に設計されたとおりに表示されます。しかし、これはテキストを表現するために画像を使用することの言い訳にはなりません。

画像を使用してテキストを表す最も一般的な例は、ナビゲーションバーです。美しいボタンは魅力的ですが、読み込みが遅くなります。さらに、画像はまだ検索エンジンによって直接インデックス化できないため、ナビゲーションに画像を使用することは検索エンジン最適化 (SEO) には適していません。 CSS のさまざまなトリックを使って画像なしで美しいボタンを作成できる場合は、テキストを表すために画像を決して使用しないでください。

CSS スタイル設定に適したナビゲーションの 1 つの具体的なタイプは、図 3 に示すように、タブナビゲーションです。

図3. タブナビゲーション

このナビゲーションの実装方法は、サイズが小さいだけでなく、Web 標準にもより準拠しています。

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

リスト 1. タブベースのナビゲーションの CSS ドキュメント

コードをコピー

コードは次のとおりです。

#ナビ{
フロート:左;
幅:100%;
背景:#E7E5E2;
フォントサイズ:95%;
行の高さ:通常;
ボーダー下部:1px 実線 #54545C;
}
#nav ul {
マージン:0;
パディング:10px 10px 0 50px;
リストスタイル:なし;
}
#nav li {
表示:インライン;
マージン:0;
パディング:0;
}
#nav {
フロート:左;
background:url("tableftK.gif") 繰り返しなし左上;
マージン:0;
パディング:0 0 0 4px;
テキスト装飾:なし;
}
#nav スパン {
フロート:左;
表示:ブロック;
background:url("tabrightK.gif") 繰り返しなし右上;
パディング:5px 15px 4px 6px;
色:#FFF;
}
/* コメント付きバックスラッシュハックは IE5-Mac からルールを隠します \*/
#nav スパン {float:none;}
/* IE5-Mac ハック終了 */
#nav a:hover スパン {
色:#FFF;
背景位置:100% -42px;
}
#nav a:hover {
背景位置:0% -42px;
}
#nav a:hover スパン {
背景位置:100% -42px;
}

リスト 2. タブベースのナビゲーションの HTML コード

コードをコピー

コードは次のとおりです。

<div id="nav">
<ul>
<li><a href="#" title="リンク 1"><span>リンク 1</span></a></li>
<li><a href="#" title="リンク 2"><span>リンク 2</span></a></li>
<li><a href="#" title="リンク 3"><span>リンク 3</span></a></li>
<li><a href="#" title="長いリンクテキスト"><span>長いリンクテキスト</span></a></li>
<li><a href="#" title="リンク 5"><span>リンク 5</span></a></li>
</ul>
</div>

クッキーの使用状況を確認する
クッキーは非常に小さなファイルですが、ブラウザはそれをダウンロードする必要があります。クッキーが大きいほどダウンロードに時間がかかり、ブラウザが Web ページを読み込むのにかかる時間も長くなります。このため、ブラウザの応答時間への影響を最小限に抑えるには、Cookie をできるだけ小さく保つことが重要です。

さらに、有効期限を早めに設定するか、有効期限を設定しない場合は、応答時間が改善される可能性があります。 PHP で Cookie の有効期限を設定するには、次のコードを使用します。

コードをコピー

コードは次のとおりです。

<?php
$expire = 2592000 + 時間();
// 現在の時刻に30日を加算します
setcookie(ユーザーID、「123rrw3」、$expire);
?>

このコードは、Cookie のユーザー ID を設定し、有効期限を現在の日付から 30 日後に設定します。

不要な JavaScript コードを含めず、可能な限り外部化してください。Cookie と同様に、JavaScript ファイルのダウンロードには時間がかかるため、ページ全体の読み込み速度が必然的に低下します。したがって、JavaScript を賢く使用し (本当に必要な場合のみ)、スクリプトのサイズと速度を最適化してください。

JavaScript のダウンロード時間を短縮するもう 1 つの方法は、スクリプトをインラインで含める代わりに外部ファイルを使用することです。このアプローチは CSS でも機能します。ブラウザは外部化されたテキストをキャッシュしますが、インラインでコード化された CSS または JavaScript (HTML ページ自体に) は毎回 HTML と一緒に読み込まれるためです。 HTML で CSS および JavaScript コードを参照して外部化するには、次の形式のコードを使用できます。

コードをコピー

コードは次のとおりです。

可能な限りテーブルの使用を避ける
テーブルは Web ページの主要な構成要素として使用されていましたが、ページレイアウト要素としてテーブルを使用することは、現在では不適切な方法と見なされています。場合によっては、表を使用する必要があります (表形式のデータを表示するための優れた方法と見なされます)。その場合は、表のセル、行、列の幅と高さを明示的に指定してください。そうしないと、ブラウザはそれらをどのように表示するかを計算するために多くの作業を行う必要があり、ページの読み込みが遅くなる可能性があります。

コードをコピー

コードは次のとおりです。

不要な要素を削除する

これはおそらく最も明白なヒントですが、最も忘れられやすいヒントでもあります。先ほど「少ないほど良い」と言いましたが、これはより幅広い視聴者にアピールできるだけでなく、ダウンロードして処理する内容が少なくなることも意味します。大量のコンテンツを Web ページに収める必要がある場合は、ページを 2 つ、3 つ、またはそれ以上の個別のページに分割することを検討してください。

ウェブページを最適化するためのヒント

JavaScript ファイルの圧縮、ハイパーテキスト転送プロトコル (HTTP) 圧縮の使用、画像サイズの設定など、Web ページを最適化する方法は多数あります。

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

JavaScript ファイルは非常に大きくなる可能性があるため、場合によっては、他のすべてのコンポーネントを合わせたよりもダウンロードに時間がかかることがあります。この問題を解決する 1 つの方法は、JavaScript ファイルを圧縮することです。多くのブラウザがこの圧縮アルゴリズムをサポートしているため、このタスクを実行するには GNU zip (gzip) を使用できます。

別の方法としては、ファイルを縮小することです。このメソッドは、タブ、改行、スペースなどの不要な文字をすべてコードから削除します。コード内のコメントと空白を削除し、ファイルサイズをさらに削減します。外部スタイルシートと内部スタイルシートの両方を縮小できます。最も人気のある 2 つの縮小ツールは、JSMin と YUI Compressor です (リソースを参照)。

HTTP 圧縮を使用し、常に小文字の div 名とクラス名を使用します。HTTP 圧縮を使用すると、サーバーとブラウザー間の通信量を削減できます。 HTTP 圧縮は Apache (.htaccess ファイル) で設定することも、ページに含めることもできます (PHP の場合は HTTP_ACCEPT_ENCODING オプションがあります)。ただし、すべてのブラウザが圧縮をサポートしているわけではないことに注意してください。圧縮をサポートするブラウザの場合でも、圧縮と解凍によってプロセッサの負荷が増加します。 Apache でブランケット圧縮 (つまり、すべてのテキストと HTML を圧縮) を有効にするには、次のコマンドを使用します。

コードをコピー

コードは次のとおりです。

AddOutputFilterByType DEFLATE text/html text/plain text/xml

また、何を圧縮したいかについても考えてください。画像、音楽、ビデオは作成時にすでに圧縮されているため、圧縮を HTML、CSS、JavaScript ファイルに限定できます。

圧縮の労力を軽減するもう 1 つの方法は、小文字の <div> 要素とクラス名を使用することです。大文字と小文字の区別とロスレス圧縮の使用により、<header> は <Header> とは異なり、2 つの異なるタグに圧縮されます。次の例では、Important クラスはコンプレッサーの important クラスとは異なります。つまり、これらはコンプレッサーにとって異なるオブジェクトを表し、2 つの異なるテキストに圧縮されます。

コードをコピー

コードは次のとおりです。

<div>これを読んでください!</div>
<div>これにより貴重な読み込み時間が無駄になります</div>

細部に注意を払うことは重要ではないようです。ただし、ファイルを最適化するときは、すべての微妙な詳細を考慮する必要があります。

画像サイズを設定する
表のセル、行、列と同様に、画像のサイズを明示的に設定しないと、ブラウザは画像を表示するために計算を実行する必要があり、処理が遅くなります。また、場合によっては画像サイズが正しく計算されず、画像が歪んで見えることもあります。

装飾目的での CSS イメージマップの使用

複数の画像の代わりにイメージマップを使用することは、画像の個々の部分を同時にダウンロードすることでページ全体のダウンロードが高速化されるため、読み込み時間を改善するもう 1 つの方法です。あるいは、 CSS スプライトと呼ばれるものを使用することもできます (関連トピックを参照)。 CSS スプライトは HTTP リクエストの数を減らすのに役立ちます。画像には、ページの装飾やレイアウトに必要なすべてのグラフィック要素を含めることができます。 CSS を使用して、特定の要素に使用するマッピングを (特定の位置と寸法を呼び出して) 選択します。

スクリプトの読み込みを可能な限り遅らせる

先ほど、完全に不要な JavaScript コードを削除すると、読み込み時間と処理時間が短縮される可能性があると述べました。しかし、コードがすでに非常に最小限で、ページに JavaScript コードを含める必要がある場合はどうでしょうか?

この場合、ページのダウンロード速度を上げる 1 つの方法は、ページの下部にスクリプトを配置して読み込みを高速化することです。通常、ブラウザは（同じドメインから）最大 2 つのオブジェクトを同時にダウンロードすることができ、1 つのオブジェクトが JavaScript コードである場合、スクリプトがダウンロードされるまで他のページコンポーネントのダウンロードは一時停止されます。 JavaScript コードをページの下部に配置すると、ほとんどの場合、他のすべてのコンポーネントがダウンロードされた後に最後にダウンロードされます。

Firebug 拡張機能を使用して、読み込みが遅いファイルを追跡します。JavaScript ファイルはダウンロードに最も時間がかかるファイルであると思われます。 JavaScript ファイルを縮小すると役立ちますが、十分ではない可能性があります。次のコードスニペットを使用して、JavaScript の読み込みを延期できます。

コードをコピー

コードは次のとおりです。

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

このコードは、heavy() メソッドの呼び出しを 5 秒遅延します。このコードを次の手法と組み合わせて使用すると、JavaScript ファイル全体の読み込みを延期できます。

オンデマンドでJavaScriptファイルを読み込む
オンデマンドで JavaScript をロードするには、リスト 3 に示すように、import() 関数を使用します。

リスト3. import()関数

コードをコピー

コードは次のとおりです。

関数 $import(src){
var scriptElem = document.createElement('script');
スクリプト要素.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}</p> <p>// キャッシュを避けるためにランダムなクエリパラメータでインポートします
関数 $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + シード);
}

関数の読み込みを確認する関数が読み込まれているかどうかを確認し、読み込まれていない場合は JavaScript ファイルを読み込むこともできます。これを行うには、リスト 4 のコードを使用します。

リスト4. 関数がロードされていることを確認する

コードをコピー

コードは次のとおりです。

if (myfunction){
// 関数がロードされました
}
else{ // 関数はまだロードされていないので、JavaScript をロードします。
$import('http://www.yourfastsite.com/myfile.js');
}

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

CSSファイルの最適化
CSS ファイルは、適切に最適化され、維持されていれば、それほど巨大になる必要はありません。たとえば、多数の個別のクラスを含む CSS ファイルはダウンロード速度に影響を与える可能性があります。 JavaScript ファイルと同様に、CSS ファイルも、適切なサイズを維持しながら必要なものがすべて含まれるように最適化する必要があります。さらに、ブラウザのキャッシュメカニズムに対応するには、インライン定義ではなく外部ファイルを使用します。

コンテンツ配信ネットワークの使用
コンテンツ配信ネットワーク (CDN) は、ダウンロード時間を短縮するもう 1 つの優れた方法です。静止画像をインターネット上の多数のサーバーに配置すると、ユーザーは最も近いサーバーから画像をダウンロードできます。さらに、ほとんどの CDN は高速サーバー上で実行されるため、サーバーの読み込み速度に関係なく、小さくて負荷がかかったサーバーよりも応答が速くなります。

接続性を高めるためにアセットに複数のドメインを使用する
CDN のもう 1 つの利点は、独立したドメインであることです。ブラウザは単一ドメインへの同時接続数を制限しているため、ページが読み込まれるたびにすべてのスレッドが占有されやすくなります。そのため、他の資産への接続が遅延します。ただし、ブラウザは新しいスレッドまたは他のドメインへの接続を開くことができるため、別のドメインから読み込まれたアセットを他のすべてのアセットと同時に読み込むことができます。

必要に応じてGoogle Gearsを使用する

Google Gears (関連トピックを参照) を使用することは、ユーザーが同じコンテンツを何度もダウンロードしなくても済むようにするためのもう 1 つの良い方法です。 Gears を使用すると、ユーザーはオフラインで Web アプリケーションにアクセスできるだけでなく、ページ要素をユーザーのコンピューター上に保持することもできます。そのため、頻繁に読み込まれるが更新されないコンテンツは、SQLite3 リレーショナルデータベース管理システムである Gears データベースに保存できます。同じコンテンツに対するnextすべてのリクエストは、サーバーからではなくデータベースから直接読み込むことができます。

Gears をインストールした後、Gears ファクトリーとアプリケーションプログラミングインターフェイス (API) に簡単にアクセスできるように gears_init.js ファイルを取得し、 gears_init.jsとして保存して、次のようにコード内で参照します。

コードをコピー

コードは次のとおりです。

Gears がインストールされているかどうかを確認するには、リスト 5 のコードを使用します。

リスト 5. Gears がインストールされているかどうかを確認する

コードをコピー

コードは次のとおりです。

<スクリプト>
if (!window.google || !google.gears) {
location.href = "http://gears.google.com/?action=install&message=<ようこそメッセージ>"
+ "&return=<戻りURL>";
}
</スクリプト>

Gears がインストールされていない場合は、コードによって Gears をダウンロードするための URL が提供されます。

すべての要素が検証され、Gears がインストールされたら、リスト 6 の JavaScript コードを使用して、Gears の非常に便利なデータベース機能をテストできます。

リスト 6. データベース機能のテスト

コードをコピー

コードは次のとおりです。

このコードは、コンピューターまたはサーバー上にローカルデータベース db を作成します。テーブル Test が存在しない場合は、テーブルを作成し、テストデータ (Monkey! と時間) を挿入します。コードはデータベースからデータを取得し、それをブラウザにアラートとして表示します。

起こり得る結果を想像してみてください!

PNG形式の画像を使用する
GIF (Graphic Interchange Format) と JPEG (Joint Photographic Experts Group) の画像形式はどちらも廃止されています。PNG (Portable Network Graphic) が将来の形式です。もちろん、GIF や JPEG はもう時代遅れだ、あるいは PNG には欠点がないと言うこともできますが、何事にも長所と短所があり、PNG は最適なファイルサイズで優れた品質を提供します。したがって、選択肢がある場合は、可能な限り PNG 画像を使用する必要があります。

Ajax呼び出しを短く正確にする
2 年前に、非同期 JavaScript + XML (Ajax) として総称されるテクノロジが登場し、ページのリクエストと応答を処理するための革新的なアプローチが提供されました。ただし、多くの場合、Ajax ではブラウザとサーバーの間で大量の通信が必要になるため、ダイヤルアップユーザーはその真の利点を体験する機会が得られない可能性があります。したがって、Ajax 呼び出しを短く正確に保つことができれば、ユーザーが要素の更新や応答を待つために長時間費やすことを防ぐことができます。

大規模なAjax呼び出しを行い、クライアントデータをローカルで処理する

短い Ajax 呼び出しを行うことができない場合、またはそれらの呼び出しで期待どおりの結果が得られない場合は、別のアプローチを検討してください。つまり、必要なものをすべて取得するために 1 つの大きな Ajax 呼び出しを行い、クライアントにデータをローカルで処理させます。この方法では、クライアントは (受信データを取得するために) 一度だけ待機するだけで済みますが、その後は (ブラウザーからサーバーへの通信が不要になると) 処理がはるかに高速になります。もちろん、このチュートリアルで説明できるよりもはるかに多くの Ajax 最適化テクニックが存在します。 Ajax について詳しく知りたい場合は、「リソース」を参照してください。

サンドボックスでコードをテストする
よく忘れられがちなもう一つの一般的なトリックがあります。良識ある Web 開発者は通常、アプリケーションをリリースする前にテストを行いますが、テストによってメンテナンスタスクをあまり真剣に受け止めなくなったり、十分な検討やテストを行わずに新しい機能があまりにも急速に追加されたりすることもあります。その結果、残りのスクリプトによってアプリケーションの速度が低下します。

新しい機能を追加する場合は、まずサンドボックス (アプリケーションの他の部分から完全に分離) でテストして、単一の関数としてどのように動作するかを確認できます。こうすることで、Web アプリケーションの残りの部分を気にすることなく、パフォーマンスと応答時間を繰り返し分析できます。その後、新しい機能が期待どおりに動作したら、アプリケーションの残りの部分に導入し、追加のテストを実行して、機能自体が期待どおりに動作することを確認できます。

サイトコードを分析する

多くのシナリオにおいて、自己反省は良い考えです。幸いなことに、開発プロセスでは、できるだけ客観的に振り返り、実践するのに役立つツールを使用できます。 JSLint のようなツール (リソースを参照) の価値は計り知れません。ただし、そのサイトでは、このツールはコードの潜在的な欠陥をすべて公開するため「イライラすることがある」と述べられており、デバッグが困難になるだけでなく、応答時間も長くなる可能性があります。

JSLintを使用してJavaScriptコードにエラーや不適切なコーディング方法がないかチェックします

完璧な JavaScript コードを書くのに完璧主義者である必要はありません。しかし、多くの開発者はコード分析を真剣に受け止めず、開発プロセスでこのステップを省略することがよくあります。残念ながら、間違いや不適切なコーディング方法はプロフェッショナルらしくないだけでなく、アプリケーションの速度を低下させる可能性もあります。ブラウザがバグや不適切なコーディング方法の処理に忙しい場合、読み込みに時間がかかるだけでなく、デバッグが困難なエラーが発生する可能性もあります。

したがって、優れたコードを取得したい場合は、コード分析ツールの使用を検討してください。利用できるツールは多数ありますが、JavaScript 言語に最適なのは JavaScript Lint (JSLint とも呼ばれます) です (「リソース」を参照)。 Firebug を使用することもできますが、JSLint の方がより正式なものであり、YSlow に含まれています。

孤立したファイルや欠落した画像を確認する
孤立したファイルや失われた画像がないか確認するのは賢明な行動です。ほとんどの Web 開発者は不正なファイル参照をチェックしますが、ここで言及する価値はあります。ファイルが見つからないと、「画像/ページを表示できません」などのエラーメッセージが表示されるため、さまざまな問題が発生する可能性があります。しかし、Web ページの速度最適化に関しては、さらに大きな欠陥があります。ブラウザが欠落したファイルや孤立したファイルを探すときにリソースを消費し、必然的にページの処理速度が低下します。したがって、スペルミスのあるファイル名など、孤立したファイルや欠落したファイルがないか確認してください。

YSlow 拡張機能
YSlow Firebug 拡張機能により、主観的な Web ページ分析はますます時代遅れになります。 YSlow は、Yahoo! が作成した高性能 Web サイトの明確なルールを使用して、Web ページを分析し、ページが遅い理由を通知します。

YSlowでウェブページを分析する
YSlow は比較的小さいですが、非常に便利な Firefox 拡張機能です。 YSlow を起動すると、図 4 に示すように、ブラウザの下部に拡張機能が開きます。

図4. FirefoxのYSlow拡張機能

図 4 はパフォーマンスビューを示しています。ここでは、YSlow がページのパフォーマンスをどのように評価しているかを確認したり、拡張機能が検出した問題を確認したりできます。リスト内のリンクをクリックすると、エラーを説明するページが開きます。改善できるページコンポーネントがある場合、YSlow は改善を提案します。

図 5 に示す「検査」ビューでは、要素を 1 つずつ分析してページを詳しく調べることができます。検査ビューの最も便利な機能の 1 つは、マウスポインターをページ上に移動すると自動的に更新されるため、検査する必要がある行を見つけるためにコードをスクロールする必要がないことです。

図5. FirefoxのYSlow Inspectビュー

名前から推測できるように、統計ビュー (図 6 を参照) には、現在のページに関連する統計データが表示されます。このデータには、空のキャッシュとプライマリキャッシュ、および Cookie が含まれます。

図6. FirefoxでのYSlow統計ビュー

コンポーネントビュー (図 7 を参照) には、現在のページ上のコンポーネントが一覧表示されます。各コンポーネントについて表示されるデータには、ファイルの種類とパス、ページの有効期限、HTTP 応答ヘッダーが含まれます。コンポーネントをクリックして開き、表示します。列見出しをクリックすると、テーブルを昇順または降順に並べ替えることができます。

図 7. YSlow コンポーネントビュー

YSlow は、ページの読み込みを高速化するために役立つ、小さくて便利な拡張機能です。これまで使用したことがない方は、今すぐ使用してください。

結論
Web ページの読み込み速度を最適化するのは、必ずしも複雑である必要はありません。実際、速度の最適化はかなり簡単に実現できる場合がよくあります。この記事のヒントと Web 開発のベストプラクティスに従えば、追加の手順を踏まなくてもページの読み込みを高速化できます。

オンページ最適化のヒントを 1 か所に集めるのは簡単です。このリソースが役に立つことを願っています。しかし、ここに挙げた速度最適化のヒントはこれだけだと思ったら、もっと多くのヒントがあることに驚かれるでしょう。しかし、これら 20 以上のヒントに従うだけでも、ダイヤルアップ接続または専用ブロードバンド接続のどちらでインターネットを閲覧しているかに関係なく、ページの読み込みが速くなり、ユーザーの満足度が向上します。