WordPressテーマ スピードテスト(2021)
Photo by Unsplash

テスト実施(再開)の理由

下記3つの理由によります。これらは全て、今求められていることだからです。

テスト再開の理由

理由1:「DIY WordPress Site Basic」の公開/提供に際して、お勧めテーマの調査が必要となったから。
理由2:WordPressの標準エディタが「ブロックエディター(Gutenberg)」に変わったから。
理由3:ページビルダー(Gutenberg含む)の浸透により、よりデザイン性が高く、ユーザビリティの高いページが要求されるようになったから。

もう1つ付け加えると、当サイトが遅いのでは話にならないから。よって当サイトで使用中のテーマもテスト対象とします。

テストの結果を踏まえ、近い将来当サイトも含め運営サイトのWordPressテーマを変更する可能性があります。 なので検討対象と判断したテーマについては、断続的にテストを行っていく予定です。

基本方針

過去の経験上、スコアだけを追求すると泥沼にハマるリスクが高い。よって、言葉通り「表示速度」を最重要視します。

計測対象

計測対象は、デザインやリンクを多用する下記のページとします。

計測対象
  • トップページ
  • LP(ランディングページ)

※固定ページや投稿はテキストと画像メインならそう重くなることはない。よって、上記以外のページは計測対象から外す(特筆すべき点があれば公開)。

使用ツール

計測ツールは下記2つを使用します。

  1. PageSpeed Insights:モバイル
  2. GTmetrix:LTE Mobile (15/10 Mbps, 100ms)接続

※1:Page Speed Insightsの「パソコン」は、広告を貼らなければ2秒台前半は簡単に出るので毎回は計測しない。基本は初回テストと最終テストのみ計測実施。

※2:モバイルの表示速度を重視するなら「Test My Site」を使えば良いのでは?と思ったかもしれない。確かにその通りなのだが、テストサイトは全てサブドメイン/サブディレクトリの為「Test My Site」では計測出来ない。よって、使用ツールから外している。

具体的な目標値

PC/モバイルごとの目標値、及び計測ツールのセッティングは下記の通りです。

PC

※このテーブルは、横にスクロールします。
測定ツール セッティング 目標値
Page Speed Insights - Time to Interactive2.0秒以内
GTmetrix Unthrottled Connection Time to Interactive2.0秒以内、Fully Loaded Time2.5秒以内

モバイル

※このテーブルは、横にスクロールします。
測定ツール セッティング 目標値
Page Speed Insights - Time to Interactive4.0秒以内
GTmetrix LTE Mobile (15/10 Mbps, 100ms)接続 Time to Interactive2.5秒以内、Fully Loaded Time5.0秒以内

【用語】

Time to Interactive(TTI)

閲覧者がページを操作出来るようになるまでにかかった時間のこと。GTmetrixによれば、 「(TTIとは)ページが完全にインタラクティブになるまでにかかる時間。 優れたユーザーエクスペリエンスは2.5秒以下です。」と説明されている。

Fully Loaded Time

完全ロード時間のこと。GTmetrixによれば、 「これは、FCPとOnloadがトリガーされた後の最大時間であり、最後の要求がキャプチャされた後、ネットワークとCPUがアイドル状態(それぞれ5.25秒)になっています。」と説明されている。

「そもそもの基準が分からない…もう少し詳しく知りたい!」とお考えなら、下記web.devの記事がお勧めです。この記事は、Page Speed Insightsの監査項目詳細としてリンクされているものです。英文なので、翻訳しても若干読みづらい部分はありますが、Googleが何を重視しているのかがよく分かります。

【参考】TTIメトリック(Lighthouse)

(秒単位)色分け
0〜3.8緑(速い)
3.9–7.3オレンジ(中程度)
7.3以上赤(遅い)
【出典】「インタラクティブへの時間」web.dev

テストサイト概要

サブドメイン/サブディレクトリ上にテストサイトを作成してテストを行います。概要は下記の通りです。

※このテーブルは、横にスクロールします。
項目 詳細 備考等
固定ページ 5ページ
LP 1ページ 動画埋め込み
投稿 15ページ ダミー投稿。内容は同じ
外観 可能な限り同一とした。装飾は各テーマ独自のものを優先 例:ボタン
プラグイン 可能な限り同一とした。 詳細は各テーマのテスト結果に記載
埋め込み Wistiaの動画(4:34)、Googleアナリティクスのトラッキングコード LPのみ

テストしたWordPressテーマ

テストを行ったWordPressテーマと、テスト結果へのリンクです。
スマホではかなり見づらいと思いますが、一覧表もあります。

テストテーマ一覧表

一覧表(準備中)

1. DIVER

テスト結果

テスト結果詳細(外部リンク)

2. Cocoon

テスト結果

テスト結果詳細(外部リンク)

3. Lightning

テスト結果

テスト結果詳細(外部リンク)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう