WordPressテーマの表示速度を比べる方法｜条件のそろえ方とPSIの読み方

WordPressテーマの表示速度は、ページの内容・必要な機能・配信環境をできるだけそろえ、PageSpeed Insights（PSI）のラボデータと実ユーザーデータを分けて比べます。ラボデータは指定URLの模擬的な診断、実ユーザーデータは過去28日間の利用体験の集計です。条件の違いや測定のばらつきが残るときは、テーマ単体の優劣を決めず、何を追加で確かめるかを整理します。

テーマの公式サイトに載っている測定値や公開デモの結果も、ページ内容や配信環境が自サイトと同じとは限りません。そのまま自サイトでの速度順位に置き換えず、まずは自分のサイトで使う構成を基準に、比較する条件を決めましょう。

比較するページと、そろえられる条件を決める

最初に、自サイトで使う内容と必要な機能を整理します。何もないページ同士を比べても、画像や目次、フォームなどを備えた実際のページでどうなるかは判断できないためです。

比較の準備として、次の項目を記録する方法をおすすめします。これは、結果と構成の違いを対応させるために本記事が提案する整理方法です。

• ページ内容：本文、画像、動画や外部サービスの埋め込みなど
• 必要な機能と実現方法：メニュー、目次、フォームなどを、テーマ・プラグイン・追加コードのどれで用意するか
• 設定とバージョン：テーマやプラグインのバージョン、有効にする機能や設定
• 配信環境：サーバー、キャッシュ、CDNの利用状況や設定

キャッシュは、再利用するデータを保存する仕組みです。CDNは、コンテンツの配信を担う仕組みです。これらも含め、共通にできた条件と、残った違いを分けて残します。

架空の比較計画として、候補Aと候補Bに同じ記事本文と画像を用意し、どちらにも必要な目次機能を付ける場合を考えます。Aはテーマ内蔵機能、Bはプラグインで目次を作るなら、記録には「目次の実現方法に差あり」と残します。機能をそろえても、実装まで同じになったわけではありません。

公開デモしか測れない場合は、そのデモページについての参考情報として扱います。内容や配信環境が異なるデモ同士の結果だけでは、自サイトでの速さやテーマ単体の性能は確定できません。

PSIでは、ラボ診断と過去の利用体験を分けて見る

PSIは、モバイルとデスクトップについて、ラボデータと実ユーザーデータを提供します。同じ画面に表示されても、測っている条件と用途が異なります。

ラボデータは、指定URLを模擬環境で診断した結果

ラボデータは、Lighthouseというツールで指定URLを模擬的に分析した結果です。制御された環境でページを調べるため、問題の調査に役立ちます。

ただし、実際の利用者が使う端末や通信環境をすべて再現するものではありません。ラボの結果が良好でも、実ユーザーの体験まで良好とは保証できません。

実ユーザーデータは、過去28日間の利用体験

実ユーザーデータは、Chrome User Experience Report（CrUX）に基づく、過去28日間の集計です。多様な端末や通信環境での利用体験を表します。

ラボは模擬的な読み込み、実ユーザーデータは過去の実際の利用を見ているため、値が一致しないことがあります。異なる値が出たときも、片方を誤りと決めず、それぞれの条件を確認します。

出典：GoogleのPSI公式資料

操作への応答を表すINPは、本記事ではPSIの実ユーザーデータで確認します。現実的な操作を再現すればラボでも測定できますが、通常の読み込み診断を繰り返すだけで取得する手順にはしません。読み込み中の処理を調べるTBTという指標も、INPそのものの代わりにはなりません。

出典：web.devのINP解説

実ユーザーデータの対象ページと期間を確かめる

実ユーザーデータが表示されたら、まずページ単位か、オリジン単位かを確認してください。入力したURLの値が必ず表示されるわけではありません。

オリジンは、通信方式・ホスト名・ポートの組み合わせで区切られる範囲です。オリジン単位のデータは、個別ページだけの集計ではありません。

PSIでは、対象ページのデータが不足するとオリジン単位へ切り替わります。オリジンのデータも不足している場合は、実ユーザーデータを表示できません。

架空の記録例なら、次のように対象を分けます。

• ラボデータ：入力した記事URLの診断
• 実ユーザーデータ：オリジン単位の集計
• 読み取れること：実ユーザーデータを、その記事だけの利用体験とは判断しない

実ユーザーデータが表示されなければ、「データ表示なし」と残します。値がないことを、ゼロ・良好・問題なしと読み替えないようにしましょう。

また、過去28日間にテーマを変更していれば、集計には変更前の利用体験も含まれ得ます。そのため、テーマ変更直後に表示された実ユーザーデータを、変更後だけの性能として扱うことは避けます。変更日時と集計期間を照らして読む必要があります。

出典：PSI公式資料の実ユーザーデータに関する説明

指標が測るものを理解して、判定を読む

表示の速さ、レイアウトの安定性、操作への応答は、それぞれ別の指標で評価します。判定を見る前に、各数値が何を表しているかを押さえましょう。

各指標が表す対象

