バザールの声

公開: 2024-02-14

大型連休の前日に食料品の買い出しに行ったことのある人なら、駐車場を探してグルグル回り、他の50人が狙っている商品を探すのに苦労する苦労を知っているだろう。これは、誰も自分の e コマースストアで再現したい経験ではありませんが、Web サイトのパフォーマンスを向上させるための努力をしなければ、そうなってしまう可能性があります。

わかりました、わかりました、ちょっと誇張しているかもしれません。一番嫌いなクリスマスソングが店のサウンドシステムで鳴り響く中、中途半端なポテトを見つけようとすることほど悪いことはありません。ただし、オンラインショッピングが提供する利便性を顧客が気に入っていることはわかっています。消費者の 70% 近くが、オンライン小売業者から購入する意欲にサイトの速度を考慮しています。また、オンラインショッピング利用者の大多数は、ページの読み込み時間が 3 秒以下であることを期待しています。

最近 Web サイトのパフォーマンス検査を行っていない場合は、もう検査の時期は過ぎています。ここでは、現在のパフォーマンスを評価する方法と、電子商取引サイトを最適化してスピーディなショッピング体験を実現するために誰でも実行できる手順をいくつか紹介します。

章:

Web サイトのパフォーマンスが重要な理由
ウェブサイトの 7 つの主要なパフォーマンス指標
ウェブサイトのパフォーマンスを測定する方法
電子商取引ウェブサイトのパフォーマンスを向上させる方法
ウェブサイトのパフォーマンスはスピードがすべてです

Web サイトのパフォーマンスが重要な理由

3 秒のロードマークに達しないことが本当に重要なのでしょうか? はい、そうです。 Web サイトの読み込み速度を優先しないと、ユーザーエクスペリエンスの品質が低下し、さまざまな点で良くありません。

まず最も明らかなことは、読み込み時間が長くなると直帰率が増加することを意味します。最初の数回の遅いページ読み込みを最後までやり遂げたユーザーでも、購入する前にサイトを諦める可能性があります。

初期コンバージョン率が低いと、全体的なロイヤルティも低下する可能性があります。最適とは言えないショッピングエクスペリエンスを覚えている顧客は、もう一度試してみる可能性が低く、サイトに誘導されるリンクをたどりたくなくなります。

ウェブサイトのパフォーマンスが悪いと、Google SERP ランキングにも影響します。検索エンジンのアルゴリズムはユーザーエクスペリエンスを優先するため、読み込み速度が遅いページは検索結果で下の方に表示されます。注目を集めようと競争する小規模な販売店は、より早い競合他社に負ける可能性があります。

ウェブサイトの 7 つの主要なパフォーマンス指標

ページの読み込み時間は、単独の Web サイトのパフォーマンス指標ではありません。これは、複数の指標を総合した包括的な評価です。これらの指標のうち 4 つは Google の Core Web Vitals です。

Largest Contentful Paint は、ユーザーが「スクロールせずに見える範囲」、つまり下にスクロールせずに表示できる最大のページ要素の読み込み速度を測定します。
Next Paint へのインタラクションは、「カートに追加」ボタンをクリックしたり、フォームに情報を入力したりするなどのインタラクションに対するページの応答性を測定します。
最初の入力遅延は、ユーザーが Web サイトを操作するとき (たとえば、「カートに追加」ボタンをクリックする) と、ブラウザーがそのリクエストの処理を開始するまでの時間差を測定します。
累積レイアウトシフトは、ページの読み込み中にページコンテンツが移動する頻度を測定します。

これらはユーザーエクスペリエンスに最も大きな影響を与えるため、Google ではこれらの側面が最も重要であると考えています。ただし、ユーザーエクスペリエンスの重要な部分を捉える他の 4 つの指標もあります。

最初のバイトまでの時間は、 DNS プロバイダーがリクエストを受信した後に Web サイトのコンテンツの配信を開始する速度を測定します。
合計ブロック時間は、 Web ページが読み込まれてユーザーが操作できるようになるまでにかかる時間を測定します (ページの読み込み中のブラウザーは操作を処理できないため)。
First Contentful Paint は、 Web サイトのコンテンツの最初のレンダリングにかかる時間を測定します。

