BT

Webアプリケーションを高速化する50のトリック

作者: Abel Avram , 翻訳者 尾崎 義尚 投稿日 2012年11月26日 |

原文(投稿日:2012/11/22)へのリンク

 

MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。

Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。

1. ネットワークリクエストに迅速に応答する

  • リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。
  • メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。
  • 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。
  • 異なるドメインからのリソースをダウンロードすることによって、同時接続数を最大化する。
  • 接続の再利用。リクエストに応答したときに接続をクローズしない。
  • パートナーサイトから提供されるデータがページロードを遅らせていないか確認する。
  • ネットワークのタイミングコンポーネント–Redirect、Cache、DNS、Request、Responseなど–を理解する。IE9と10のNavigation Timing APIを使用して、それぞれの操作にブラウザが費やしている時間を計測する。

2. ダウンロードバイト数の最小化。Webページをダウンロードする時のデータ量を最小化する。Webサイトからダウンロードされる平均データサイズは777KBで、画像が474KB、128KBがスクリプト、84KBがFlashである。

  • gzipされたコンテンツを要求する。
  • Windowsストア向けに生成されたPackage Resource Indexのようにパッケージにリソースを保持する。これは、必要な時にすぐに利用可能になる。
  • HTML5アプリキャッシュで動的にリソースをキャッシュする。このキャッシュは、一度だけリソースをダウンロードして複数回のネットワーク通信を回避する。キャッシュは、アプリケーションのバージョンが変更された時に自動的にリソースを再ダウンロードする。
  • リソースの“Expires”フィールドを使うことができる時には、キャッシュ可能なコンテンツを提供する。
  • リクエストのIf-Modified-Sinceフィールド設定による条件付きリクエストを使う。
  • リクエストのおよそ95-96%は、1日以上変更されないため、データリクエスト–HTTP、XML、JSON、など–をキャッシュする。合理的な考えではあるが、受信するリクエストはWebサイトの1%以下である。
  • ファイル名の大文字、小文字を標準化する。サーバーは、Icon.jpgをicon.jpgとして認識する場合でも、Webプラットフォームでは異なるリソースとなるため異なるネットワークリクエストを生成する。

3. 効率的な構造化マークアップ。IEは、高速なので最新の標準化されたマークアップを使用している。以前のIE6-IE9マークアップスタイルはIE10で認識することができるが、最新のものほど早くはない。

  • ビジネスWebアプリケーションのために必要なとき、IEをレガシーモードで実行するためにHTMLタグの<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">の代わりに、HTTPヘッダフィールドに“X-UA-Compatible: IE=EmulateIE7”を使う。そちらの方が高速である。
  • スタイルシートは、ページのトップにある<head>の<title>の後にリンクすることで、スムーズな描画を提供することができる。
  • スタイルシートは、ページの下部にリンクしてはいけない。ページが読み込み中に再読込されてしまう。
  • CSSデータ構造の作成と画面描画の同期をブロックしてしまうため、階層スタイルのための“@import”を避けるべきである。
  • ブラウザでHTMLとCSSパーサーのコンテキストスイッチが発生するため、埋め込みとインラインのスタイルを避けるべきである。
  • 必要なスタイルだけにすること。使用しないスタイルのダウンロードとパースを避けるため。
  • JavaScriptのリンクはページの下部にだけにする。これにより、画像、CSSなどがすでに読み込まれ、スクリプトがリソースの待機することなく、コンテキストスイッチを避けることができる。
  • JavaScriptのリンクをページの上部にしない。最初に読み込む必要があるスクリプトがある場合、“defer”属性を使用する。
  • コンテキストスイッチを避けるため、インラインJavaScriptを避ける。
  • 非同期にすべてのスクリプトを読み込んで実行するため、JavaScriptの読み込みに“async”属性を使用する。
  • コードの重複を避ける。世界のWebページの52%には、JavaScriptの二重リンクなど100行以上の重複コードが含まれている。
  • jQuery、Dojo、Prototype.jsなどからひとつのJSフレームワークで標準化する。ブラウザが基本的に同じ機能を提供する複数のフレームワークを読み込む必要がなくなる。
  • –FB、Twitterなど -のスクリプトを読み込まない。これらはリソースを奪い合う。

