ヤフーユーザーインターフェイスブログ（YUIBlog）

予圧モジュール：YUI 3ギャラリーで

数週間前、ストヤンステファノフは（ @ stoyanstefanov ）の結果公開を実行せずに、事前にコンポーネントをプリロードについての彼の研究を 。 この手法は、キャッシュされたリソースを利用して連続したページのパフォーマンスを向上させることができます。

レバレッジこれらの結果をに、我々はそれを移植することを決めたYUI 3 "と呼ばれる新しいモジュールとギャラリー·プリロード YUI Loaderを介して利用できるようになりました"。

見てみましょうプリロードの例 ：

  YUI（{
     / /最後のギャラリーは、このモジュールのビルド
    ギャラリー： "ギャラリー -  2010年5月5日-19-39 '
 }）{（ 'ギャラリー·プリロード "関数を（Y）を使用して
   Y.preload（[
     、 'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.png~~V'
     'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.js'、
     'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.css'
   ]）;
 }）; 

どのようにこのモジュールは、ユーザーエクスペリエンスを向上させるのでしょうか？

最近では、Webアプリケーションには、JavaScript、CSSや画像の面で大きなフットプリントを持っています。 これらの各カテゴリ内のファイルのほとんどは静的であり、キャッシュ機能のためにCDNを介して提供することができます。 これらのファイルのいずれかをダウンロードしてキャッシュされると、ブラウザが同じページに対する後続の要求で同じファイルをダウンロードする必要はありません。 しかし、まだ、我々は最初のページ要求に大きな影響を与えます。

最近の研究では示唆している0.1秒[100ミリ秒]ユーザーは、システムが瞬時に反応していると感じることの限界についてである。以上のユーザせっかち （ ヤコブ·ニールセン ） になるよりも 。 同じロード·プロセスにも当てはまります。 我々は必要とするか、または私達のアプリケーションでは、先に私たちのユーザの期待の滞在するために高速に実行します。

FacebookやGmailなどのWebアプリケーションと、ユーザーは、通常ログ·インする最初のがある。 これは、 "プリロード"は理にかなっている古典的なシナリオです。 我々は、すべてのユーザーがフォームとの相互作用は5〜10秒を過ごすことになりますと見積もることができます。 この間、我々のアプリケーションは何もしていません。 我々はバックグラウンドでキャッシュファイルをロードするには、この時間を使用することができた場合、ユーザーがログインプロセスを完了したときに、それらのファイルがキャッシュに利用できるようになります - 私たちはここで、S /彼は次の起こっ​​ている知っているので、我々は彼/彼女が必要とする正確に知っている。 一般的に、予測可能なユーザーパス（フォームワークフローを含む）任意のWebアプリケーションが利用するこの技術をすることができます。

この手法は新しいものではありません、しかし、ストヤンが指摘したように、スクリプトを実行したり、CSSを注入または画像そのものを表示せずにそれを行うには難しい、これらのポスト負荷ステップに関連付けられたコストがあり、我々は避けるべきそのコストを支払う。 また、いくつかのケースでは、これらのファイルは、最初のページとうまく再生されません。 競合を回避し、代わりにソリューションを配置する時間を最小限にするために、我々は現在のページでそれらを使用せずにこれらのファイルがキャッシュに含まれるように保証する必要があります。

このプロセスは完全に無害である必要があり、ユーザーが移動またはファイルがダウンロードされ、キャッシュされる前にロードするプロセスを停止した場合でも、フォールバックの場所に常に - デスティネーションページはファイルを直接ロードしようとします。

次のコードを使用してこのアプローチを実装する方法を示しています。 gallery-preloadモジュール：

  YUI（{
     / /最後のギャラリーは、このモジュールのビルド
    ギャラリー： "ギャラリー -  2010年5月5日-19-39 '
 }）。使用（ "イベントフォーカス"、 "ギャラリー·プリロード"は、関数（Y）{
   / /待っているユーザーは、ロードの資産を起動するには、input要素に焦点を当てまで
   Y.on（ "フォーカス"は、関数（）{
     Y.preload（[
       、 'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.png~~V'
       'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.js'、
       'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.css'
     ]）;
   }、 "myFormというinput.query"）;
 }）; 

ユーザーがフォームのターゲットページで使用される資産のロードを開始するためのフォーム入力要素の一つに焦点を当ててまで、この例では、スクリプトが待っています。 これは、ユーザーがフォームを送信後、ページの読み込み時間を改善します。

違いはチェックを直接ページにアクセスし、前もってYUI 2/YUI 3つのコンポーネントのセットをプリロードの間には：

プリロードするコードの数行を含むコンポーネントのこのセットは、このページは4倍高速にロードすることができます。 変更は、アプリケーションのロジックに必要とされず、変更がターゲット·ページにする必要はありません...安価で効果的なパフォーマンスが調整。

もう一つの特徴：

また、以下の積極的なになりたい人のためのより高度な機能が含まれています。 モジュールは、内蔵の統合が含まれていニコラスZakas "アイドルタイマモジュールを 、ユーザが一定期間非アクティブである場合にのみ、アイドルタイマーは、プリロード·ファイルに私たちをことができます。 次に例を示します。

  YUI（{
     / /最後のギャラリーは、このモジュールのビルド
    ギャラリー： "ギャラリー -  2010年5月5日-19-39 '
 }）{（ 'ギャラリー·プリロード "関数を（Y）を使用して
  ユーザーが少なくとも100msの間アイドル状態のときにのみ、/ /ファイルをプリロード
   Y.preloadOnIdle（[
     、 'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.png~~V'
     'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.js'、
     'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.css'
   ]、100）;
 }）; 

結論：

それは前にユーザーの皆様のことが重要です。 私たちのWebアプリケーションのワークフローを知って、このプリロード技術を活用して、私たちは全体的なユーザーエクスペリエンスの改善に役立たせていただきます。 それは我々のアプリケーションの複雑さを増加させずにそれを行うことも重要です。 この新しいコンポーネント （ gallery-preload ）、これらの目標の両方で提供しています。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！