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 ページに "戻る" と "進む" のリンク関係が実装され、連続する Web ページをブラウザーが予測できるようになっているかどうかを検出します。たとえば、複数のページで構成されるニュース記事をブラウジングする場合や、ショッピング サイトで商品の検索結果が複数のページに表示されるような場合です。ページ フリップ ターゲットを利用すると、ユーザーがスワイプ ジェスチャを完了する前にページの読み込みが開始されます。タッチ対応デバイスでブラウジングするユーザーがこれまでになく増加しているため、快適な速度と応答性で利用できる Web サイトが求められています。

HTML5 input
このテストでは、HTML5 input 型を検出します。これは、ユーザーの入力内容を高いパフォーマンスで検証できる標準的な手法です。HTML5 input 型が Web の標準になるまでは、JavaScript で検証機能を独自に作成する必要があり、ブラウザー組み込みの入力検証機能よりも速度が劣る場合がありました。

IE11 と Web 上で利用できる強力なパフォーマンス ツール

modern.IE スキャン ツールは、Web ページのパフォーマンスを向上し、IE11 の新しい F12 開発者ツールの機能 (パフォーマンスの問題を診断して修正するために役立つ、UI の応答性およびメモリのプロファイリング ツールなど) を補完するために活用できる、数多くの一般的な手法を検出します。多くの場合、パフォーマンス ツールは組み合わせて使用されます (webpagetest.org と PageSpeed Insights の組み合わせなど)。これは、サーバーの応答、ネットワーク接続、モバイル機器でのブラウジングなど、さまざまな種類のパフォーマンスを各種ツールを使って評価するためです。

IE11 の F12 開発者ツールの UI の応答性およびメモリのプロファイリング ツールでは Web サイトのパフォーマンスの診断と修正を実行でき、modern.IE の機能を補完します。

ツールを試して賞品を獲得しましょう

現在、modern.IE と IE11 の F12 開発者ツールを使って Web サイトの速度を改善しようという "11% for 11" チャレンジ企画を開催しています (無料ピザをプレゼント中)。詳しくは、こちらをクリックして IE ブログをご覧ください。

いつもながら、皆様のフィードバックをお待ちしております。皆様のフィードバックを modern.IE と F12 開発者ツールに反映することで、開発者がテストに費やす時間を減らし、革新的な Web エクスペリエンスの構築に取り組む時間を確保するために貢献できます。ご意見ご要望がありましたら、メールまたは Twitter (@IEDevChat) でお問い合わせください。バグの報告は、Connect をご利用ください。

Internet Explorer 担当グループ プログラム管理者
Sandeep Singhal