ランディングページの背景画像のサイズ
およそ112kbのホームページ/ランディングページで背景画像を使用していますが、直帰率が高いことに気付きました。
この画像は、負荷と外観のしきい値を超えていますか？
サイズが大きいのは、background-size: coverプロパティ。私はJPEGを最適化しましたが、これは安くてピクセル化されているように見えることなく、私が得ることができる最小のサイズです。
ランディングページの画像サイズに関する提案や考えはありますか？
さまざまなブラウザやオペレーティングシステムを指す場合、これはかなり「全体」です。また、IE用に別のスタイルシートを用意しているので、この問題の原因にはなりません。
ここで最も重要なことは、ページのレンダリングが画像のダウンロードによってブロックされるかどうか（または画像がロードされる前にページが信じられないほど醜いか使用できない場合）です。特定の例では、レンダリングによって何もブロックされていません（Chromeではテキストが少しシフトします）。
レンダリング時間は総ダウンロード時間;よりも重要であることを覚えておいてください。これは "Time to first Paint" であり、ユーザーが「ロードされたページ」と見なすもののより正確なインデックスです。ダウンロードする時間は、ページをlook準備するために、または少なくともユーザーがそれを使い始めるために。 現在、ペイント速度に焦点を当てた索引もあります 。
画像は通常、HTMLでのインターフェースのロードを妨げないことに注意することが重要です。 HTMLドキュメントとCSSが最初に読み込まれるため、画像が最初のページレンダリングの大部分をブロックすることはありません。画像の寸法がHTMLで指定されている場合、画像の読み込み時に再描画はほとんどありません。
読み込み時間に注意してください。 読み込み時間は直帰率に直接影響します 。可能であればA/Bテストを実行し、画像がないか小さいか、読み込みが速いほど直帰率が向上するかどうかを確認します。 読み込み時間に関するここでの私の答えも参照してください 。
セットのサイズはありませんが、もちろん一般的には小さいほど良いです。画像を破棄することは、ウェブサイトの速度を上げるための非常に迅速な方法ですが、ランディングページの画像の場合、ヒーロー画像のドロップは多くの場合望ましくありません。興味のある製品/サービス/アイテムをまったく示さない場合、結局それは素晴らしい第一印象を与えないかもしれません。
画像をポストロードして、応答性の印象に役立てることができます。直帰率を制御するには、主にインタラクティブページのレンダリングに集中する必要があります。画像が2〜3秒以上ポップインしない限り、安全である必要があります。
UXの問題と同様に、統計情報を確認します。何よりもユーザーの期待に依存します。 Web Page Test のような優れたツールを使用して、すべての主要ブラウザで速度をテストしてください。 ChromeとIEのように、ブラウザ間でhugeの差異がある場合があります。
1秒未満であるとおっしゃっていたので、許容範囲内である必要があります。ユーザーは遅延に気づくでしょうが、その間、サイトの邪魔になりません。
これが Jackob Nielsenが開発した経験則 です。
- 0.1秒は、システムが瞬時に反応していることをユーザーに感じさせるための制限です。つまり、結果を表示する以外に特別なフィードバックは必要ありません。
- 1.0秒は、ユーザーが遅延に気づいたとしても、ユーザーの思考の流れが中断されないようにするための制限についてです。通常、0.1秒を超え1.0秒未満の遅延の間は特別なフィードバックは必要ありませんが、ユーザーはデータを直接操作する感覚を失います。
- 10秒は、ユーザーの注意をダイアログに集中させるための制限とほぼ同じです。より長い遅延の場合、ユーザーはコンピューターが完了するのを待っている間に他のタスクを実行する必要があるため、コンピューターがいつ完了するかを示すフィードバックをユーザーに提供する必要があります。遅延中のフィードバックは、応答時間が非常に変動する可能性が高い場合に特に重要です。ユーザーは何を期待するかわからなくなるためです。