折りたたみ部分の上にある大きな画像を事前にロードする必要がありますか？

Question

rel="preload"プロパティに興奮しています。なぜなら、ページのレンダリング時間を短縮できるように見えるからです。

ユースケースは、折りたたみ部分の上に大きな画像があるウェブページです。現在、ChromeはjQuery（かなり重いファイル）を取得するまで、イメージのダウンロードを開始しません。プリロードを有効にすると、それらは並行してダウンロードされます。

しかし私はを他の場所で表示可能なHTML要素に使用するかどうかについての矛盾したレポートを読んでいます（ドロップダウンメニューのようなユーザーのやりとりで表示されるものとは対照的です）。

This postがプリロードされていないお勧めしているようだ：

プリロード使用しないときは：

• 資産が同じページ上のどこかに言及されている場合。
• ユーザーが実際にそのアセットを必要とするかわからない場合。ページのように、訪問者は時間の3％に行きます。

this oneながら、フィナンシャル・タイムズのウェブサイト上で似たような状況のために本当に便利でした示しているようだ：

フィナンシャル・タイムズ紙は、自分のサイトへのリンクプリロードヘッダを導入したとき、彼らは1秒を剃っマストヘッドイメージを表示するのにかかった時間をオフにしてください。

これはなんですか？常に上に表示された折りたたみ部分の画像を表示するための初期のヒントを提供する必要がありますか？それとも、ブラウザに通常の順序でアクセスさせるだけですか？

Answer 1

私は、パフォーマンスの最適化を伴うケースでは、実際にはどちらを行うべきかを決定するためにcreate an A/B testにしたいと思っています。すべての人にベストプラクティスとして適用される画像プリロードのクッキーカッターの答えは実際にはありません。

私の好きな本の最大の教義の一つであるLean Enterpriseは、HIPPO（高額の人の意見）を証明するか否定するA/Bテストに使用されます。特定の意見は、あなたの組織とインターネットの両方で、大きな重みを持っています。その重要性と評判のために、彼らの意見は事実ではないかもしれないが、事実の領域に向かって変化する。

私はパフォーマンスチューニングを扱う愛する別の本でも指摘しています - Code Complete 2nd Ed.この本でMcConnellはコードの一部が最適であると期待しているいくつかのコード例を示していますが、それは貧弱に実行されました（第25章と第26章を参照）。彼の重要なポイントの1つは、のパフォーマンス最適化を常にテストすることです。 テストの価値がない場合は、最初に "高性能"コードを書く価値がありません。 McConnellの前提は、低レベルのコーディング例にのみ適用されるのではなく、フォールドの上に画像をプリロードするなどの高レベルの決定にも適用されます。

プロフェッショナルレベルでA/Bテストの重要性を証明することもできます。私はAmazonのSEOチームで働いていましたが、A/Bはすべてをテストしました。問題の事実は、顧客が何かにどのように反応するかを決して実際には知りません。誰もJeff Bezos以外の顧客の行動を予測することはできません。実際のデータで仮説をバックアップして、自分が行っていることの妥当性を証明したり、反証したりする必要があります。

複数のブログ記事やオンラインソースで、プリロードが優れているかどうかを議論しているにもかかわらず、それが完了するまでそれがうまくいくかどうかは分かりません。異なる人は、異なるパフォーマンス特性と異なるネットワークトポロジなどを持つ異なるサーバーを持っています。どの方法が良いかはわかりませんデータを取得するまでです。 A/Bテストを開始し、プリロードする際に反発率が上がることがわかった場合、治療をダイヤルしてコントロールに戻らなければならないことがわかります。しかし、顧客が待っていて待っていて、以前よりも高いレートでクリックスルーしなければ、あなたは勝者を得て、処理をダイヤルアップします。期間の後に制御コードを完全に削除します。

私は役立つことを願っています。

Answer 2

イメージにrel = "preload"を使用するのは、CSSで見つかる場合のみです。javascriptは、後でページのレンダリングでボトルネックになります。ユーザーエクスペリエンスに有害な影響を与えるか、ページのレンダリングでこの大きなイメージに起因するフローが発生しているかどうかを判断します。

私はあなたの画像が折りたたみの上にあることを理解しています。最初からソースコード内に見つかったら、まずブラウザーでダウンロードするものを優先させます。 一方、あなたはいつでもこの変更をA/Bして、それがあなたのために働くかどうかを見ることができます。

Answer 3

この記事は間違っています。プリロードは、ページに必要なアセットが既に分かっているため、開発者が使用します。プリロードは「ヒント」ではありません。プリフェッチは、資産に必要な可能性があることをブラウザに伝えているという点で、彼が述べていることと一線を画しています。

画像が折りたたみ部分の上にある場合は、画像が必要であることがわかります。これがまさにプリフェッチの対象です。

Addy Osmani of Google

プリロードは、ドキュメントのonload イベントをブロックせずにリソースを要求する にブラウザを強制することができ、フェッチ宣言型です。