WordPress にAMPを導入&最適化した方法

Google for WordPress Publisher tại HCM に参加し、AMP に感銘を受けたのでこのWebサイトもAMP化しました。
AMP の導入方法やハマったことを共有したいと思います。
また、AMP でのGoogle アナリティクスの設定&Google AdSense の設定も共有したいと思います。

AMP とは

AMP は Accelerated Mobile Pages（モバイルページの高速化）の略名で「アンプ」と言います。
Google が推進しているモバイルページを高速に表示（読み込み）させるためWebコンポーネントフレームワーク（規定内での作成手法）です。
AMP にするとモバイルページだけでなく、PC ページの高速化できます。

詳しいことはいつか記事化したいと思いますので概要だけにしています。

AMP 導入のタイミング

AMP を導入するならWebサイトを立ち上げる前の企画段階か、立ち上げてすぐの段階がおすすめです。
なぜかというと、AMPはWebサイトを高速読み込み（表示）するためにいくつかの制限があります。主にJavaScript の制限です。
ある程度規模が大きくなった段階でAMP を導入するとデザインやプラグインの変更で非常に時間がかかり、検証にも大変です。そのため、Webサイトを立ち上げる前の企画段階か、立ち上げてすぐの段階でAMP を導入すると運用が楽になります。

規模が大きいWebサイトがAMP 導入をすすめていない訳ないです。CNNや朝日新聞やAmebaやGIZMODO もAMP を導入されています。
AMP は高速読み込みするのでSEO の向上やユーザービリティがいいのでAMP 化したときはパフォーマンスが高くなると思います。

AMP の導入方法

AMP を導入する方法はこの3つかと思います。

AMP に対応しているテーマを導入する。
AMP に対応していないテーマをAMP 設定を施す。
テーマをAMP に合わせてフルスクラッチする。

1. AMP に対応しているテーマを導入

Googler 曰くは「自分でオリジナルテーマを作成するが良いが、手間と時間がかかるのでAMP に対応しているテーマを導入するのが良い」とのことです。AMP に対応しているテーマは基本的には有料版が多いです。購入するのが一番いいと思いますが何も試してないのにコストを掛けるのは立ち止まってしまうと思いますが、手間が少なく高品質なのでおすすめです。

2. AMP に対応していないテーマをAMP を施す

AMP を対応していないテーマに手を加えて、AMP化を行うことです。カスタマイズ化です。
ここは「テーマをカスタマイズし、AMP に合わせる」「AMP 規格に適しているテーマにAMP プラグインを導入」の2つの方法があると思います。前者はテーマの規格とAMPの知識が必要で辛いですが、フルスクラッチするよりマシかと思いますがテーマのバージョンアップが来たらやり直しなおので辛いことには関わりないです。後者はある程度の知識があればできると思いますが、テーマの見極めが必要なので時間がかかると思います。これは無料でできる事が多いです。

3. テーマをAMP に合わせてフルスクラッチ

なければ作ればいいじゃないということで、テーマを自作することです。デザインはピッタリ合うので時間と手間を掛かってもいいなら有りだと思います。予算が豊富なら外部に依頼するというのも有りだともいます。ただ、AMP が発展中でバージョンアップがある合わせてテーマもそのバージョンアップに適さないと効果が発揮できないので管理というコストが上乗せになります。資金とリソースが使える企業やブログだけで生活しているブロガー向けだと思います。または技術変態とかはあっているかと思います。