Webサイトパフォーマンス改善の事始め-Core Web Vitals(コアウェブバイタル)

Siteimprove Performance は、Webサイト(ページ)のパフォーマンスを定期的にモニタリングする機能を備えています。この機能はSiteimproveプラットフォームのオプション機能として提供されています。

モニタリング対象について詳細な測定結果を提示することで、パフォーマンスを改善する示唆を得ることができます。最終的には訪問者により良いユーザー エクスペリエンスを提供することができます。

目次:

  • 1.パフォーマンス測定の設定方法
  • 2.パフォーマンス測定結果の概要で参照できるデータについて
  • 3.Page Performanceページについて
  • 4.測定結果の詳細について
  • 1.パフォーマンス測定の設定方法

    「パフォーマンス > ページの追加」で、簡単にモニタリングするページを追加することができます。

    ページを追加または編集する際に、以下の監視基準を設定することができます。

    チェック頻度:Siteimprove は毎日 1 回~最大 4 回までページをチェックすることができます。

    拠点・デバイス:訪問者のプロフィールとして、拠点、デバイス、およびネットワーク条件が設定できます。

    クレジット: 購入済みのクレジット(ライセンス数)に基づいて、消費する数量が設定されます。

    2.パフォーマンス測定結果の概要で参照できるデータについて

    監視しているページの概要は、「パフォーマンス > ページの概要」で見ることができます。 監視しているすべてのページのスコアは、それぞれの訪問者の測定結果の平均を表しています。

    Performance_Page_Overview

    [Action] 列の下には、監視対象のページを編集または削除するオプションがあります。パラメータの追加や削除、チェックの頻度、場所などの編集を行うことができます。

    使い方のご提案:

    ・Webサイトに新しくページを追加する際にはパフォーマンスのチェックを必ずおこないましょう。

    ・製品ページ、ランディングページ、キャンペーンコンテンツ、人気ページなど、ビジネスに最も影響を与えるページをチェックしましょう。

    ・最初はトップページなどからはじめて、次第に重要なページや新しく追加するページなどチェック範囲を広げていきましょう。

    ・リニューアルを予定しているサイトをリリースする前にチェックすることも可能です。

    ・サードパーティタグが含まれるページをチェックすることでサードパーティが提供するコンテンツや機能についてのパフォーマンスをチェックすることができます。

    ・頻度を多くすることで1日の異なる時間帯でパフォーマンスがどのように変化するか把握することができます。

    3.Page Performanceページについて

    ページパフォーマンスセクションは、特定のページを構成する要素がどのように読み込まれ、実行されているかについて分析データを提供します。

    時間帯や拠点(国、都市)、デバイスなどのユーザー環境によってパフォーマンスにどのような違いが出ているかを示します。これにより、どのユーザータイプが良好なサービスを受けることができているか、またはサービス品質が低いユーザーはどのような状況になっているか把握することができます。

    収集された情報は、以下のタブの下で複数の方法で表示されます。

    ・ステータス(Status): 直近のページチェックの結果(Low、Medium、High)、平均スコア、コンテンツや技術的な課題について改善点を表示します。

    ・進捗状況(Progress): 各指標の進捗状況を追跡します。ページの各指標の進行状況を追跡します。時間軸はこのセクションの上部にあるタイムスパンを選択することができます。

    ・地図(Map): 設定された地域全体でページがどのように実行されているか、視覚的に把握できるようになっています。マップ上で地域を選択すると、その地域のチェック結果の詳細を表示します。

    ・リスト(List): すべてのページのチェック結果の一覧を表示します。

    screencapture-my2-siteimprove-Performance-pagePerf

    注: 特定のリージョンのスコアの代わりに赤い「!」が付いている場合は、このリージョンからのページのチェックに問題があることを示しています。

    ユーザーエクスペリエンスに最も大きな影響を与える3つの測定結果も提供しています。近年、Google公式のウェブマスターブログでCore Web Vitals(コアウェブバイタル)をランキングシグナルとして使用すると発表がありました。

    First Content: ブラウザがコンテンツの最初のデータを表示するまでの時間。

    Meaningful Contet:ページの主要コンテンツが画面に表示されるまでの時間。

    Interactive:ページがインタラクティブになり、ユーザーの入力を受け取れるようになるまでの時間。

    「ページパフォーマンス」ページの下部には、パフォーマンス測定結果と改善案のリストが表示されます。

    エンドユーザーの条件(ネットワーク速度、デバイス、場所など)に関係なく、パフォーマンスの改善に役立つリストを提供します。

    特定の改善案をクリックすると、問題の説明と解決方法のアドバイスが表示されます。また、関連するチェック項目も表示されます。

    4.測定結果の詳細について

    ページパフォーマンスの「Go To results」ボタンをクリックすることで、測定結果の詳細が表示されます。ここでは、以下のような情報を提示しています。

    プロフィール(Profile): 訪問者のパラメータ(国・地域、デバイス、ネットワークスピード、チェック頻度)の詳細。

    読み込み状況(Loading Experience): 読み込み状況を視覚的に表示します。読み込み状況を個々のフレームに分解し、ページが読み込まれたときのユーザーの体験をシミュレートし、First Contentful Paint、First Meaningful Paint、Time to Interactまでの時間などの重要な統計情報を提供します。また、そのページに対応するパフォーマンススコアも表示されます。グラフの下部には色分けされたグラフがあり、最高のユーザー体験を提供するために目指すべき制限時間を視覚的に表現しています。

    Performance Visitor profile results

    マップ(Asset Location Map): このロケーションマップは、ページのアセット(画像ファイル、CSS、Jsファイル、その他のタグなど)が物理的に保存されている場所と、ページのレンダリング時間を視覚的に表示します。ページのレスポンスタイムは、アセットの数とその距離によって影響を受けます。視覚的な要素を追加することで、アセットの距離が読み込み体験にどのような影響を与えるかを確認し、ユーザーが体験している状況を把握することができます。

    プレイバックビューポート(Playback Viewport): マップの左側にある画面ではユーザー体験をリアルタイムで再生し、各アセットの地理的位置が最終的な体験にどのような影響を与えるかを確認できます。

    ネットワーク詳細(Network Details): ネットワークの詳細では、各アセットを場所別に表示し、アセットのサイズ、ロードにかかる時間、送信元のIPアドレスなどの重要な情報を提供します。このテーブルはタイプ別にソート可能なので、アセットがどこから取得されたかを確認できます。これにより、どのようにしてアセットをユーザーに近づけ、パフォーマンスを向上させるかを判断することができます。

    コンテンツの内訳(Content Breakdown): これは、ダウンロードファイルの合計サイズと、ページの読み込み中に行われたリクエストの数を示しています。ファイルサイズが大きく、リクエスト数が多いとページの読み込み時間が遅くなることがあります。ここでは、コンテンツの種類とファイルサイズ(重さ)を見ることができます。ページがどのようなファイルタイプで構成されているかを見ることができ、どの項目が最適化のために最も大きな可能性を秘めているかを知ることができます。

    改善点の提案(Suggested Improvements):

    Google Lighthouseの指標やその他の業界のベストプラクティスに基づいて、22個の評価項目で分析されます。 この結果は、ユーザープロファイル(国・地域、回線速度、デバイス等)に固有のものです。

    各提案には、難易度レベル(1~4)と役割のタイプ(エディター、デベロッパーなど)が記載されており、ページへの影響度が高いものから低いものまで分類され、難易度と役割でソートできるようになっています。

    各提案の「続きを読む」ボタンをクリックすると、問題の解決方法に関する推奨事項など、問題のより詳細な情報が表示されます。 さらに、検出された問題に対処するためのリソースへのリンクを提供しています。

    Performance Content breakdown and Suggested improvements

    前へ

    2021年度版SEOを成功させるためのサイト運営方法

    次へ

    強力なウェブサイトのセキュリティがもたらすビジネス上のメリット