ページの読み込み速度がサイトの可視性に与える影響と、それを向上させるためのヒント

公開: 2021-12-28

キーワードやページデザインなど、検索エンジン最適化 (SEO) 戦略の「具体的な」側面だけに注目していますか? ページの読み込み時間はどうですか？ Google がウェブサイトの読み込み速度を重要なランキング要素と見なしていることをご存知ですか?

読み込み速度が遅いと、さまざまな形でビジネスに影響を与える可能性があります。最も重要なものの 2 つは、ランキングと変換能力です。サイトサーバーの応答時間が 2 秒未満の場合、 Googleはサイトにアクセスするクローラーの数を減らします。

それを踏まえて、ページの読み込み速度がさまざまなサイトパラメーターにどのように影響するかを詳しく見てみましょう.

ページの読み込み速度が可視性に影響する 5 つの理由

1. ユーザーエクスペリエンスに影響を与える

今日、ユーザーは Web サイトのパフォーマンスの悪さを言い訳にすることはできません。また、サイトの読み込み速度にも非常にこだわっています。

事実を信じるなら、ユーザーの 47% はページが 2 秒以内に読み込まれることを期待しています。一方、レポートによると、読み込み時間が 3 秒を超えると、訪問者の 75% が直帰します (ページを離れます)。

これは、ページの読み込み時間の 1 秒ごとの遅延が顧客に大きな損失をもたらすことを示しています。

Think With Google の調査によると、直帰率 (1 つのページに到達しただけでサイトを離れた訪問者の割合) は、ページの読み込み時間が長くなると増加します。直帰率の上昇は、全体的なユーザーエンゲージメントとインタラクションの指標にも影響します。

2. オンラインの可視性と SEO に直接的な影響を与える

2018 年には、モバイルデバイスが Web サイトの総トラフィックの 53% 以上を占めました。そして同年、Google はモバイルページの速度をランキング要素として正式に導入しました。それ以来、ページの読み込み速度はますます重要になっています。

数年前に Google がモバイルファーストインデックス作成への取り組みを発表したとき、企業はサイトをモバイルデバイス向けに最適化するしかありませんでした。それ以来、モバイルパフォーマンスの低いサイトは、検索エンジンの結果ページ (SERP) で急落しています。

簡単に言えば、モバイルページの速度が標準に達していない場合、ランキングを上げることは事実上不可能です。

3. 売上とコンバージョンの減少または急増を引き起こす

ページの読み込み時間が 1 秒遅れると、コンバージョンが 7% 減少することをご存知ですか?

サイトのパフォーマンスが低下している場合、それを回避する方法はありません。かなりの量の売上を失うことになります。サイトの速度が遅いために直帰率が上昇すると、すでに多数の潜在的な顧客が押しのけられており、訪問者を変換する可能性が最小限に抑えられています.

Amazon は、ページの読み込み速度が売上に与える影響を調査しました。サイトの読み込み時間が 1 秒長くなると、同社は年間 16 億の収益を失う可能性があると判断されました。 Search Engine Journalのデータによると、消費者の 70% が、サイトの速度が購入の決定に大きな影響を与えると考えています。

したがって、サイトの速度を最適化することで、ランキング、コンバージョン、そして最終的には売り上げの大幅な増加を期待できます.

4. 顧客ロイヤルティが危うくなる

上で強調した点をもう一度考えてみましょう。ページの読み込み速度が遅いと、消費者が遠ざかり、コンバージョン率が低下します。

これらに加えて、ユーザーエクスペリエンス (UX) が低いサイトに顧客が再度アクセスする可能性は低くなります。したがって、ウェブサイトの速度が遅いと、顧客の忠誠心も損なわれます。

実際、 HubSpot は、サイトのパフォーマンスの低さに不満を持っている顧客の 80% がそのサイトから二度と購入しないと述べており、ページの読み込みが遅いとリピート注文が大幅に減少することが証明されています. 遅いページは、収益がリピート販売に大きく依存する e コマースサイトにとって特に深刻な損失です。

さらに、 Akamaiの調査では、企業にとってもう 1 つの重要な懸念事項が明らかになりました。不満を抱いている訪問者の 40% が、ネガティブな経験を連絡先と共有しています。この否定的な社会的証明は、全体的なコンバージョンと顧客ロイヤルティに影響を与える可能性があります.

5.サイトのオーガニックトラフィックに影響を与える

サイトの速度が遅いと、SERP のランキングが低くなるだけです。これは、サイトへのオーガニックトラフィックが減少することも意味します。 Google の上位 5 つのランキングが、オーガニッククリックの合計の 67.6% を占めていることをご存知ですか?

ローディングが理想的でない場合、すでにかなりの量のオーガニックトラフィックを失っています。一方、モバイルページの速度が最適化されていない場合、潜在的な顧客の最大 50% を占める可能性があるモバイルトラフィックを失うことになります。

理想的なページの読み込み速度は?

2015 年に Mobilegeddon Update がリリースされて以来、企業はページの読み込み時間に重点を置いてきました。また、モバイル対応とモバイルページの速度向上に多くの時間と労力を費やしています。

