高速読み込みフレームワークのユーザーインプレッションのガイドライン

Question

ウェブページの実際の読み込み時間とその読み込み時間のユーザーインプレッションはかなり異なる場合があります。

• が完全にすぐに（例えば、トップナビゲーション）をレンダリングするが、コンポーネントのロードページのかつて
• 部品でレンダリングするために空白のページを待っている：例えば、ここではページがロード中にユーザーが持つことができる3つの異なった経験がありますJavaScriptフレームワークは、より一般的になるよう 個別
• ページ全体を個別に

をロードコンポーネントから構成され、これら異なるUIの経験は、そのような反応したり角として、より一般的になります。

Loading...や回転ホイールのように、個々のコンポーネントでマーカーの読み込みを使用して何かが起こっていることを示している場合でも、ユーザーのUIエクスペリエンスを変更することができます。

高速読み込みページのユーザー印象を改善するためのガイドラインは何ですか？何もない場合、どのようにこの問題にアプローチしますか？

Answer 1

javascriptが解析されて実行されている間、最初のヒットが常に起こります。すぐに、それははるかに応答感じさせるためにあなたのウェブページの「必需品」をロードします「重要な」ペイロード最初にお届けする

• ：あなたは非常に高速な初期負荷の後にある場合は、次のようないくつかのテクニックを試みることができます。 Webpackには、この効果に使用できるコード分割機能があります。
• ジャバスクリプトサーバー側を実行し、HTMLペイロードに出力を埋め込むサーバーサイドレンダリング（つまり、ユニバーサルスタイルのアプリケーション）を利用します。これは、そうでなければそうなるほど「点滅する」部品を得られないので、おそらく後のものに対して最良の結果をもたらすでしょう。これはかなりクールなテクニックですが、おそらくより技術的な課題があるので、自分のトレードオフを決める必要があります。

あなたはSSRの例の後にある場合は、私が最近リアクトのために一緒に入れ定型で見ることができる：私は実際にも定義されたルートに基づいてのWebPACKのコード分割機能を利用すること定型でhttps://github.com/ctrlplusb/react-universally

アプリケーション内でこの上のチェックアウトのWebPACKのドキュメント：https://survivejs.com/

： https://webpack.github.io/docs/code-splitting.html

のWebPACKはあなたに全く新しいものである場合、私は非常に生き残るJSシリーズをお勧めします