4. メディア利用の最適化。画像はもっとも利用されるリソースであり、Webサイトでは平均58個の画像をダウンロードしている。

  • 大量の画像のダウンロードを避け、ページの読み込み時間によって最大で20-30を維持する。
  • 複数の画像をひとつにまとめる画像スプライトを使用する。このテクニックは、ネットワーク接続数、ダウンロードバイト数、GPUサイクルを削減する。
  • 画像スプライトは手で作成する。なぜならツールは大きな空スペースを残して、ダウンロードが大きくなり、GPUサイクルが多くなるかもしれない。
  • PNGを使う: ダウンロードサイズ、デコード磁化、互換性、圧縮率の最良のバランスである。JPEGは写真のために使うのがよいだろう。
  • 不要なダウンロードバイトを避けて、サイズ変更のためのCPU処理を避けるため、画像のネイティブ解像度を使用する。
  • 可能な場合、画像からCSS3グラデーションに置き換える。
  • 可能な場合、画像からCSS3 border radiusに置き換える。
  • 移動、回転、傾斜効果にはCSS3 transformsを使用する。
  • 小さな単一のイメージにはData URIを使用する。これは、ダウンロードした画像を保存する。
  • 長時間のダウンロードや処理が必要になる複雑なSVGを避ける。
  • HTML5に含めるときに画像プレビューを指定する。ビデオの内容を識別するために全体をダウンロードするのではなく、画像でプレビューするべきである。
  • Flash、Silverlight、QuickTimeの代わりにHTML5を使用する。HTML5は高速で、プラグインの実行時にシステムリソースを使用する。
  • 積極的にリッチメディアを非同期にダウンロードして、アプリキャッシュに保持する。

5. 早いJavaScriptを記述する。

  • JavaScriptで演算を行うとき、可能であれば整数を使用する。JavaScriptの浮動小数点数演算は、整数演算よりもはるかに時間がかかる。特に計算に集中する時には、Math.floorかMath.ceilを使用して浮動小数点数を整数に変換する。
  • ダウンロードサイズを小さくして、ランタイムパフォーマンスを向上させるためにJavaScriptコードを小さくする。
  • オンデマンドでJSを初期化する。必要になった時に動的にJSを読み込む。
  • documentやbodyなどの変数をキャッシュすることによりDOM操作を最小化する。
  • element.firstChildやnode.nextSiblingのような組み込みのDOMコードを使用する。これらは、サードパーティーが提供するものよりも優れた最適化が行われている。
  • 大量のDOMエレメントにアクセスするときには、querySelectorAllを使用する。
  • 動的にページを構築する時には.innerHTMLを使用する。
  • まとめてマークアップを変更する。
  • 小さく健康的を維持する– 最大で1,000エレメント
  • JSONはXMLよりも高速。
  • ブラウザのJSONネイティブメソッドを使用する。
  • 正規表現を乱用しない。

6. アプリケーションがなにをしているかを知る

  • JavaScriptタイマーを理解する: setTimeoutとclearInterval。使う必要がないときにタイマーを実行しない。また、タイマーを組み合わせない。
  • モニターのリフレッシュレートが60Hzの場合、タイマーは16.7 msで更新される。
  • IE 10/Chrome/Firefoxを使用して画像のアニメーションをする場合、requestAnimationFrameを使用する。これは、描画が必要な時にコールバックされるため、タイマーは必要ない。
  • アプリケーションの表示ステータスを決定するためにvisibility API (document.hidden、Visibilityhange)を使用して、ページが隠れている時には停止する。CPUとバッテリー寿命をセーブする。

Mann氏は、IEのWebページのパフォーマンスを計測して、ページのCPU時間を減らし、並列化を向上させるためにWindows Performance Toolsを推奨した。

 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

タイポ by Mikhailov Eugene

「デコード磁化」→「デコード時間」
「DOM操作を最小化」→「DOM操作を最少化」
「モニターのリフレッシュレートが60Hzの場合、タイマーは16.7 msで更新される。」の後半は「16.7 ms の表示フレームにタイマーを合わせる」?

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

1 ディスカッション
サイト全般について
バグ
広告
記事
Marketing
InfoQ.com and all content copyright © 2006-2016 C4Media Inc. InfoQ.com and 株式会社豆蔵 InfoQ Japan hosted at Contegix, the best ISP we've ever worked with.
プライバシー
BT

We notice you’re using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.