Eコマース：ウェブサイトの速度の認識がすべての違いを生む

ウェブサイトの速度がeコマースウェブサイトのコンバージョン率と粘着性に大きな違いをもたらす可能性があることは誰もが知っています。

SOASTAによる1つのケーススタディでは、モバイルページの読み込み速度を改善すると、コンバージョン率が25％以上向上したと主張しています。 ユーザーを最優先するという彼の絶え間ない努力の中で、Amazonの創設者兼CEOであるJeff Bezosは、ページの読み込み速度に夢中になっており、AmazonWebサイトのページ速度を下げるように従業員を絶えず駆り立てています。

モバイルの優位性の高まりにより、ユーザーは低速の接続でWebサイトを閲覧することが多いため、ページの読み込み速度を上げる必要性が高まっています。

YslowやGooglePagespeed Insightsなどのウェブページの速度を向上させるのに役立つツールはたくさんあります。また、cssとjsの縮小とマージ、cssスプライトの使用、ネットワークリクエストの最小化などのさまざまなベストプラクティスがあります。フロントエンドの開発者は、ページ速度が最大化されるようにする必要があります。

私たちが抱えている問題は、標準のベストプラクティスに従い、大きな成果を実現すると、ページ全体の速度を向上させるための努力による収穫逓減がすぐに見られるようになることです。

あなたはますます小さな段階的な改善を行うために多くの時間を費やすことができ、これは費用と時間のかかるプロセスになります。 このレベルで作業するために必要なスキルと経験を持つフロントエンド開発者は、驚くほど希少で高価です。

ネットワークの待ち時間やモバイル接続の速度など、制御できないことがいくつかあるため、rawページの速度で達成できることには限界があります。 3G接続では、600ミリ秒から1秒の間のどこでも、必須のネットワークオーバーヘッドによって消費されますが、これについては何もできません。 希望するページの読み込み時間2秒に基づいて、これにより1秒で遊ぶことができます。 それほど大したことではない。

生のページの速度が非常に重要であることは否定できません。すべての開発者は、最低限、標準のベストプラクティスに従う必要があります。

ただし、この記事では、ページの読み込みを高速化する方法については説明しません。 それについてはたくさんの記事があり、それはすべて少し技術者です。

この記事では、ページ速度の認識に焦点を当てます。
どちらがより重要ですか：ページの読み込み速度と、ユーザーがページの読み込みを認識する速度のどちらですか？

確かに、知覚はユーザーにとって最も重要なものです。

ウェブサイトの速度：第一印象

あなたのウェブサイトのホームページに焦点を合わせましょう。 トップナビゲーション、検索バー、ヒーローバナー、主要なカテゴリへのリンク、カルーセル、および一部のコンテンツが含まれている可能性があります。 ホームページはコンテンツが非常に多い傾向があり、モバイル接続でこのコンテンツをすべてすばやくロードすることは大きな課題になります。

ここで重要なのは、重要なコンテンツの読み込みを他のコンテンツよりも優先することです。ユーザーに、できるだけ早く見ることが重要なものを提供します。

彼らがこの重要な情報を処理している間に、コンテンツの次の層の読み込みを開始できます。

モバイルデバイスでは、コンテンツの多くはスクロールしなければ見えない位置から開始するため、スクロールしなければ見えない位置にあるコンテンツの後にロードする必要があります。 JavaScriptをマージして縮小するのが一般的な方法です。 これは通常、ベストプラクティスと見なされますが、重要度の低いコードよりも重要度の高いJavaScriptの読み込みを優先することができなくなる可能性があります。 代わりに、縮小してマージしたJavaScriptを分割し、必要に応じて段階的にロードすることを検討できます。 検索ボックスをロードする前に、検索を実行するために必要なJavaScriptをロードする必要はありません。 ユーザーは、ページの読み込みに少なくとも2、3秒間、検索フィールドに文字を入力することはありません。

これを非常にうまくやっているサイトを見てみましょう。 Amazonは、アセットとコンテンツの配信を分割して、ユーザーに重要なコンテンツができるだけ早く提供されるようにし、優先度の高い順にアセットを段階的にロードします。

このテストは、良好な3G接続とキャッシュが無効になっているiPhone6シミュレーターで実行されました。 ページが最初に読み込まれた後、ハードリフレッシュを開始しました。

600ミリ秒を少し超えると、ヘッダーに自分の名前が読み込まれ始めます。 また、6つのネットワーク呼び出しのみが行われ、5つのアセットがロードされていることにも気付くでしょう（3つのcssファイルと2つのイメージ）。

ちょうど50ミリ秒後、ヘッダーの主要コンポーネントとリードヒーローバナーが表示されます。 重要なコンテンツが非常に迅速に配信され、追加のコンテンツが読み込まれている間に目と脳が処理するものがあるため、私はすでにスピードを認識しています。

わずか1秒後、メインナビゲーションがロードされます。 この段階ではスクロールバーが表示されていないことに気付くでしょう。 これは、現在、フォールドの下にコンテンツがないことを意味します。 ユーザーが見ることができないこのコンテンツをロードするのに貴重な時間が無駄にされていません。 また、これまでに13件のリクエストしか行われていないことに気付くでしょう。

