HTTP/2: 長く待たれた続編

高速な Web の世界に踏み出しましょう Microsoft では、1999 年以来初めて大幅に改訂されたハイパーテキスト転送プロトコル (HTTP) のサポートを現在 Internet Explorer に実装しています。HTTP は長いこと手付かずできたので、改訂が必要でした。 長年にわたり、Web アーキテクチャを合理化するさまざまな取り組みが行われてきましたが、HTTP/2 ほどの規模のものはありませんでした。Microsoft は IETF HTTPbis ワーキング グループのメンバーとして惜しみなく、効率的で互換性の高いこの新しい標準規格の開発に協力してきました。新しい標準規格の名称は、わかりやすく HTTP/2 です。HTTP/2 は、Windows 10 Technical Preview において新しい Internet Explorer に組み込まれ、一般に利用できるようになりました。 HTTPbis ワーキング グループでのこれまでの成果については、Microsoft Open Technologies HTTP/2 ページ (英語) で概要をご紹介しています。 Internet Explorer が率先して HTTP/2 を実装するのはなぜか ますますリアルタイム性とモバイル性が要求される世界では、パフォーマンスが重要です。多少改善されただけであっても、違いが出ます。たとえば、ある Bing の調査により、ページの読み込み時間が 10 ミリ秒増えると歳入が 25 万ドル減ることが判明しました。読み込み時間が 100 ミリ秒 (これは人間が瞬きする速度の 1/3 です)…


8 月分の Internet Explorer 用更新プログラム

8 月分の Internet Explorer の更新プログラムには、最新のセキュリティ更新プログラムの他、WebGL および F12 機能の更新プログラムが含まれています。 Windows ブログでお話 (英語) したように、弊社では今後も既存の月例更新プロセスを利用して、セキュリティ更新プログラムと併せて、機能強化をよりこまめにお届けいたします。 Internet Explorer 11 の新機能 この更新プログラムには、ユーザーと開発者からのフィードバックを基にした機能強化が 4 種類含まれています。このうちの一部は、Internet Explorer 開発者チャネルにおいてプレビューを実施し、皆さまのフィードバックのおかげで、このたびリリースの運びとなりました。 F12 開発者ツールの強化 今回の更新プログラムでは、F12 開発者ツールが大幅に強化されています。ユーザー インターフェイス、コンソール、DOM Explorer、デバッガー、エミュレーション ツール、UI の応答性およびメモリのプロファイリング ツールのすべてにおいて、新機能が追加され、バグが修正されています。 詳細については、マイクロソフト サポート技術情報 2990946 を参照してください。また、F12 の強化については、今後の IE ブログの記事でさらに詳しく説明する予定です。 更新後の F12 UI 応答性ツール WebGL レンダラーの強化 WebGL レンダラーも更新され、ANGLE_instanced_arrays、OES_element_index_uint、および WEBGL_debug_renderer_info 拡張機能、failIfMajorPerformanceCaveat コンテキスト作成属性、16 ビット テクスチャーがサポートされた他、GLSL 対応が強化され、line-loop と triangle-fan プリミティブが追加されました。 また、Windows…


IE チームより季節のごあいさつ

残り少なくなりましたが、今年も皆様には本当にお世話になりました。感謝の気持ちを込めて IE チームよりクリスマスのご挨拶をお届けします。Holiday Lites (英語) は HTML5 と CSS3 で作成された、GPU を活用するデモで、画面上に細かなライトを点灯させながら、ブラウザーのレイアウトとレンダリングのパフォーマンスを測定します。このデモをご覧いただくと、IE11 がコンテンツを徐々に更新していること、つまり、ページ全体のレイアウトとレンダリングを開始するのにすべての DOM 操作の完了を待つ必要がないことがおわかりいただけると思います。HTML5、CSS3、Border-Image、Flexbox、MP3 オーディオ、電源効率に優れたタイマーなど、さまざまなテクノロジが駆使されたデモをぜひお楽しみください。 Holiday Lites (英語) では、ブラウザーのレイアウト/レンダリング パフォーマンスをテストできます この一年を振り返って この一年を振り返ってみると、Web がさらに飛躍的な進化を遂げたことに感動さえ覚えます。IE チームにとっても楽しい一年でした。特に IE11 の Windows 8.1 版と Windows 7 版は、IE10 から 1 年もたたずに公開できました。タッチ、セキュリティ、ネットワーク、編集などさまざまな面が強化された IE11 によって、現実世界の Web サイトを 30% 高速化することができます。もちろん、F12 開発者ツールの刷新も忘れることはできません。 現在の開発者の活躍には目覚ましいものがあります。GlacierWorks (英語) などの新しい取り組みは WebGL の進展なしにはあり得ませんでしたし、ホバー (英語) を始めとする古典的なエクスペリエンスが生まれ変わったのも WebGL のおかげです。また、メディア ストリーミングに関連する最新の各種標準をサポートしたことで、ネットワークの最新状態に順応する、スムーズで滑らかなビデオ再生が可能になりました (Netflix (英語) にてご確認いただけます)。また、modern.IE…