これらの指標のいずれかを詳しく知りたい場合は、Google の web.dev サイトで、それぞれの指標が重要な理由とその測定方法について詳しく説明されています。または、サイトのパフォーマンスの測定について説明しているので、そのまま読み続けることもできます。

ウェブサイトのパフォーマンスを測定する方法

Google の無料の PageSpeed Insights を使用すると、サイトのパフォーマンスを簡単に測定できます。このツールは、上記の指標に基づいてサイトを評価し、良好、改善が必要、または不良としてランク付けします。サイトのパフォーマンス、アクセシビリティ、ベストプラクティスの使用、SEO に関するメモも取得できます。

モバイルデバイスとデスクトップデバイスでのサイトのパフォーマンスと、サイトの最適化に役立つヒントを表示するオプションがあります。 Google のウェブエコシステムでは、低価格の生活費で多くの援助を受けられますが、正直に言って、それはすでに起こっています。

レポートを見ていると、合計ブロッキング時間が「Core Web Vitals Assessment」ボックスから除外されていることに気づくかもしれません。 [パフォーマンス] ボックスまで下にスクロールし、[メトリック] テーブルを見て結果を確認します。

PageSpeed Insights では、色分けされたグラフィックとパーソナライズされたヒントにより、サイトがランキングを獲得した理由を簡単に理解できます。今すぐテストを実行してください。必要な時間は数秒です。これにより、サイトのパフォーマンスのベースラインを取得し、どこに改善の余地があるかを確認できます。

電子商取引ウェブサイトのパフォーマンスを向上させる方法

まだここにいらっしゃる場合は、Core Web Vitals Assessment により、やるべきことがいくつかあることが示されたと考えられます。それは恥ずかしいことではありません。 Google の web.dev サイトでさえ評価に合格しません。ここでは、e コマース Web サイトのパフォーマンスを向上させるための最良のヒントと、それを実現するために必要なツールを紹介します。

1. HTTPリクエストを削減する

HTTP リクエストは、Web ページの読み込みの中核として存在します。ここでは技術的な詳細を知る必要はありません。CSS ファイル、スクリプト、画像、その他のコンテンツをページに読み込むためにブラウザーがこれらのリクエストを行う必要があるということだけを理解してください。各リクエストでは、ブラウザーが Web ホストにメッセージを送信する必要があり、Web ホストは適切なコンテンツで応答する必要があります。

HTTP リクエストの数が増えるほど、すべてのリクエストを完了するのに時間がかかります。あなたがレストランに行って、最初に水を頼んで、ウェイターが戻ってきたときにソーダを注文したと想像してみてください。彼らがソーダを持ってきたとき、あなたは前菜を頼みました。そして最後に、前菜が到着した後、メインディッシュが決まりました。サーバーがどれほど高速に動作しても、食事を取得して食べ終わるまでには長い時間がかかります。

不要な HTTP リクエストを遮断して、(Web) サーバーを休ませます。スクリプトまたは CSS ファイルが必要ない場合は、ページのヘッダーでそれを参照しないでください。ページの読み込み速度を上げるために、マルチメディアコンテンツを削減することもできます。

2. HTTP/2を使用する

すべての HTTP リクエストが同等であるわけではありません。 2015 年に登場した標準である HTTP/2 には、Web ページの読み込みを高速化する機能が備わっています。 1 つは、開発者が最初に読み込む要素に優先順位を付けることができるため、大きなスクリプトよりも前に軽いリソースを要求するようにブラウザーに指示できることです。一度に複数のリソースを提供することもできます。レストランのたとえに戻ると、HTTP/2 を使用すると注文全体を一度に提供できるため、ウェイターはより早く食べ物を届けることができます。

KeyCDN には、サイトが HTTP/2 プロトコルをサポートしているかどうかを判断するための無料の HTTP/2 テストがあります。または、詳しく調べたい場合は、ブラウザの開発者ツールを開き、[ネットワーク] タブに移動して、[プロトコル] 列を探します。 (列のリストを右クリックしてプロトコルを追加する必要がある場合があります。)

HTTP/2 のサポートは Web ホストによって決定されるため、プロトコルを有効にする必要がある場合は Web ホストに頼るリソースになります。プロセスはプロバイダーごとに異なります。