しかし、問題は次のとおりです。理想的なページの読み込み速度はどれくらいか、または十分な速さはどれくらいか?

Google によると、推奨されるページの読み込み時間は、デスクトップとモバイルデバイスの両方で3 秒未満です。ただし、モバイルデバイス上のすべてのサイトの平均ページ読み込み時間は現在 22 秒です。 Screaming Frog は 20,000 の URL を調査して、 Google の PageSpeed 評価に合格したかどうかを確認しました。モバイルの 12% とデスクトップの 13% の結果のみがテストに合格したことがわかりました。

また、ユーザーが e コマース Web サイトの読み込み時間をさらに短縮することを期待していることも考慮する必要があります。 Google のMaile Ohye が、Google ウェブマスタービデオで e コマースページの読み込み速度について語っています。彼女は次のように述べています。 Google では、0.5 秒未満を目指しています。」

さて、0.5 秒は非現実的に思えるかもしれません。ただし、e コマース Web サイトの所有者である場合は、ページの読み込み速度をせいぜい 3 秒未満にする必要があります。このベンチマークは、モバイルデバイスと Web デバイスの両方を対象としています。

最新の更新: Core Web Vitals

Google は、UX に関してあらゆる手段を講じることを望んでいます。そのため、最近Core Web Vitals を重要なランキング要素として登録しました。

これらの Core Web Vitals は、他の重要な UX シグナルと調和して、ランキングに影響を与えるようになりました。また、Largest Contentful Paint (LCP) と呼ばれる指標の 1 つは、ページの読み込み速度に関連しています。

LCP は、ページ上の最大のコンテンツ要素をレンダリングするのにかかる時間を指します。これは、画像、ビデオ、またはその他の要素です。

Google によると、理想的なページ上の最大コンテンツペイントは 2.5 秒未満または最大 2.5 秒です。 2.5 秒から 4 秒までは改善が必要であり、それを超えると不良と見なされます。

ページの読み込み速度を上げるための技術的なヒント

コンテンツ配信ネットワークを利用する

Web サイトの読み込み時間を短縮するためのベストプラクティスの 1 つは、コンテンツ配信ネットワーク (CDN) を使用することです。 CDN は、サイトの読み込み時間を20% から 51% に短縮するのに役立ちます。

従来のセットアップでは、Web サイト全体を単一のサーバーでホストします。そして、このサーバーは、サイトユーザーによるすべての要求を処理します。現在、サイトのトラフィックが多いと、リクエストの数が大幅に増加します。これにより、サーバーの負荷が増加します。その結果、リクエストの処理時間が増加し、ページの読み込み時間が遅くなります。

さらに、ユーザーがサーバーの場所から物理的に離れていると、ページの読み込み時間が長くなります。これは、データがより長い距離を移動する必要があり、読み込み時間が長くなるためです。

CDN はこれらの課題を解決できます。 CDN は、サーバーのグローバルネットワーク全体で Web サイトをホストすることによって機能します。そのため、ユーザーがリクエストを送信すると、その場所に最も近いサーバーからデータがルーティングされます。

また、ファイルは複数のサーバーにキャッシュされるため、帯域幅が最大 60% 節約されます。現在、単一のサーバーがすべてのリクエストを処理する必要はありません。

HTTP リクエストの数を減らす

ユーザーがページをリクエストすると、ページコンポーネントごとに HTTP リクエストが送信されます。 Yahoo は、Web サーバーがページ読み込み時間の 80% をこれらのコンポーネントのダウンロードに使用していると報告しています。これらには、ページの画像、スクリプト、メディア、スタイルシートなどが含まれます。したがって、ページ上のコンポーネントが非常に多い場合、ページのレンダリング時間が長くなります。

では、ページコンポーネントの数と、それぞれの読み込みにかかった時間を確認するにはどうすればよいでしょうか。

Chrome ユーザーは次の手順を実行できます。

注: Chrome ブラウザーの開発者ツールを使用して、HTTP 要求の数を確認します。

ページを右クリックして、[検査] タブに従います。
左の境界線をドラッグすると表示される「ネットワーク」タブをクリックします。
ここでは、「名前」列にページ上のすべてのコンポーネントが表示されます。
「サイズ」列には、関連する各コンポーネントのサイズが一覧表示されます。
また、「時間」列で各回の読み込みにかかった時間を確認できます。
リクエストの総数は左下隅に表示されます。

役に立たない要素と読み込みにかかる時間を確認できるようになりました。

また、HTTP 要求の数を減らす必要があります。これを行う 1 つの方法は、Web ページファイルを縮小して結合することです。次のポイントでその方法を確認してください。

HTML、CSS、JavaScript の縮小と結合

HTML、CSS、および JavaScript ファイルは、サイトの外観と機能を形成します。これらのファイルは、HTTP 要求の重要な部分を構成します。そのため、HTTP リクエストの数を減らしたい場合は、ページファイルを縮小する必要があります。

HTML、CSS、および JavaScript ファイルを縮小すると、サイズが大幅に縮小されます。このプロセスにより、これらのファイルの読み込みが高速になります。さらに、コードに余分な空白、インデント、および書式設定があり、ページが重くなります。