2秒足らずで、重要なコンテンツの新しいセクションができました。

3秒もかからずに、ページが完全に読み込まれたように感じましたが、実際には、ページ全体が読み込まれるまでに5秒弱かかりました。 これは、実際には60％しかロードされていないのに、サイトが完全にロードされていると認識していることを示しています。

コンテンツ配信の実際のタイミングは人によって異なりますが、これは、重要なコンテンツができるだけ早く読み込まれ、ユーザーがサイトの読み込みが非常に速く始まることを保証するために、Amazonがモバイルコンテンツの読み込みをどのように優先しているかを非常に明確に示しています。

それでは、これがうまく機能しないWebサイトを見てみましょう。 このテストは、以前のAmazonテストとまったく同じツールとネットワーク速度を使用して実行されました。 Charles Tyrwhittサイトは一部のコンテンツに優先順位を付けていますが、Amazonの最適化に近づくためにできることは他にもたくさんあります。

7.5秒近くコンテンツが表示されません。 すぐに、このサイトは私のモバイルデバイスでは遅いと感じています。 サイトはヘッダーコンテンツとヒーローバナーを優先していますが、この時点で90を超えるリクエストが行われていることがわかります。スクロールバーを見ると、コンテンツがスクロールしなければ見えない位置に読み込まれている必要があります。

8.5秒後、カルーセルが読み込まれ始めていることがわかります。 リクエストの数は変更されていません。これは、コンテンツ関連のリクエストの大部分がページの読み込みの最初から行われていることを示しています。

サイトが完全にロードされたと私が感じるのは、ほぼ22秒後です。 ページが完全に読み込まれるまで、実際には合計28.4秒かかりました。 これは、実際には77％が読み込まれたときに、ページが完全に読み込まれたことを認識していることを示しています。

2つの経験の明確な違いを簡単に確認できます。 AmazonモバイルホームページはCharlesTyrwhittホームページよりも大幅に高速に読み込まれますが、ユーザーがさらに高速であると認識できるように努力が払われています。 ユーザーは、ページの合計読み込み時間の12.5％以内に何かが読み込まれるのを確認し始めますが、Charles Tyrwhitt Webサイトのユーザーは、ページの合計読み込み時間の26％以内に何かが発生するのを確認します。 ユーザーが進行状況を確認する前に、Amazonホームページは6つのネットワーク要求を行いましたが、CharlesTyrwhittホームページは90の要求を行いました。

これは、Charles Tyrwhittがウェブサイトを構築した方法で決してユニークではないため、過度に批判的であることを意味するものではありません。 受け入れられているベストプラクティスは多くの分野で守られてきましたが、実際の速度だけでなく速度の認識を改善するために、さらに多くのことができるようです。

CSSを優先してWebサイトの速度を向上させる

フロントエンドの開発者がウェブサイトのcssの大部分を少数のファイルに配置し、インラインではなく常に外部のcssを使用することはかなり一般的です。 これが引き起こす問題は、コンテンツをユーザーに表示する前に、大きなcssファイルをロードする必要があることです。

これに対する解決策は、cssファイルを分割し、重要なコンテンツと順番にロードすることです。 Amazonの例を見ると、最初の6つのリクエストの1つとして、サイズがわずか6.5kのcssファイルが読み込まれます。 このファイルには、ホームページの重要なコンテンツのスタイルを設定するために必要なcssが含まれています。 実際、ユーザーがAmazonモバイルホームページにコンテンツを表示する前に要求されるすべてのcssファイルの合計サイズは40k未満ですが、CharlesTyrwhittホームページでは500kを超えています。

この方法により、重要なコンテンツを非常に迅速にユーザーに配信でき、速度の認識を強化できます。

JavaScriptでも同じことをします

cssに優先順位を付けるだけでなく、JavaScriptでこれを行う方法も検討する必要があります。 ほとんどすべてのeコマースWebサイトは、機能するためにJavaScriptに大きく依存します。 JavaScriptが重要なコンテンツの読み込みをブロックしていない限り、これは問題ありません。 Charles Tyrwhitt Webサイトの例をもう一度取り上げて、ブラウザーでJavaScriptを無効にすると、4.5秒以内にコンテンツが読み込まれるようになります。 これは、そのWebサイトの速度と、重要なコンテンツの前にロードされたJavaScriptがそのコンテンツに影響を与えなかったという私の認識の大きな変化であり、したがって、JavaScriptがそのコンテンツの後にロードできなかった理由はありません。

Web開発者は、AmazonなどのWebサイトが、実際の速度だけでなくWebサイトの速度の認識にも焦点を当てている方法から学ぶことができます。 彼らのウェブサイトは明らかに非常に高速ですが、ユーザーは何よりもユーザーに重要なコンテンツを表示することを優先する方法のために、それをさらに高速であると認識しています。

速度がコンバージョン率に与える影響については多くのことがなされてきました。小売業者は、実際のWebサイトの速度とともに、知覚されるWebサイトのパフォーマンスを最適化するための投資を検討する必要があります。