3. 不要なリダイレクトを排除する

多くの企業は、Web サイトのオーバーホール中にリンクの破損を回避するためにリダイレクトを採用しています。ただし、ユーザーを新しいページにリダイレクトするたびに、ユーザーは別のページを読み込んで座る必要があります。特に、別のリダイレクトにつながるリダイレクトは不要です。ユーザーが実際の URL に到達する頃には、すでにページを閉じる準備ができているはずです。

リダイレクトは時間の経過とともに蓄積される傾向があります。つまり、定期的に監査する必要があります。 Web サイトの再設計または再構築の後にこれを行うことが特に重要です。

Screaming Frog SEO Spider は、サイト全体のリダイレクトをチェックし、リダイレクトチェーンやループを検出するのにも役立ちます。 Ahrefs SEO ツールバーを使用してページごとにチェックすることもできますが、これはお勧めしません。本当に逃れたい義務がない限り。

4. 外部スクリプトを制限する

ほとんどの開発者は、社内でコーディングするリソースがない機能を追加するためにサードパーティのスクリプトを使用します。ただし、外部スクリプトを組み込むことは、ページ速度の点で常に危険を伴います。コードを制御できないため、スクリプトの読み込みが遅い場合は何もできません。

スクリプトの読み込みが遅いと、ページの読み込みに時間がかかり、コンテンツのジャンプなどの問題が発生する可能性があります (累積レイアウトシフトメトリクスで測定)。

各ページをチェックして、不要なスクリプトが読み込まれていないことを確認してください。たとえば、サイト全体でレビュー機能を有効にしている場合でも、閲覧用に作成されたページにそのスクリプトを含める必要はありません。また、顧客の電子メールを収集するためにそのモーダルが本当に必要なのか、それとも、獲得するバイヤーよりも多くのバイヤーを遠ざけているのかを自問することもできます。

付加機能が多ければ多いほど良いとは限りません。優れたユーザーエクスペリエンスを備えたシンプルな Web サイトは、過度にデザインされたストアを強化することができます。

5. 遅延 (非同期) ロードを有効にする

ブラウザーが Web サイトをレンダリングするとき、デフォルトでは各リクエストを順番に処理し、現在のタスクが終了した後にのみ次のコマンドに進みます。ブラウザは残りのコンテンツのレンダリングに進む前にファイル全体を読み込む必要があるため、スクリプトが大きいとプロセス全体が遅くなります。

この遅延を回避するには、ブラウザにスクリプトを非同期で読み込むように指示します (つまり、Web ページのレンダリングを継続しながら)。 async 属性をスクリプトタグに追加するだけです (コードは次のようになります: <script src=”my_script.js” async></script>)。

一部の専門家は、古いブラウザでは async 属性を読み取れない可能性があるため、本文コンテンツの下部近くに <script> タグを追加することを推奨していますが、これを行う必要はありません。 async タグを処理できないブラウザを見つけるのは難しいでしょう。

6. モバイルファーストのデザインを使用する

ウェブサイトのパフォーマンスの最適化には、モバイルファーストの考え方を組み込む必要があります。現在、電子商取引 Web サイト訪問の 5 件中 4 件近く、電子商取引での購入の 3 件中 2 件はスマートフォンから行われています。残念なことに、モバイルウェブは依然として足かせとなっています。ほとんどのサイトでは、モバイルデバイスでの読み込み時間が大幅に長くなります。モバイル訪問者の 50% 以上が、サイトの読み込みに 3 秒以上かかる場合にすぐに飛びつくため、e コマース小売業者は多くのビジネスを失う可能性があります。

最近公開されているほぼすべての Web サイトはレスポンシブですが、デスクトップ用にコードを作成し、後でモバイル用に最適化するデザイナーは、順序を間違えている可能性があります。携帯電話エミュレータを使用して小さな画面向けにデザインすることで、この増え続ける視聴者のニーズを最前線に置くことができます。

さらに、それは簡単です。Google Chrome の開発ツールを使用すると、「デバイスモード」に入り、小さな画面でサイトがどのように表示されるかを確認できます。