IE11 を始めとする各種ブラウザーで、Web アプリケーションの本当のパフォーマンスを測定する

W3C Web パフォーマンス ワーキング グループ (英語) は、Google や Mozilla を始めとするコミュニティ リーダーと共に、Navigation Timing、Resource Timing、User Timing、Performance Timeline の各インターフェイスの標準化を完了しました。これらのインターフェイスは、Web アプリケーションにおけるナビゲーション、リソース取得、スクリプト実行の実際のパフォーマンス測定をサポートするものです。これらのインターフェイスでは、Web アプリケーションを使うユーザーの現実世界でのエクスペリエンスを測定、分析ができるため、人工的な環境でアプリケーション パフォーマンスを測定する合成テストを使う必要がなくなります。これらのインターフェイスを通して取得できる時間測定データを活用して、Web アプリケーションのパフォーマンス向上に現実的に有効な対策を見極めることができます。IE11 ではこれらすべてのインターフェイスをサポートします。インターフェイスの実際の動作は Performance Timing Test Drive (英語) でご確認いただけます。 Performance Timing Test Drive (英語) では、各種の時間測定 API をテストできます Performance Timeline W3C 勧告として公開された Performance Timeline (英語) 仕様は、IE11 と Chrome 30 がフルサポートしています。このインターフェイスを使うと、アプリケーション内で行われるナビゲーション、リソース取得、スクリプト実行に費やされた時間を最初から最後まで可視化することができます。すべてのパフォーマンス指標は、この仕様が定義する最低限の属性を実装する必要があります。また、どのような種類のパフォーマンス指標を取得する場合も、この仕様が定義するインターフェイスを使用できます。 すべてのパフォーマンス指標は以下の 4 つの属性をサポートする必要があります。 name: パフォーマンス指標の独自の識別子を格納します。リソースの場合は、リソースの解決済み URL になります。 entryType:…

1

IE11 に実装されたさまざまなブラウジング高速化手法を紹介します

Internet Explorer 11 では、ネットワーク待ち時間がブラウジングに与える影響を解消することで、バッテリー寿命、CPU、ネットワーク帯域幅、メモリを浪費することのない、高速でサクサクとしたブラウジングをいつでも楽しむことができます。ネットワーク待ち時間の問題が解消されなければ、かつてないほど広がった現在の帯域幅に見合うだけの Web パフォーマンスは得られません。IE11 では、バックグラウンドでのページと Web リソースのダウンロードおよびプリレンダリング、SPDY/3 プロトコルを使った複数の Web リソースの並列ダウンロード、ページ上で最も重要なリソースの優先ダウンロードによって、ネットワーク待ち時間の影響を最小限に抑えています。 ページ予測、プリロード、プリフェッチ ページの予測、プリロード (プリレンダリング)、プリフェッチなどの IE11 の機能を使うと、次のページを事前にダウンロード/レンダリングしたり、次のページのリソースを事前にダウンロードすることができます。最も一般的なブラウジング パターンに従って、バックグラウンドの非表示タブにページが事前に読み込まれ、構築されます。リンクをクリックすると、このページが瞬時に表示されます。この技術を使うことで、検索、記事を読む、写真を次々にめくるといった Web でよく使う操作を、ローカル コンテンツの場合と同じ程度にまで高速化できます。 IE11 が提供する、ページの予測、プリロード、プリフェッチ機能を使えば、Web でよく使う操作を高速化できます IE11 は、IE の「ページ予測」テクノロジによって得られる情報と、サイト開発者が設定するマークアップが提供する情報を根拠に、プリロードとプリフェッチの対象を判断します。 自動ページ予測を使って Web ページをプリロードする Internet Explorer は、ユーザーが次にアクセスするページを自動ページ予測機能を使って予測し、そのページを事前に読み込むことで、ほぼ遅延を感じさせないページ ナビゲーションを可能にします。この予測のために、Microsoft は、さまざまなブラウジング パターン、ブラウズ中のユーザーの習慣、さらに、ページ上の手掛かり ([次へ] リンクやページ番号など) を分析しています。予測精度の向上には、Bing 事業を通して Web とデータ マイニングに関する研究を深めたことが大きく貢献しています。 たとえば、最新の Internet Explorer を使って記事を読む場合、ページ フリップを使うと次のページが事前にレンダリングされるため、ユーザーはスワイプで次々にページを進んでいくことができます。見たいものがすぐに見つかる、自然で楽しい雑誌のような感覚がよみがえります。この機能については Page Prediction Test Drive (英語) を参照してください。 Page…

