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を推奨した。