AMP対応かつ日本の無料ワードプレステーマをインストール、デザイン、PageSpeed Insightsで比較してみました。結論から言うと、以下の5点がわかりました。比較といって期待させても申し訳ないので先に挙げておきます。

  • AMP対応には有料プラグインが必要なテーマがあった
  • AMPに対応する方法がわからないテーマがあった
  • AMPページだからといってPageSpeed Insightsでよいスコアが出るわけではない
  • 「Hello world!」のページでもPageSpeed Insightsのスコアが結構変わる
  • テーマ「LIQUID AMP」はデフォルトで全てのページがAMPになっている

当初はAMP対応のワードプレステーマをインストールして、AMPを体験することとお気に入りのテーマを探してみようという軽いノリだったのですが、それからもう少し足をのばしてみました。結果的に良かったのはAMP対応のテーマにすることで比較するテーマを絞り込めたことです。無料のテーマは興味があったのですが比較対象をどう絞ろうかと、考えては忘れていました。

事前準備

比較したワードプレステーマやインストール環境をまとめています。

比較したワードプレステーマ

比較したAMP対応のワードプレステーマは以下の通りです。「AMP ワードプレステーマ 無料」あたりで検索するとよく出てくるテーマです。

  • Cocoon
  • Simplicity2
  • Luxeritas
  • Sentry
  • 4536
  • Emanon Free
  • LION BLOG
  • LION MEDIA
  • LIQUID AMP

インストール環境

ワードプレステーマをインストールした環境です。

サーバー
XFREE (エックスフリー)

ワードプレス
バージョン 5.4.2

エックスフリーにてワードプレスをインストールしサイトネットワークを設置、マルチサイトにより各テーマごとにサイトを作成しました。ワードプレスのプラグインは「Classic Editor」のみサイトネットワークで有効にしました。その他はインストール初期の状態です。テーマ「LIQUID AMP」のみウィジェットの位置をサイドバーに変更しています。

エックスフリーのPHPが7.1までしか対応していないため、ワードプレスのダッシュボードで「サイトが安全ではないバージョンの PHP を実行していることを検出しました」というメッセージが表示されました。外観のカスタマイズができないのはこのせいかも。

外観のカスタマイズができない

デザイン

各テーマのパソコンで見たトップページのスクリーンショットです。デザインで気に入ったのは「Emanon Free」「4536」「LION BLOG」「LION MEDIA」「Luxeritas」です。デザイン抜きで考えるなら「LIQUID AMP」のシンプルさも大好きです。ダッシュボード内も少し操作してみましたが、無料でここまでできるの?というのが第一印象です。ブログや小規模のサイトであればこれらのテーマで十分かなと思いました。

Cocoon

Cocoon トップページのスクリーンショット

Simplicity2

Simplicity2 トップページのスクリーンショット

Luxeritas

Luxeritas トップページのスクリーンショット

Sentry

Sentry トップページのスクリーンショット

4536

4536 トップページのスクリーンショット

Emanon Free

Emanon Free トップページのスクリーンショット

LION BLOG

LION BLOG トップページのスクリーンショット

LION MEDIA

LION MEDIA トップページのスクリーンショット

LIQUID AMP

LIQUID AMP トップページのスクリーンショット

PageSpeed Insights

各テーマの「Hello world!」の投稿をPageSpeed Insightsでテストしてみました。スコアのみアップしています。

ご覧になるにあたって

PageSpeed Insightsはご覧になっている方も興味のある比較ではないでしょうか?ただ、言っておきたいことは私の環境でPageSpeed Insightsでテストを行ったという事実だけです。状況や環境、実際にブラウザで見た体感スピードは変わってきますのであくまで参考までにお願いします。

当初はトップページをテストしたんですがスコアにあまり変化がなかったため、「Hello world!」の投稿にしました。PageSpeed Insightsでのテストは5回ほどやってみて高いスコアを採用しています。各テーマともパソコンは高スコアなこと、モバイルで変化することからモバイルのスコアを採用しました。

Cocoon

Cocoon PageSpeed Insightsのスコア

Simph3city2

Simph3city2 PageSpeed Insightsのスコア

Luxeritas

Luxeritas PageSpeed Insightsのスコア

Sentry

Sentry PageSpeed Insightsのスコア

4536

4536 PageSpeed Insightsのスコア

Emanon Free

Emanon Free PageSpeed Insightsのスコア

LION BLOG

LION BLOG PageSpeed Insightsのスコア

LION MEDIA

