ウェブサイトの速度最適化ツール

ウェブサイトの速度最適化ツール – 最新のテクノロジースタックに必須の機能

組織にとって最適なウェブサイト速度最適化ツールはどのように選べば良いのでしょうか？ウェブサイトのパフォーマンスに影響を与えるあらゆる要素を可視化できるツールを選ぶ必要があります。

ウェブページがユーザーのブラウザに読み込まれる際、複数のコンポーネントが連携して動作します。ユーザーがブラウザにURLを入力した後の典型的なイベントの流れは以下のとおりです。

• ブラウザはDNSサーバーを介してドメインを解決する。 
• HTML、JavaScript、CSSなどの静的アセットは、CDNまたはWebサーバーから取得され、複数のインターネットサービスプロバイダを経由してエンドユーザーに届けられます。 
• ウェブアプリがブラウザに読み込まれます。 
• アプリはその後、バックエンドAPIにデータを要求し、バックエンドAPIはデータベースにクエリを実行してデータを返し、UIを更新します。

また、ウェブサイトのパフォーマンスは、相互に関連する多数のコンポーネントに依存していることも重要です。

• 複数のサービスプロバイダーネットワーク
• 様々なインターネットプロトコル（HTTP、DNS、BGPなど）
• サードパーティのサービスとAPI
• コンテンツ配信ネットワーク（CDN）
• クラウドサービスとデータセンター

ワークフローの複雑さを考えると、Webパフォーマンスの最適化は、Webサイトのコードを改良するだけでは済みません。DNS解決からCDN配信、Webアプリのレンダリング、APIレスポンスに至るまで、あらゆる側面が速度に影響を与えます。したがって、Webサイトの速度最適化ツールを選ぶ際には、チェーン全体にわたってパフォーマンスを向上させるために、すべてのステップを可視化できるツールを選択する必要があります。

この記事では、ウェブサイトのパフォーマンス最適化ツールのさまざまな機能を探り、SEOとユーザーエンゲージメントにおけるそれらの重要性について論じます。

ウェブサイトの速度最適化ツールの主要な測定機能の概要

高度なウェブサイト速度最適化ツールでは、エンドユーザーとウェブサーバー間のトランザクション経路において、以下のような測定結果が得られます。

インターネットスタックの重要なレイヤー

その インターネットスタック エンドユーザーにデジタル体験を提供するために必要なすべての要素を網羅しています。ルーター、ファイアウォール、インターネットサービスプロバイダ (ISP) が運営するサービスなどのインフラストラクチャの基本要素、および BGP、DNS (ドメイン名サービス) CDN (コンテンツ配信ネットワーク)、およびSASE (セキュアアクセスサービスエッジ残りのサービスは、決済処理、分析エンジン、ビデオホスティングプラットフォーム、サードパーティライブラリなどを提供する個々のベンダーであり、すべてアプリケーションプログラミングインターフェース（API）を介してアクセスされます。この集合体は、私たちが当然のこととして受け入れている相互接続されたサービスの脆弱なネットワークです。

これをよりよく理解するために、コンテンツの読み込みと表示に自社サーバーだけでなく、複数のサービスやサーバーに依存するウェブサイトを考えてみましょう。リクエストを処理するために、ウェブサイトは複数のサードパーティサービスやサーバーと連携します。 

参考までに、以下の画像はNYTimes.comへのアクセス時に発生するリクエストのノードマップを示しています。このマップは、様々な第三者機関とその通信ポイント、データの送信経路、そして異なるドメインの速度における動作状況を示しています。

インターネットパフォーマンス監視（IPM）

多くのウェブサイト速度最適化ツールは、ウェブサイトのデザインとアーキテクチャに焦点を当てており、インターネットやサードパーティが提供するサービスを軽視している。同様に、従来のアプリケーションパフォーマンス監視（APM）ツールは、主にサーバー側の指標を追跡している。 

IPMは、インターネットスタック全体にわたるデジタルサービス配信の理解と最適化のための包括的なアプローチを提供することで、これらの制約を克服します。サーバーのパフォーマンス、ネットワークパス、サードパーティサービス、そしてユーザーのブラウザにおける最終的なレンダリングの検査など、あらゆる側面を網羅しています。 

成熟したIPM（統合パフォーマンス管理）の実践では、さまざまな監視手法を段階的に組み合わせます。各段階を重ねるごとに、より深い洞察が得られ、基本的なパフォーマンス追跡から、ウェブサイトのデジタルインフラ全体にわたる包括的な可観測性へと移行することができます。 

次のセクションでは、測定方法について詳しく説明し、適切なツールがウェブサイトの速度最適化にどのように役立つかを説明します。 

コアWebバイタル

Web Vitalは、ウェブページのユーザーエクスペリエンスを定量化するためのGoogleの取り組みです。コアWeb Vitalは、ウェブページのパフォーマンス速度、インタラクティブ性、視覚的な安定性に関する実際のユーザーエクスペリエンスを測定する指標です。例：

• 最大コンテンツ塗料（LCP） これは、サイト訪問者にとってページナビゲーションが完了したと認識されるまでの時間を測定するものです。Googleは、LCP（Looking Contentful Paint：最終表示時間）を2.5秒以下にすることを推奨しています。
• 次のペイントへのインタラクション（INP） INPは、2024年3月にFirst Input Delay（FID）に代わる新しい応答性指標です。INPは、ページライフサイクル全体を通して、ユーザー操作に対するウェブサイトの応答性を評価します。Googleは、INPが200ミリ秒以下であることを推奨しています。 
• 累積レイアウトシフト（CLS） 顧客から見たページの視覚的な不安定さを測定します。CLSスコアが0.1以下であれば良好です。

コアウェブバイタルが最適化されたサイトは、直帰率が低く、検索ランキングが向上します。Google は、コアウェブバイタルの改善がウェブサイトの利用率向上につながることを示すケーススタディを実施しました。たとえば、 VodafoneはLCPを31%改善することで、売上高を8%増加させた。.

Core Web Vitals（CWV）を測定できるウェブサイト速度最適化ツールを選ぶことを検討してください。以下に、いくつかのツールの例と、それらがCWVを測定するさまざまな方法を示します。

Lighthouse – Chrome開発者ツール

Lighthouse（LH）はChrome DevToolsに統合されており、Chromeの「検証」機能からアクセスできます。「Lighthouse」タブでは、監査設定を構成し、対象ユーザーに応じてモバイルまたはデスクトップの監査を選択できます。

その機能を理解するために、Lighthouseを使ってWikipediaの記事のパフォーマンス指標を検査する例を見てみましょう。

Lighthouseのスコアは、サイトのパフォーマンスを評価するための入門的な指標としてはまずまずだが、その文脈は十分ではない。 

このレポートは、Googleのベストプラクティスに基づいて、ウェブサイトの改善が必要な領域を特定するのに役立ちます。しかし、Lighthouseは、ある時点でのサイトのパフォーマンスのスナップショットしか提供できないという制限があります。つまり、トレンドを報告したり、サイトのパフォーマンスがどのように変化しているかという全体像を明らかにするための詳細な分析を提供したりすることはできません。 

Lighthouseレポートは、サイトのパフォーマンスを理想的な状況下でのみ測定するという点も特徴です。多くの場合、ローカル環境またはシミュレーション環境で実行されるため、実際のユーザー体験のニュアンスを完全に反映しているとは言えません。ページのパフォーマンスは制御された環境で測定されるため、ネットワークの変化、異なるデバイス、ユーザーの所在地といった重要な要素が考慮されていない可能性があります。 

Web Vitals APIライブラリ

Googleのウェブバイタルライブラリ 実際のユーザーからのWeb Vitalsデータの測定に役立ちます。これは、ページが読み込まれた後、またはバックグラウンドで実行された後にCore Web Vitalsをレポートするためのコードスニペットの例です。以下のコードをWebサイトに統合することで、実際のユーザーからのパフォーマンス指標を測定し、カスタム分析APIを介して結果を分析できます。

import {onCLS, onINP, onLCP} from 'web-vitals';

const queue = new Set();
function addToQueue(metric) {
  queue.add(metric);
}

function flushQueue() {
  if (queue.size > 0) {
    // Replace with whatever serialization method you prefer.
    // Note: JSON.stringify will likely include more data than you need.
    const body = JSON.stringify([...queue]);

    // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
    (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});

    queue.clear();
  }
}

onCLS(addToQueue);
onINP(addToQueue);
onLCP(addToQueue);