携帯電話向けのデザインでは、限られた画面領域を最大限に活用する必要もあります。そのため、ページの速度を低下させる可能性がある装飾要素を少なくすることを選択することになる場合があります。また、外部スクリプトやプラグインを必要とする派手でユニークなエクスペリエンスを追求するのではなく、ナビゲーションとインタラクションを簡素化したいと思うでしょう。

既存のサイトを使用している場合は、おそらく今すぐこの方法を実装することはできません。次回の再設計のために覚えておいてください。

7。テキストベースのファイルを gzip で圧縮する

HTML ファイルや CSS ファイルの読み込みはそれほど面倒ではないように思えますが、ミリ秒単位でカウントする場合、すべてのバイトが重要になります。圧縮によりテキストベースのファイルのサイズが小さくなるため、サーバーから顧客のブラウザまでより迅速にアクセスできるようになります。 Gzip は最も一般的な圧縮フレームワークですが、Brotli と Deflate も Web サイトの高速化に適しています。

これはホスティング側で設定されるもう 1 つの機能です。ほとんどのホストはデフォルトでこれを有効にしていますが、無料の HTTP 圧縮テストを使用してホストを確認することをお勧めします。コンテンツが圧縮されていないことがわかった場合は、ホスティングプロバイダーに連絡してください。

8. CSS、JavaScript、HTML ファイルを縮小する

バイトを節約できるのは Gzip などの圧縮フレームワークだけではありません。コメント、書式設定、長い変数名など、コードの重要な部分ではないものをすべて削除して、テキストファイルを縮小することもできます。これらの要素の多くは人間の開発者にとって役立ちますが、Web ブラウザが Web ページを直接表示するためにこれらの要素は必要ありません。

コメントや余分なスペースやタブを自分で調べて削除する必要はありません。 Minifier.org は、CSS と JavaScript を処理できる無料のツールを提供しています。 Google の web.dev は、この無料の HTML ミニファイアーを推奨しています。

大量に縮小できるツールをお探しの場合は、Google の PageSpeed モジュールが Apache または Nginx Web サーバーと連携して、ファイルを自動的に縮小します。ただし、CSSNano などのツールをインストールするには、IT 部門への連絡が必要になる場合があります。

9. 画像とビデオを最適化する

マルチメディアファイルは、そのサイズが非常に大きいため、Web サイトのパフォーマンスを低下させることがよくあります。画像やビデオに大きく依存している電子商取引業者は、訪問者のインターネット接続の負担を軽減するために、これらのファイルの最適化に熱心に取り組む必要があります。

画像を最適化する簡単な部分は、サイズを変更することです。どのファイルも 20 メガバイト (MB) を超えるべきではありませんが、実際には、ヒーロー画像のみが 20 メガバイト (MB) を超える必要があります。 Shopify は販売者に対し、画像を可能であれば 500 キロバイト (KB) 程度に保つことを推奨していますが、一部のサイトでは最大 2 MB のサイズのファイルが必要であることが許可されています。これらの目標を達成するには、画像を圧縮する必要がある場合があります。ありがたいことに、無料で使用できる画像圧縮ツールがたくさんあります。

ファイルサイズを削減したら、ユーザーが小型デバイスからサイトを読み込む速度を維持するために、レスポンシブデザインの原則を使用していることを確認してください。 Mozilla が運営する MDN Web Docs には、このテーマに慣れていない場合に役立つ、レスポンシブ画像のチュートリアルが用意されています。

10. ブラウザのキャッシュを活用する

Web ブラウザはファイルをユーザーのマシンにローカルに保存できるため、繰り返し訪問する人の読み込み時間が短縮されます。ファイルごとにサーバーにアクセスする代わりに、ブラウザはマシンのローカルメモリからキャッシュされたアセットを取得できます。

資産はかなり静的なままであるため、キャッシュはほとんどの電子商取引業者にとって優れたソリューションです。サイトの大規模な見直しや製品写真の置き換えを行う場合は、新しいコンテンツを再ダウンロードし、キャッシュされたアセットを置き換える指示をブラウザーに提供する必要があります。ただし、これはほとんどのオンライン小売業者にとって非常にまれなことであり、キャッシュを設定することが適切です。