LION MEDIA PageSpeed Insightsのスコア

LIQUID AMP

LIQUID AMP PageSpeed Insightsのスコア

各テーマのAMP対応について

各テーマのAMP対応についてダッシュボードでの設定方法などをまとめています。

Cocoon

ダッシュボードの「Cocoon 設定 > AMP設定」でAMPに対応できます。「AMP機能を有効化する」にチェックを入れると投稿・固定ページがAMP対応になります。「AMP除外カテゴリー」でカテゴリーごとAMP対応させない設定ができます。その他AMPに関する設定を行えます。

Cocoon AMP設定

Simph3city2

調査中。

Luxeritas

ダッシュボードの「Luxeritas カスタマイザー > AMP」でAMPに対応できます。「AMP ( Accelerated Mobile Pages ) 有効化」にチェックを入れると投稿・固定ページがAMP対応になります。そのほか「AMP で有効化するプラグイン」「AMP 用ロゴ画像」を設定できます。

Luxeritas AMP設定

Sentry

調査中。

4536

ダッシュボードの「4536設定 > AMP」でAMPに対応できます。「AMP対応するページの種類」で「記事ページ」「固定ページ」「メディアページ」を選択でき、選択したページがAMP対応になります。メディアページはワードプレスの管理画面「メディア > ライブラリ」で画像の一覧で確認できます。そのほかGooleアドセンスの設定、コードの追加を行えます。

4536 AMP設定

Emanon Free

ダッシュボードにはAMP対応の設定はないようです。AMPプラグイン(Automattic社製)を親とする子テンプレート方式というのがイメージがつかめないのですが、「Emanon AMP」という有料プラグインでAMPに対応できます。

Emanon AMPは、AMPプラグイン(Automattic社製)を親とする子テンプレート方式のプラグインです。Emanon AMPを利用することで、Emanonの投稿ページをAMPページにすることができます。

LION BLOG

公式では「カスタマイズ (おそらく外観の)」でAMP設定するように書かれているのですが、当環境が「カスタマイズ」できない状況なのでAMP化できません。別環境で試してみたいと思います。

外観のカスタマイズができない

別環境で試してみました。「外観 > カスタマイズ」はPHP 7.1だと動作しないようです。ダッシュボードの「外観 > カスタマイズ > AMP設定 [LION用]」でAMPに対応できます。「AMP機能を有効化するか選択」で「有効」にすると、投稿ページがAMP対応になります。そのほかに「AMP検索機能」「AMP用ロゴ画像」を設定できます。

LION BLOG AMP設定

LION MEDIA

未確認なのですが、「LION BLOG」と同じだと思います。

LIQUID AMP

デフォルトで全てのページがAMPに対応しています。canonicalが特殊、トップページとカテゴリーのcanonicalが最新の投稿になっています。各投稿のcanonicalは投稿のURLです。

まとめ

各テーマについて気づいた点をまとめています。

AMP対応のワードプレステーマについて

AMP対応のページを別URLで対応する場合と全てのページがデフォルトでAMP対応になっているテーマがありました。前者は「Cocoon」「Luxeritas」「4536」、後者は「LIQUID AMP」です。

当ページのリンク集「Themes Archives : AMP for WordPress」にある海外のテーマもインストールしてみましたが、国産のテーマのほうがダッシュボードにまで手を加えている印象です。たとえば本来ならプラグインで解決させる機能までテーマに盛り込んでる感じです。特に「Cocoon」「Luxeritas」は盛りだくさん。

エックスフリーで連続 (数秒おき)してアクセスすると接続がタイムアウトすることがわかりました。数分後アクセスできるようになり、その後は爆速です。

リンク集

参考になるリンクです。

Showcases Archive : AMP for WordPress
ワードプレスのAMPプラグインを利用したブログやサイトがまとめられています。

Plugins Archives : AMP for WordPress
AMPに対応したワードプレスプラグインがまとめられています。

Themes Archives : AMP for WordPress
AMPに対応したワードプレステーマがまとめられています。いくつかインストールしてみましたが、テーマのみでのAMP対応はしていないようです。AMPプラグインが必要になるのかなと思います。

Getting Started : AMP for WordPress
ワードプレスのAMP対応について説明しています。英語です。

Amplifier AMP/Canonical switcher
ページがAMPに対応しているかチェックできるFirefoxのアドオンです。AMPの⚡マークが現れます。AMP対応のページがcanonicalで指定されている場合は、マークをクリックするとそのページに飛びます。