モバイルユーザービリティの向上(ユーザーに対して優しいサイト)いうことで、読み込み速度がGoogleには重要視されています。実際自分でウェブサイトを訪れた時に画像やテキスト、その他コンテンツによって読み込みが遅いと離脱してしまいますよね。
今回は多くの方ウェブサイト・ホームページの制作でつかっているWordPressにAMP（Accelerated Mobile Pages）を導入する際の注意点について、Googleがおすすめしているプラグインをそのまま入れると問題が起きる箇所がありますので、修正方法もあわせてご紹介します。
このページの目次
GoogleがおすすめしているWordPressに公式プラグイン AMP
公式サイト：https://wordpress.org/plugins/amp/
プラグインを有効化してみるとエラー
今回インストールしてみたAMPのバージョンは、0.4.2ですがインストールしてみるといきなりエラー。これではAMP対応ができず高速化ができません。
Call to undefined function get_avatar_url() in/~/web/wordpress/wp-content/plugins/amp/templates/meta-author.php
やってみたこと1 WordPressのアップデート 4.6.1に
WordPress 4.6.1–jaのバージョンに変更すると正常に無事動作しました。
WordPressのバージョンが古いとAMPの新しいバージョンとの互換性がなくて起きている問題でした。もしAMPのプラグインを使ってみて同様の問題が起きている方がいらっしゃいましたらぜひ参考にしてみてください。
WordPressのデータベースなどのバックアップはお忘れなく！
WordPressをAMP化してみたら高速化された
実際WordPressをAMP化してみるとどのようなメリットがあるのか気になる方も多いのではないでしょうか。実際導入するまでのコスト・リソースもかかるのでいざやるとなるとなかなか踏み切れません。実装するまで速度がどれくらい違うのか不安でしたが、実装してみて計測すると下記のように爆速に。
AMP適用時: DOMContendLoaded 2.64s Load: 2.87s
AMPなし :DOMContendLoaded 4.37s Load: 15.98s
計測はGoogle Chromeのdeveloper toolのNetwordで計測しています。キャッシュなしでスーパーリロードをしての計測です。
DOMContendLoadedは、-1.73s Loadは、 13.11s高速になりました。
Loadの場合は広告など様々な読み込みをしているのと、遅延読み込みしているのであまり参考になりませんが、DOMContendLoadedの読み込み速度も速くなっているので、これはユーザーにとっても嬉しいはずです。
ユーザーは3秒以内に表示されなければ大半が離脱してしまうということが言われていますので、ページ速度を速くすることは大切ですよね。大手のメディアでもAMPに対応しているところが増えてきていますが、AMPに対応されていないところがありましたらぜひ試してみてください。
現在のところAMPに対応したからといって検索順位が上がるわけではありませんが、AMPアイコンがついたりニュースとして別枠で表示される場合があるため、トラフィックを獲得できる可能性があります。
AMPが適用されているのかチェック
Googleが提供している構造化チェックツールで URLを入力して試すことができます。
Google Structured Data Testing Tool
https://developers.google.com/structured-data/testing-tool/
※logo でエラーが出ている場合は管理画面の「外観」→「カスタマイズ」で サイト基本情報をクリック。サイトアイコン(ファビコン)を登録してみてください。
※image でエラーが出ている場合は記事のアイキャッチ画像を登録、又は変更してみてください。
出典：http://nendeb.com/387
こちらを対応したところ無事に問題なしと表示されています。
AMP導入にかけた時間はプラグインのインストールと、カスタマイズから挿入するロゴ作成をあわせても10分程度で導入できます。
外観からAMPのデザインを確認
AMPを導入した後のデザインを確認したい場合は、WordPressの左側のサイドバーから、外観->AMPで確認できます。
管理画面上からもデザインの変更は可能ですが、簡易的にヘッダーの色とテキストカラーしか変更できないので、いろいろ変更したいという方はAMPのパッケージを調べてみると良いでしょう。
AMP導入するメリット：改善する閲覧時間と離脱率
AMPを導入したことで読み込み速度が速くなることは分かったけど、実際メディア運営の中でどのように活かせばいいの？というところが疑問ですよね。
多くのメディア運営者はGoogle Analyticsで毎日のユーザー動向を追っていると想定されますが、例えば、ソーシャルでシェアする際に、AMP記事をシェアして読み込み速度の遅さによって、ユーザーの離脱率が高かったメディアなどで導入してみると離脱率が下がるかもしれませんね。
記事の内容やタイトル、サムネイルのつけ方にもよりますが、ソーシャルで早く記事を見たいユーザーにとって読み込み速度が遅いのは致命的です。
実際導入してもユーザーにとって良いものになっているのかが重要ですので、数値分析までぜひ試してみてください。
AMPまとめ メディアの収益化と速さどっちをとる？
ページを高速化してみると非常に便利だということが自分の体験として分かります。
しかし、メディア運営において収益化を避けることはできません。
広告などを掲載してマネタイズしている場合は収益が下がる可能性もありますが、様々なマネタイズ方法がありますのでメディアでのマネタイズをどのようにやるか、を考える分岐点なのではないでしょうか。
下記のような項目についても注意したいですね。
- 高速化してページへの集客が増えなければ収益化もできない
- ユーザーの体感の良いものだとシェアされやすい可能性がある
- ユーザーライクなメディアはどういうものなのか
Rplayではまだ対応をしておりませんが、随時対応していく予定です。
WordPressがよくわからない、これから勉強していきたいという方にはWordPressの学習が低コストでできるプログラミングスクールをご紹介しています。
初心者でもサイト制作を学べるWordPressの学習スクール3選
GithubにあげられているAMPのソースコード
https://github.com/Automattic/amp-wp/