// Report all available metrics whenever the page is backgrounded or unloaded.
addEventListener('visibilitychange', () => {

実際のユーザーからデータを収集することは可能ですが、分析には独自の分析サービスとストレージソリューションが必要です。

WebPageTest

WebPageTest これはCatchpoint社の製品で、ページ要素の詳細な内訳を提供することで、パフォーマンスの問題を特定し、ユーザーエクスペリエンスを向上させることができます。

フィルムストリップリールビューを使用すると、ページの読み込みが時間とともにどのように進行するかを視覚的に確認できます。LCP（Long-Central Page：最小ページ読み込み時間）が発生するタイミングや、レイアウトがどのように変化するかを特定できます。

ウォーターフォールチャートは、さまざまなリソース（スクリプト、画像など）がページ読み込みパフォーマンスにどのように影響するかを詳細に分析するため、LCPやその他の指標に影響を与えている可能性のある要因を診断できます。

WebPageTestは、永久無料サービスと、より高度な機能を備えた有料プランを提供しています。詳細については、こちらをご覧ください。 こちら無料サービスを利用するには、ウェブサイト上の入力欄にURLを貼り付けるだけで済みます。

ネットワークトランジット監視

ネットワーク遅延とは、ユーザーとウェブサイト間でデータが伝送される時間を測定する指標です。トラフィックの一部は、パブリッククラウドプロバイダーのデータセンターに設定されたローカルエリアネットワークを経由します。これはウェブサイトサービスプロバイダーの管理下に直接置かれています。一方、パブリックインターネットを経由する部分など、管理外の部分は監視が困難ですが、サービス品質に同様に大きな影響を与える可能性があります。

ルーティング効率、混雑状況、物理的な距離といった要素が、この遅延に影響を与えます。ネットワークの伝送遅延を測定するには、パケット損失、ジッター、往復時間を分析する必要があります。一般的なアプローチとしては、テレメトリデータを収集し、ネットワークのKPIとキャパシティプランニングを段階的に改善していく方法があります。技術的な詳細を完全に理解していなくても、ネットワークの問題がWebアプリケーションに影響を与えているかどうかを明らかにできるツールは数多く存在します。問題があることがわかったら、ネットワークの専門家と協力して診断と修正を行うことができます。 

コアインターネットサービスレイヤーの監視  

主要なインターネットサービスを網羅する監視ツールには、以下の機能が含まれている必要があります。なお、このリストは網羅的なものではありませんが、エンドユーザーがウェブサイトのパフォーマンス低下を経験する可能性のある最も一般的なサービスを強調しています。

API監視

API監視は、データ駆動型Webアプリケーションにとって不可欠です。APIの問題はユーザーエクスペリエンスに悪影響を与える可能性があるからです。また、APIのレイテンシが高いと、Core Web Vitalsをはじめとするパフォーマンス指標も低下します。 

ツールを選ぶ際には、APIテストで一般的に行われるように、レイテンシを測定できること、そして応答時間、エラー率、一貫性、可用性、スループットといっ​​た主要な指標をほぼリアルタイムで追跡できることを確認する必要があります。さらに、これらのAPI指標を監視するために、特定のユースケースに合わせてカスタマイズしたダッシュボードを作成できる機能も必要です。

上記のパラメータは、サービスレベル目標（SLO）を設定するための主要業績指標として活用できます。例えば、レイテンシを評価する際には、データをパーセンタイルで測定することが有効です。これらのパーセンタイルは、特定の応答時間しきい値を満たすAPIリクエストの割合を表すため、外れ値を特定し、最悪のシナリオを把握するのに役立ちます。

同様に、エラー発生率は3xx、4xx、5xxの範囲に分類する必要があります。4xxエラーは通常、クライアント側の検証の問題を示しますが、発生頻度が高い場合は、ユーザーインターフェースの分かりやすさが不足している可能性があり、フォーム入力やユーザー操作に支障をきたしていると考えられます。

タリアセン・ウェストにおける修復作業について APIパフォーマンス監視：主要指標とベストプラクティス くわしくはこちらから

合成モニタリング

ウェブサイトの速度最適化ツールは、さまざまなサービスやプロトコルにおけるパフォーマンスを評価するために、ユーザー操作をシミュレートする必要があります。こうすることで、さまざまなトラフィックシナリオでウェブサイトをテストし、機能リリース前に問題点を発見できます。 

注目すべき合成監視機能には、以下のようなものがあります。

• ユーザー体験トランザクションテストログインやSSOを含む、ウェブベースのビジネス取引全体を把握するための手順を記録またはスクリプト化する。
• HTTP監視—HTTP GETを使用して基本ページのみの可用性をテストするか、JavaScriptを実行する場合と実行しない場合の両方でページをエミュレートします。
• モバイルシミュレーションプラットフォーム（Android、iOS）、ブラウザ（Safari、Chrome）、または無線速度（3G、4G）に基づいてモバイルユーザーをシミュレートします。
• CDN 監視 さまざまな地理的場所からCDNサーバーのパフォーマンスを評価し、局所的なインシデントとグローバルなインシデントを区別します。
• ブラウザテスト さまざまなデバイス、OS、ブラウザバージョン間でエンドユーザーエクスペリエンスを再現し、ユーザーが生成したUIの問題に対処するのに役立ちます。 

グローバルなアクセス性

効果的な合成監視により、デジタルサービスが様々な地域やネットワーク環境からアクセス可能であることを確認できます。例えば、ウェブサイトはアジアからはアクセス可能でも、ヨーロッパからアクセスするとレイテンシが高くなる場合があります。特定の地域や特定のサービスプロバイダーのネットワークにおける問題を特定するには、数千ものノードを監視ポイントとして利用できるツールが、問題のテストと軽減に役立ちます。

ご利用のサービスによっては、ベンダーがサービス品質を測定するための拠点（接続ポイント）を提供しているかどうかを確認する必要がある場合があります。接続ポイントには、公共サービスノード、インターネットバックボーンノード、国際ノードなどが含まれます。複数の有線および無線サービスプロバイダーからのトランザクションパス全体にわたる接続ポイントがないと、パフォーマンスの問題を引き起こしているトランザクションパスのセグメントを特定することはできません。 

リアルユーザーモニタリング（RUM） 

合成監視は、シミュレーションされたトランザクションを使用してパフォーマンスをテストします。一方、RUMは、Webサイト訪問者のブラウザから、パフォーマンス指標（ページ読み込み時間など）、ユーザー操作（クリックやナビゲーションパスなど）、エラー（JavaScriptの問題など）に関するリアルタイムデータを収集します。リアルユーザーモニタリング（RUM）は、JavaScriptコードや類似のスクリプトをWebページに埋め込むことで、ユーザーがWebサイトやアプリケーションとどのようにやり取りしているかを追跡します。収集されたデータは、分析のために監視サーバーに送信されます。

RUMデータを使用すると、次のことが可能になります。

• 速度と応答性を向上させるために、遅いページやボトルネックを特定します。
• ナビゲーションパターンと降車ポイントを発見し、デザインと機能性を向上させましょう。
• 正確なユーザーレポートに基づいて、バグやパフォーマンスの問題に迅速に対処します。
• 変更点やA/Bテストの結果を評価し、ユーザーエクスペリエンスを改善する。
• パフォーマンスの問題に関する通知を設定し、戦略的な意思決定のための洞察を生成します。

ウェブサイトの速度最適化ツールに、どのようなRUM（リアルユーザーモニタリング）指標を収集させたいですか？以下に、最も重要な指標をいくつかご紹介します。

最初の塗装/レンダリングまでの時間

ファーストペイント時間 (TTP) は、ブラウザが最初にページコンテンツをレンダリングする時点を示します。これは、ユーザーが感じるページ速度を測定します。 クリティカルレンダリングパス—ブラウザがHTML、JavaScript、CSSを画面上のピクセルに変換するために実行する手順。

書類完了

ドキュメント完了とは、ページ上のすべての静的コンテンツの読み込みが完了した時点を指します。これはページ読み込みパフォーマンスにおける重要な節目であり、メインコンテンツがユーザー操作に対応できる状態になったことを示します。 

その ナビゲーションタイミングAPI ドキュメントの読み込みに関する詳細なタイミング情報を提供します。これにより、ページ読み込みプロセスのさまざまな段階を測定し、潜在的なボトルネックを特定するのに役立ちます。

視覚的に完成

視覚的に完了した状態とは、ページがユーザーに対して完全にレンダリングされたように見える時点を指します。これは、バックグラウンドで処理が進行中であっても、ユーザーがページが準備完了と認識するタイミングを決定するため、非常に重要です。

リソースタイミングAPIを使用すると、開発者は画像、CSS、JavaScriptファイルなどの個々のリソースの読み込み時間を追跡できます。すべての重要なリソースが読み込まれたタイミングを監視することで、ページが視覚的に完成したタイミングを判断できます。

インタラクティブへの時間

インタラクティブになるまでの時間（TTI）は、ページが完全に使用可能になるまでの時間、つまり主要なコンテンツがすべて表示され、ユーザー操作をスムーズに処理できるようになるまでの時間を定量化したものです。TTIが高い場合、ページがバックグラウンド処理に忙しく、ユーザー操作に遅延が生じていることが多いことを示しています。これは、応答速度の遅さによってユーザーエクスペリエンスが損なわれる、ユーザーにとっての摩擦を生み出します。 

TTIは、ページがユーザーの入力に迅速に応答するまでの時間を監視することで評価できます。

RUMを使用してパフォーマンスの問題を検出する例

EdTechチームは、無料トライアルオファーのコンバージョン率が著しく低下していることに気づきました。トラフィックは安定しているにもかかわらず、ユーザーは無料トライアルボタンをクリックする前にサイトを離脱していました。CatchpointのRUM機能を使用して調査した結果、2つの重大な問題が判明しました。 

• 無料トライアルボタンがホームページの一番下に配置されていたため、視認性が悪かった。
• ページの読み込み速度が遅く、特にモバイル端末では顕著だった。 

この組み合わせの結果、高い直帰率と、ユーザーがボタンにたどり着く前に25%もの離脱率が発生しました。例えば、1,000人の訪問者のうち250人がボタンに到達する前にサイトを離脱し、結果として大きな収益損失につながりました。

チームは無料トライアルボタンをホームページの上部、中央、下部のより目立つ場所に移動しました。また、画像の圧縮とサーバー応答の向上により、ページ読み込み時間を最適化しました。これらの改善によりコンバージョン率が15%向上し、1,000人の訪問者のうち30人が登録するようになり（以前は20人）、潜在的な収益が5000ドル増加しました。ボタンへのユーザーエンゲージメントは20%増加し、離脱率は25%減少しました。全体として、これらの変更により直帰率が低下し、ユーザーエクスペリエンスが向上しました。

これは、RUMがユーザーインタラクションの最適化に効果的であることを示しています。チームはユーザーエンゲージメントとコンバージョン率の大幅な向上を達成し、その結果、収益の増加とウェブサイトの効率化を実現しました。

例：IPMがインターネットスタックのパフォーマンス問題の解決にどのように役立つか

架空の企業LearnSphereを考えてみましょう。LearnSphereは、世界中の学生が利用するオンライン学習プラットフォームを提供しています。ある朝、ヨーロッパとアジアの学生からプラットフォームに全くアクセスできないという報告があり、北米の学生からは断続的な接続障害が発生しました。 

LearnSphereのITチームは、IPMツールを使用して問題の診断を行っています。このツールでは、BGPルーティングとCDNのパフォーマンスは正常であることが示されていますが、合成テストでは、インタラクティブな演習とリアルタイムの学生フィードバックを担う重要なサードパーティサービスのDNSクエリ応答時間が大幅に増加していることが検出されました。 

さらに詳しく調査したところ、IPMシステムの相関エンジンは、DNSゾーン転送の失敗が重大なサービス低下を引き起こしたことを突き止めた。ヨーロッパおよびアジア地域を担当する権威DNSサーバーの1つに古いDNSレコードが含まれており、広範囲にわたる名前解決の失敗が発生していた。プラットフォームがサードパーティサービスへの接続を試みた際、誤ったIPアドレスを受信したため、接続タイムアウトとサービス障害が発生した。

この例は、依存関係を含めたインターネットスタック全体を監視することの重要性と、IPMツールがどのように役立つかを示しています。

結論

アプリケーションパフォーマンス管理（APM）ツールは、アプリケーションコードとバックエンドサービスを監視するために不可欠ですが、包括的なアプローチとしては、インターネットパフォーマンス監視（IPM）を通じてインターネットスタックを評価することが挙げられます。最も効果的なWebサイト速度最適化ツールを使用すれば、エンドツーエンドのユーザー取引経路全体にわたるパフォーマンスのボトルネックを評価できます。

LMインターネットパフォーマンスモニタリング、提供元： キャッチポイント世界最大のグローバルエージェントネットワークを活用し、アプリケーションのパフォーマンスに影響を与える外部サービスに関するリアルタイムのインサイトを提供します。RUMや合成テストソースなど、インターネットスタックのあらゆる側面からのデータを統合した、ウェブパフォーマンスの統一的なビューを利用できます。管理可能なパフォーマンスの問題を修正し、サイト訪問者に最大限の価値を提供することで、自信を持ってウェブサイトの速度を最適化できます。

よくあるご質問