• LCP：ページへの移動開始から、画面の表示領域内で最も大きい画像・テキストブロック・動画など、測定対象となるコンテンツが描画されるまでの時間です。大きさの判定には、表示領域の外や見えない部分を含めません。定義の出典
• CLS：予期しないレイアウトのずれを、短時間に続くまとまりごとに集計し、累積スコアが最大のまとまりを採用した値です。時間を表す値でも、ページ滞在中のずれをすべて単純に足した値でもありません。定義の出典
• INP：ページ滞在中のクリック・タップ・キー操作への応答を調べ、その訪問を代表する値を出す指標です。原則として最も遅い操作の値を使い、操作数が多い場合は外れ値を除きます。測るのは操作開始から次の描画までの遅延で、通信などの後続処理がすべて終わるまでの時間ではありません。定義の出典
• FCP：ページへの移動開始から、文字や画像などのコンテンツのいずれかが最初に画面へ描画されるまでの時間です。ページ全体の表示完了を表すものではありません。定義の出典
• TTFB：ページへの移動開始から、応答の最初の1バイトが届き始めるまでの時間です。リダイレクトや接続確立なども含み、サーバー内の処理時間だけを表すものではありません。PSIでは実験的指標として扱われています。定義の出典

実ユーザー指標の分類と75パーセンタイル

PSIの実ユーザー指標は、次の境界で分類されます。

実ユーザーデータには、各分類に当てはまる利用体験の割合と、75パーセンタイルの値が表示されます。75パーセンタイルは、値を小さい順に並べたときの75％の位置に当たる値です。ラボ測定を繰り返した平均値とは異なります。

上の表は、この75パーセンタイルの分類にも使われます。架空の数値例として、LCPの75パーセンタイルが4秒なら「改善が必要」に含まれ、4秒を超えると「不良」です。

Core Web Vitalsとラボのスコアは別の評価

Core Web Vitalsは、LCP・CLS・INPで、読み込み、表示の安定性、操作への応答を評価するものです。PSIでは、ページまたはオリジンの実ユーザーデータについて、次のように判定します。

• 3指標すべてに十分なデータがある場合：各75パーセンタイルがすべて良好なら合格です。一つでも良好でなければ合格しません。
• INPのデータが不足する場合：LCPとCLSの75パーセンタイルがともに良好なら合格です。
• LCPまたはCLSのデータが不足する場合：評価できません。

一方、ラボ側のカテゴリースコアは、90以上が良好、50〜89が改善が必要、50未満が不良です。この点数と、実ユーザーデータによるCore Web Vitalsの評価は分けて読みます。

いずれもPSIの分類であり、そのままテーマ採用の合格条件になるわけではありません。どの体験に問題があるのかを、個々の指標と測定条件から判断します。

出典：PSI公式資料の判定境界・Core Web Vitals・ラボ診断の説明

比較条件と測定結果を対応させて残す

測定するときは、最初に作った構成の記録と、PSIの結果を結び付けて保存します。次のように欄を分けると、後から対象の違いを確認できます。

• 構成の記録：どの候補・設定で測ったか
• 測定日時と対象URL：いつ、どのページを診断したか
• 端末区分：モバイルかデスクトップか
• ラボ結果：カテゴリースコア、指標値、診断内容
• 実ユーザーデータ：表示の有無、ページ単位かオリジン単位か、表示された値

PSIに対象URLを入力し、確認する端末区分を選んだら、点数だけでなく指標や対象範囲を含む結果を保存しましょう。この記録方法は本記事からの提案であり、Google公式のテーマ比較手順ではありません。

架空の記入例なら、「候補Aの構成記録／測定日時／モバイル／対象記事URL／ラボ結果／実ユーザーはオリジン単位」を対応させます。実ユーザーデータが表示されなければ、その欄に数値を補わず、表示されなかったことを残します。

繰り返し測る場合は、各回の条件と値を保存し、都合のよい回だけを選ばないようにします。途中でキャッシュなどの設定を変えた回は、同じ条件の再測定に混ぜず、変更点を添えて残してください。

PSIの公式資料は測定値が変動する要因を説明していますが、テーマ比較に必要な一律の測定回数や許容変動幅は示していません。本記事でも固定の回数は設けず、結果が安定しなければテーマ差の判断を保留する方法を提案します。

出典：PSI公式資料の測定値の変動に関する説明

結果から言える範囲と、追加で確かめることを決める

条件を対応させた記録があれば、「この構成・この測定条件では、どのような差が出たか」を比較できます。そのうえで、残った違いに応じて次の行動を選びます。

機能の実現方法や配信環境に違いがある場合は、その違いをそろえて比較できるかを検討します。最初の架空例で、目次をテーマ内蔵機能で作るAとプラグインで作るBに差が出ても、直ちにテーマ単体の差とは結論付けません。まず、記録した実装や設定の違いを調べます。

測定ごとに結果が安定しない場合は、各回の設定や測定条件を見直します。差の方向が一定しないまま、最も高いスコアだけで候補を選ぶことは避けましょう。

ラボと実ユーザーで評価が異なる場合は、実ユーザーデータの集計期間と対象範囲を確かめます。直近の模擬診断と過去28日間の集計、個別URLとオリジン全体を、同じ対象の数値として扱っていないかを見直します。

条件をそろえてラボ結果に差が出ても、判断できるのは測定した構成同士の差です。ほかのページでの順位や、実ユーザー体験の良好さまで広げず、必要な機能を備えた自サイトの構成として評価してください。

比較を終えて実際のテーマ変更へ進む場合は、WordPressのテーマ変更前後に確認することと、元に戻すための準備を参照してください。変更前の記録、バックアップ、切り戻し、新テーマでのテスト、切り替え後の表示・操作確認を扱っています。