繰り返しますが、Web ホストはキャッシュ設定を担当する当事者です。そのドキュメントを見つけて、指示に従ってローカルキャッシュを有効にし、有効期限を設定します (ブラウザがサイトからキャッシュされたアセットを更新する頻度を指示します)。

11. コンテンツ配信ネットワーク (CDN) を使用する

ブラウザのキャッシュは、以前に Web サイトにアクセスしたことのある視聴者にのみ役立ちます。コンテンツ配信ネットワーク (CDN) は、読み込み時間を短縮するために、各訪問者のできるだけ近くにアセットを隠します。

CDN は、アセットを保存するためにローカルマシンに依存しません。さまざまな場所にあるサーバーのネットワークに資産を配布するだけです。つまり、すべてのリクエストに応答する 1 つのサーバーをバージニアに置く代わりに、バージニアに 1 台、カリフォルニアに 1 台、イリノイに 1 台というようにサーバーを置くことができます。世界中の視聴者にサービスを提供する企業は、国際 CDN と連携できるため、複数の国、地域、大陸にサーバーを設置しています。

ブラウザーが Web サイトを読み込むリクエストを送信するたびに、そのリクエストは地理的にユーザーに近いサーバーにルーティングされます。大幅な時間の節約のようには思えないかもしれませんが、ページの読み込み速度は非常に小さなスケールで測定されるため、CDN は顕著な違いをもたらします。

12. プラグインを定期的に監査する

プラグイン、アドオン、拡張機能は、ほとんどの Web 開発者にとって時間を大幅に節約します。ただし、外部スクリプトと同様に、プラグインが肥大化するとページの速度が低下する可能性があります。プラグインライブラリに再度アクセスして、使用しなくなったハンガーオンがないか確認することで、Web サイトのパフォーマンスを向上させます。

場合によっては、すべてのプラグインが必要であるにもかかわらず、ページの読み込みが非常に遅い場合があります。この場合、犯人を特定する必要があります。サイトをステージング環境にコピーし、すべてのプラグインを無効にして、サイトの読み込み速度をテストします。次に、プラグインを一度に 1 つずつ有効にして、単一のプラグインがパフォーマンスメトリクスに影響を与えているかどうかを判断します。 (累積効果を誤って測定しないように、各プラグインを必ず有効にしてテストし、その後無効にしてください。)

ありがたいことに、非常に多くのプラグインが存在するため、動作が遅いツールの代替となるものを見つけることができるでしょう。

もう 1 つのオプションは、速度が最適化されたプラグインを探すことです。たとえば、当社の評価とレビューの表示テクノロジーは、Web サイトを迅速に実行し続けるように設計されており、当社の開発者はその約束を果たすために行った手順を共有しました。この流れで構築されたツール、つまりスクリプトファイルの縮小と削減、キャッシュ、遅延読み込みなどのベストプラクティスを使用するツールを見つけて、監査を簡単にします。

13. 不要なポップアップを削除する

はい、言いましょう。ポップアップは非常に不人気です。これらは、特にモバイルデバイスでのエクスペリエンスに悪影響を及ぼします。ポップアップが上品で役に立つと思っていても、インターネットユーザーは一日中、大量のモーダル、オーバーレイ、チャットウィジェットに直面しています。ポップアップ疲れは誰にでもありますが、貢献すると消費者の信頼を損なうことになります。

ほとんどのポップアップは外部スクリプトを呼び出し、画像やフォントなどのアセットを参照しますが、これらはすべてブラウザーが読み込む必要があります。条件付きで表示されるモーダルは、トリガーする前に視聴者データを収集する必要があり、これにも時間がかかります。また、合計ブロック時間が長い場合、ユーザーはサイトの残りの部分が表示されるときにこれらの要素を閉じることができない可能性があります。この遅延は、実際に速度が遅くなっていなくても、サイトの速度に対するユーザーの認識に影響を与えます。

ただし、これらのツールに対するほぼ普遍的な嫌悪感と同様に、減速は現実です。サイトからそれらを削除することは双方に利益をもたらします。

14. 最速のサービスを選択する

