Webサイトを“速く”表示させる7つの計測ポイント
株式会社ライブドアマークアップエンジニア 浜 俊太朗
2009/3/24
FirefoxやYSlowを使ってWebサイトの問題点を探るには？ ライブドアブログを速くした著者が7つのポイントを伝授します（編集部）
Webサイトは“見た目”が重要なのは当たり前だが……
- - PR -
皆さんは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サイトの高速化はデザイナもひとごとじゃない！ |
||
WebデザイナのためのHTMLチューニング入門 バックナンバー 連載インデックスへ»
- 第1回 Webサイトを“速く”表示させる7つの計測ポイント
- 第2回 Webページを速く見せるための5つのちょっとした工夫
- 第3回 CSS Spriteなどブラウザとサーバの通信を減らすテク
- 最終回 便利なライブラリや動画に潜むWebデザインの3つの罠
 |
「デザインハック」コーナーへ |
- いまさら聞けないTwitter超入門−＠IT記事も対応なう （2010/2/4）
Twitterは最近話題のつぶやきツール。基本的な使い方から、iPhoneアプリの使い方、RTの解説、4人のご意見番の活用例や感想まで - HTML5は開発者側の都合。ユーザーには関係ない （2010/2/2）
3つのレンダリングエンジンを載せている“国産”ブラウザベンダは、HTML5やWeb/ブラウザの進化について何を語るのか - テキスト・フォント周りをキレイに見せるCSS、13選！ （2010/1/29）
無数にあるCSSのプロパティを大まかに分類し、1つずつ紹介していく本連載。初回は、テキスト・フォント周りについて - OpenGL ESが大変な3Dアプリ開発を楽にするUnity （2010/1/27）
iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
 |
|
|
|
|
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは？ 仮想化運用管理のキモは意外なところに！ New！ |
| ◆ | 操作もマニュアルも分かりやすい！ ユーザー視点で開発されたPC管理ツール New！ |
| ◆ | 仮想化すればコストは削減できるか？ 仮想化に必要な「3つの視点」を解説する |
| ◆ | セキュリティを知り尽くす上野氏が登壇！ ＠ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
| ◆ | 世界に通用するストレージの作り方とは？ 製品に込めた思いを富士通の開発者に聞く |
| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫？ 情報漏えいを防ぐ管理手法とインフラは？ |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |
| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ！ Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | ＠IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |
| ◆ | ＠IT「Windows 7」 特設サイトオープン！ 最新情報・移行ノウハウを公開しています |
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。