3

EtchMark の内部のしくみ: タッチ、マウス、ペン、そしてデバイス シェイクを処理する Web サイトの構築

EtchMark は昔からおなじみのお絵描きおもちゃの新しいバージョンであり、IE11 の向上したタッチ サポートと最新の Web 標準 (ポインター イベント、デバイスの方向など) を紹介するサンプルです。この記事では、サイトに簡単に追加できるいくつかの機能について説明します。それらの機能を使用すると、タッチ、マウス、ペン、キーボード、さらにはデバイス シェイクにも対応して、スムーズで自然な操作感を実現できます。 デモの構造 EtchMark では、タッチ、マウス、ペン、または方向キーを使用して、画面上に自由に線を描くことができます。 描画サーフェスは、つまみを回すと更新される HTML5 Canvas 要素です。 ベンチマーク モードでは、requestAnimationFrame API を使用して、60 フレーム/秒のスムーズなアニメーション ループを行い、バッテリ寿命を延ばします。 つまみのドロップ シャドウは、SVG フィルターを使用して作成します。IE11 のハードウェア アクセラレーションによって、この作業の大部分が GPU に移されるので、非常に高速なエクスペリエンスが実現できます。 以下のビデオで、これらの機能の動作を確認してください。その後、実際の構築方法の説明に入ります。 EtchMark では、HTML5 Canvas、requestAnimationFrame、SVG フィルター、ポインター イベント、および Device Orientation API を使用して、昔からおなじみのおもちゃの新しいバージョンを作成します ポインター イベントを使用するタッチ、マウス、キーボード、およびペン ポインター イベントを使用すると、マウス、キーボード、ペン、およびタッチのいずれを使用しても、1 つの API に対するコードを記述するだけで、同じようにうまく動作するエクスペリエンスを構築できます。ポインター イベントは、Windows デバイス全般でサポートされており、間もなく他のブラウザーでもサポートされます。 ポインター イベント仕様は W3C の勧告候補となり、IE11 ではプレフィックスを使用しないバージョンのポインター イベントをサポートしています。 まず、最初に行う必要があるのは、Knob.js のポインター イベントの接続です。最初に標準のプレフィックスを使用しないバージョンを確認し、その確認が失敗したら、IE10 をサポートできるようにするために必要な、プレフィックスの付いたバージョンに戻ります。 次の例で、hitTarget はつまみの画像を含む単純な…


modern.IE の新しいパフォーマンス スキャン ツールによる実際のサイトの高速化とユーザー エクスペリエンスの向上

本日、modern.IE コード スキャナーの改良版がリリースされました。このツールを使うと、実際のサイトのパフォーマンスの改善につながり、ユーザーが訪問先のサイトで実際に行う操作に影響する可能性がある一般的なパターンを認識することができます。さらに、新しいチュートリアルも公開しました。このチュートリアルでは、swish.com で modern.IE と Internet Explorer 11 の F12 開発者ツールを組み合わせて使用し、Internet Explorer を始めとする最新ブラウザーでホーム ページのパフォーマンスを 40% 向上させる方法を紹介しています。今後も modern.IE を定期的に更新し、開発者がブラウザー互換性を短時間で検証できるようにするためのツールを提供する予定です。 modern.IE の新しいパフォーマンス スキャン ツールにより各種の最新ブラウザーでページを表示したときの応答性が向上します。 スキャンによる Web パフォーマンスの評価 スキャンを実行して、5 種類の一般的なパフォーマンス パターンを検出できます。多くの場合、推奨される修正は簡単に実行でき、しかも修正後はパフォーマンスが目に見えて改善されます。次に、新しいツールについて簡単に紹介します。 画像の最適化このテストでは、Web ページの画像をスキャンした後、kraken.io などの画像最適化サービスを利用してページの読み込み速度を改善する方法を提案します。現在の Web サイトのトラフィックの 60% 以上は画像データで占められています。ユーザーが Web ページのブラウジングに使うデバイスは、携帯電話から大画面 TV まで、さまざまです。デバイスに応じてブラウザーに送信する画像の解像度を調整できれば、ユーザー エクスペリエンスが大きく改善される可能性があります。 圧縮コンテンツこのテストでは、Web ページで gzip などの圧縮テクニックが使われているかどうかを判別します。画像最適化と同様に、コンテンツを圧縮しておき、ユーザーの要求に応じてコンテンツを圧縮解除することで、サイトのパフォーマンスを向上することができます。 コンテンツのプリレンダリングこのテストでは、ユーザーが次に表示する可能性が最も高いコンテンツを特定し、そのコンテンツをブラウザーで事前に取得できるようにするための HTML マークアップを検出します。この手法を使うと、ユーザーがサイトの奥に移動するほどページの表示速度が速くなるため、実際のサイトのパフォーマンスが大幅に向上する可能性があります。開発者は、Web ページ全体のプリレンダリング、個々のリソース ファイルのプリフェッチ、DNS 名の事前解決を要求することができます。どの場合も、1 行分のメタデータを追加するだけでパフォーマンスを向上できます。 ページ フリップ ブラウジングこのテストでは、Web…