顧客がリンクをクリックするか URL を入力すると、ターゲットサイトに移動するために DNS サービスにクエリを実行するようブラウザに指示することになります。この DNS サービスは、ブラウザをサイトの IP アドレスにルーティングします。次に、ブラウザが HTML ファイルの読み取りを開始し、サーバーまたは CDN にアセットをリクエストして、デザインした Web サイトをレンダリングできるようにします。

あなたのサイトを表示するために、多くのサービスが集まっています。どれか 1 つでも遅いと、ページの速度に悪影響が生じます。そのため、最も安価なオプションが必ずしも技術インフラストラクチャにとって最適なオプションであるとは限りません。

たとえば、多くの基本的な Web サイトホスティングプランが共有されます。これは、他の Web サイトがあなたと同じサーバーを使用していることを意味するため、そのうちの 1 つからのトラフィックが急増すると、読み込み時間が遅くなる可能性があります。 VPS ホスティング (成長するサイトの場合) または専用の Web サイトサーバー (余裕がある場合) の方が、より良い結果が得られます。

また、DNS ホスティングを処理するドメインレジストラーが高性能であることも確認する必要があります。 DNSPerf は DNS パフォーマンスの継続的なログを保持するため、さまざまなプロバイダーがどのように積み重なっているかを自分の目で確認できます。

もちろん、スピードが重要なのはトップレベルだけではありません。軽量で合理化されたプラグインを見つけることについて話しました。セキュリティソフトウェアやその他のバックエンドツールなどのサービスについても考慮する必要があります。顧客は直接やり取りすることはありませんが、e コマース Web サイトのパフォーマンスに影響を与える可能性があります。

15. Webサイトの運用を監視する

ウェブサイトのパフォーマンスを時々チェックして、大きな問題がないかどうかを確認することは賢明なアイデアです。サイトを常に監視して、問題が発生した瞬間に気づくようにするのがさらに賢明です。

ユーザーのエクスペリエンスに関するデータを収集して、サイトが現実世界でどのように機能するかを示すツールに投資できます。多くの買い物客は自分とは異なる環境から訪問するため、実際のユーザーをモニタリングすることで新たな視点が得られます。

他のツールは人間の訪問者を装い、一連のスクリプトを使用して Web サイトをナビゲートし、そのパフォーマンスをテストします。このような総合的なモニタリング設定は、管理されたテストからデータを収集しようとしているチームにとってより便利です。サイトを最適化している最中であれば、合成モニタリングは、実際に変化をもたらす変更を特定するのに役立ちます。これらのシステムは、顧客が重大な問題に遭遇する前に重大な問題を発見することを目的として、スケジュールされたテストを実行することもできます。

これらの両方のジョブ (およびそれ以外) を実行するツールがたくさんあります。

Site24x7 は合成および実際のユーザー監視を実行します
LogRocket はユーザーを監視し、ユーザーがよく直面するエラーやサイトの操作を特定します。
New Relic は、存在するほぼすべてのインフラストラクチャと統合する、エンドツーエンドの合成モニタリングシステムです。

どのツールを使用する場合でも、何か問題が発生したときに通知するようにアラートを設定してください。問題を早く解決できれば、失望させる顧客は減ります。

ウェブサイトのパフォーマンスはスピードがすべてです

インターネットとモバイル接続がより高速になり、さらにユビキタスになるにつれて、消費者の基準も高まり続けるでしょう。高速で便利なエクスペリエンスを提供することが基本的な期待です。モバイルで優れた方法を見つけ、読み込み速度を 1 秒以下に抑えることができる企業には、より多くの市場シェアを獲得するチャンスがあるでしょう。

あなたが提供するカスタマーエクスペリエンスはコンバージョン率と維持率に直接関係しており、Webサイトのパフォーマンスはそのカスタマーエクスペリエンスに直接関係しています。ウェブサイトの最適化は、雨の日を待ってできるプロジェクトではありません。これは、顧客をサイトに誘導し、より多くの売上を上げるために不可欠な部分です。

サイトの速度を向上させることだけが、より多くの顧客にリーチする唯一の方法ではありません。 SERP での勢いを維持するために、オーガニックトラフィックを増やすこれらの方法を確認してください。

もっと詳しく知る

マスタークラス: 商品ページのコンバージョン率を高めるための 3 つの強力な戦略

ここで視聴してください