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