Webサイトを“速く”表示させる7つの計測ポイント
株式会社ライブドアマークアップエンジニア 浜 俊太朗
2009/3/24
FirefoxやYSlowを使ってWebサイトの問題点を探るには？ ライブドアブログを速くした著者が7つのポイントを伝授します（編集部）
Webサイトは“見た目”が重要なのは当たり前だが……
皆さんはWebサイトを作るときに、どのようなことを意識していますか？
デザイナや主にHTMLのコーダー／マークアップエンジニアと呼ばれる職種に就いている人は、やはり“見た目”を強く意識しているのではないでしょうか。
例えば、複数のWebブラウザで同じか近い表示になるようにとか、リリース後の更新業務によって表示崩れが起きないように、などです。もちろんそれは職種の適性として正しいものですが、実はほかにも意識した方がよい重要な要素があるのです。
良い印象を与えるには、“速度”も重要
Webサイトを見たユーザーが、良い印象を受けるのか悪い印象を受けるのかには複数の要素があります。その中で“速度”はとても重要な要素です。
速度とは、開いたWebページが表示されるまでの“待ち時間”のことです。「ブロードバンド全盛の時代に表示速度を気にするなんて！」と思われるかもしれませんが、それは大きな間違いです。そのWebサイトが対象としているユーザー層に、モバイル端末で出先から接続する人や回線速度の遅い国から接続する人がいるとしたら、どうでしょうか？ そのユーザーが満足できるコンテンツが提供できなかったら、これは機会損失になってしまいます。
そして実はPCブロードバンドのユーザーにも影響があるのです。例えば、Amazonでは、「非常に小さな遅延ですら、収入に大きく響いてくるということを発見した
」というデータがありますし、グーグルもページサイズを軽減することのメリットを語っています（参考：Chromeはなぜ速いのか）。Webサイトの表示速度は、制作者が思っている以上に大きな影響を与えるのです。
では、このWebサイトを表示させる“速度”を改善するには具体的にどうすればよいのでしょうか？ それには、まず対象のWebサイトの現在の状態を把握しなければいけません。Webサイトの表示速度を測るツールはいろいろとありますが、本連載では例としてWebブラウザ「Firefox」とそのアドオンを使って、問題の割り出しと解決を目指すことにします。
“速度”を測るために本連載で必要な3つのツール
□ Firefox
＠ITの読者やWebデザイナならば、Firefox自体を知らないということはないと思いますが、一応簡単に説明すると、FirefoxはMozilla Foundationが開発しているWebブラウザです。「アドオン」と呼ばれる拡張機能を追加して用途に応じてカスタマイズできることが大きな特徴の1つです。インストールや詳細については、下記記事を参照してください。
□ Firebug
Firefoxのアドオンの中でWebサイト制作に人気なのが、「Firebug」です。Firebug自体の機能は今回はあまり使用しませんが、次に紹介する「YSlow」を使うためにインストールしておく必要があります。インストールや詳細については、下記記事を参照してください。
□ YSlow
本連載のメインとなるのが、米ヤフーの提供するYSlowです。こちらもFirefoxのアドオンですがFirebugの機能を拡張して使用するので、Firebugがインストールされている必要があります。YSlowは今回のテーマである“速度”を計測・評価してくれるアドオンです。
まずは、これを使って問題点を洗い出していきます。
YSlowを使ってWebサイトの問題点を探るには？
Firefoxの右下、ステータスバーに表示されている虫のアイコンをクリックしてFirebugを起動します。
 |
| 図1 Firebug起動ボタン |
2段目のメニューの中から［YSlow］をクリックします。
 |
| 図2 Firebugの起動画面（画像をクリックすると拡大表示します） |
1段目のメニューの中から［Performance］をクリックします。
 |
| 図3 ［Performance］をクリック（画像をクリックすると拡大表示します） |
計測が始まります。
 |
| 図4 「＠IT」を計測中 |
計測結果が表示されます。
 |
| 図5 「＠IT」の計測結果 |
Firebugは日本語化がされていますが、YSlowはメニュー表示などが英語のままです。そのために少々とっつきづらく感じてしまうかもしれませんが、使うメニューを覚えてしまえばどうということはありません。
まずは、この計測のフローを覚えてしまいましょう。次ページでは、計測結果の見方や、Webサイトを“速く”表示させる7つの計測ポイントを説明します。
| 1/2 |  |
| INDEX | ||
| WebデザイナのためのHTMLチューニング入門（1） Webサイトを“速く”表示させる7つの計測ポイント |
||
 |
Page1 Webサイトは“見た目”が重要なのは当たり前だが…… 良い印象を与えるには、“速度”も重要 “速度”を測るために本連載で必要な3つのツール YSlowを使ってWebサイトの問題点を探るには？ |
|
| Page2 YSlowによる計測結果の見方 Webサイトを“速く”表示させる7つの計測ポイント Webサイトの高速化はデザイナもひとごとじゃない！ |
||
[an error occurred while processing this directive]
 |
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