6

ハードウェアを使用して Internet Explorer 11 での JPG 画像のデコードと読み込みを最大 45% 高速化

Windows 8.1 上の Internet Explorer 11 と Windows ストア アプリは、画像のデコード パイプラインを部分的にグラフィックス ハードウェアにオフロードします。その結果、画像の読み込みが最大で 45% 高速化するほか、メモリの使用量も最大で 40% 減少し、バッテリの寿命が延びます。今日の Web でダウンロードされているデータのほとんどは、主に画像です。IE11 では、JPG 画像の読み込みのパフォーマンスを高めるために、処理をはるかに高速かつ並列的に実行できる GPU にデコード処理の一部を任せることで、JPG のデコードを効率化しています。 JPG 画像の形式 今日の Web でダウンロードされるデータの実に 61% は画像であり、要求される画像の 47% は JPG 画像です。IE11 では JPG 画像のデコードにハードウェアを効率的に使用することから、以前のバージョンの IE よりも JPG 画像の読み込みが最大で 45% 高速化し、メモリ使用量も最大で 40% 減少しています。 こうしたパフォーマンスの向上について把握する第一歩として、JPG 画像の通常のエンコード方法を確認しましょう。JPG のエンコードの最初のステップでは、ビットマップを RGB 色空間から YCbCr 色空間に変換します。 RGB は、赤、緑、青の 3…

6

Windows 7 向け IE11 Release Preview: 他のブラウザーを 30% 上回る高速さと Web 標準のさらなるサポート拡大

Internet Explorer 11 は前バージョンに続き、高速で滑らか、かつタッチ操作に最適化された最高の Web エクスペリエンスを、あらゆる画面サイズのあらゆる Windows デバイスに提供します。本日ダウンロード提供を開始された Windows 7 向け IE11 の Release Preview は、パフォーマンス向上により他のブラウザーよりも 30% 高速になり、最新の Web 標準が新たにサポートされたほか、Windows 7 向け IE11 の Developer Preview でいただいたフィードバックに応えて開発者ツールがさらに改良されています。 Windows 7 向け IE11 Release Preview の強化されたパフォーマンスと開発者ツールを紹介するビデオ Windows 7 向け IE11 は、高速さと安全性、既存の Web サイトとの互換性を保ちながら、魅力的でインタラクティブな新しい Web エクスペリエンスをユーザーに提供します。最新の Web 標準やテクノロジをサポートし、さまざまなデバイスへの対応を容易にする IE11 は、開発者の方にとっても嬉しいブラウザーです。新しい F12 ツールで、高パフォーマンスな Web エクスペリエンスを、よりすばやく効率的に構築することができます。 さらに高速になった Web エクスペリエンス パフォーマンスは、Web…

2

IE11 の F12 開発者ツールによる Web サイトおよびアプリのデバッグとチューニング

Windows 8.1 と Windows 7 の Internet Explorer 11 では、根本的に再設計され強化された開発者ツールをブラウザー内で利用できます。開発者はこのツールを使用して、最新の Web サイトおよびアプリの開発、診断、最適化を複数のデバイスで実行することができます。Web 開発者の迅速で効率的な作業を可能するこの新しいツールは、略して F12 と呼ばれます。 Visual Studio チームと IE チームの共同開発によって生まれた F12 の核となる原則は、実用的なデータを提供して問題の特定から解決までをスムーズに導くことです。新しい F12 は、パフォーマンスの問題の診断および修正ツールと、IE によるアプリのレイアウトとレンダリングの状況を詳細に理解できるツールを通して、高速で滑らかな Web エクスペリエンスの提供を可能にします。F12 は、最先端の Web 開発者が求める高速で反復的なワークフローをサポートします。 包括的なツールセット 開発者の皆様は、新しい F12 を使用して、特定した問題をすばやく解決することができます。いくつかの重要な新機能を以下に示します。 UI の応答性およびメモリのプロファイリング ツール: 高速で滑らかな Web アプリの開発を支援します。 リアルタイムの DOM エクスプローラーと CSS 検査ツール: ページと同時に更新されるため、レイアウトとスタイルに対する動的コンテンツの影響を反復的に確認できます。 JavaScript デバッグ機能: ページを更新しなくても開始されるため、必要な作業にすばやく着手できます。 その他にも、以下を始めとするさまざまな強化機能を通して、高速で反復的なワークフローの提供が支援されます。 ツールをすばやく呼び出せる [要素の検査] 右クリック メニュー項目 キーボード操作対応のエクスペリエンス…

1