ページを縮小すると、これらの不要な要素がすべて削除され、ページがスリムになります。

テンプレートベースの Web サイトがある場合、これはさらに重要になります。テンプレートベースの Web サイトは開発が容易ですが、サイトのパフォーマンスを低下させる厄介なコード部分を提供する可能性があります。

縮小は、これらの問題を解決し、コードファイルのサイズを縮小する正しい方法です。縮小するだけでなく、これらのファイルを結合してファイルの総数を減らす必要もあります。そのため、CSS ファイルと JavaScript ファイルが複数ある場合は、それらを 1 つのファイルに結合できます。 WordPress でサイトを強化している場合は、WP Minify プラグインまたは WP Rocket プラグインを使用できます。

これらのツールはすべて、HTML、CSS、および JavaScript ファイルを簡単に縮小および結合するのに役立ちます。

ブラウザのキャッシュに Expires ヘッダーを追加することを忘れないでください

ブラウザは、ページファイルの大部分をキャッシュできます。これらには、画像、JavaScript ファイル、動的要素などが含まれます。

ブラウザのキャッシュを有効にすることで、ブラウザがページをキャッシュメモリに保存できるようになります。したがって、このページに再度アクセスすると、HTTP 要求を送信せずにキャッシュから読み込まれます。

サイトのブラウザキャッシュを活用する 1 つの方法は、「expires」ヘッダーを追加することです。

「expires」ヘッダーは、キャッシュメモリからページをロードするよう Web ブラウザに指示します。そのため、「期限切れ」ヘッダーは、以前にサイトにアクセスしたことのあるユーザーに対してのみ機能します。また、ページをキャッシュメモリに保存する必要があります。

このユーザーがあなたのサイトを再訪問すると、「expires」ヘッダーはブラウザーにページのキャッシュされたバージョンをロードするように指示します。

現在、多くのページコンポーネントが既にキャッシュメモリにあるため、読み込みが速くなります。また、ブラウザーは少数のページコンポーネントのみを要求するため、ページの読み込み時間が短縮されます。

ブラウザーのキャッシュによって HTTP 要求の数が減るため、ページの読み込み速度がさらに向上します。

非同期読み込みを採用する

CSS および JavaScript ファイルの読み込み方法を選択することで、ページの読み込み速度を上げることができます。 CSS ファイルと JavaScript ファイルは同期的および非同期的に読み込まれ、Web ページでの読み込み方法を決定できます。

その言葉が示すように、スクリプトが同期的に読み込まれると、次々と読み込まれます。また、各スクリプトは、ページ上の位置に応じた読み込み順序に従います。一方、非同期でロードする場合は、複数のスクリプトを同時にロードできます。

ブラウザーがページを読み込むとき、ページは上から下への読み込みパターンに従います。

例えば：

ブラウザーが同期 CSS または JavaScript ファイルに遭遇すると、ファイルを完全にロードしてから先に進みます。この順序により、読み込みプロセスが遅くなります。
一方、非同期ファイルに遭遇すると、同時に別の要素の読み込みを開始します。そのため、要素がさらに移動する前に、要素の読み込みが完了するのを待つ必要はありません。

これは、読み込み時間を短縮するために非同期で読み込む CSS および JavaScript ファイルを選択する必要があることを示しています。 WordPress サイトをお持ちの場合、WP Rocket は非同期読み込みを有効にするのに役立ちます。

WP Smush を使用してサイトの画像を圧縮する

画像の最適化または圧縮は、ページの読み込み時間を短縮するために重要です。多くの場合、画像ファイルは大きく、ページの読み込み時間が遅くなります。ただし、画像の使用を制限したり、削除したりすることはできません。画像は、特に e コマースサイトの場合、サイトのユーザーエクスペリエンスにとって非常に重要です。調査によると、消費者の 66% が製品を購入する前に少なくとも 3 つの製品画像を必要としています。

WordPress Web サイトのサイト画像を圧縮する簡単な方法は、 WP Smushプラグインを使用することです。このプラグインはバックグラウンドで動作し、アップロード中に画像を圧縮します。その結果、品質を損なうことなく画像サイズを縮小できます。

ページの読み込み中に JavaScript ファイルを延期する

JavaSscript ファイルを延期することは、サイトの直帰率を下げる良い方法です。これは、他のページ要素が読み込まれるまで JavaScript ファイルの読み込みの優先順位を下げるプロセスです。通常、JavaScript ファイルはサイズが大きく、読み込みに時間がかかる可能性があります。それらを延期することにより、他のページ要素を遅滞なくより速くロードできるようになります。

WordPress サイトの所有者は、 WP Rocket プラグインを使用して延期を有効にするだけです。「延期されたJSファイルのロード」にチェックマークを付けて、変更を保存するだけです。

HTML サイトの場合、</body> タグの上で外部 JavaScript ファイルを呼び出します。

それで、あなたはそれを持っています！これらのヒントを Web サイトに実装して、ページの速度を上げ、検索エンジンでの可視性を高めます。