Google AMP とは？概要と導入メリット[AMP]

ペット用品のウェブサイトを立ち上げる際に、WORDPRESSは挙動が重いので古典的なhtmlベースで作成しようかと考えていたところ、「Google AMP」の広告が目に止まりました。
詳細覚えていないのですが、
「ampサイトで高速化されたmobileサイトで広告のクリック率アップ」
みたいなキャッチコピーだったと思います。
html,css,jqueryという古典的な構成のサイトはすごく軽く高速なサイトになります。
AMPには、「AMP Cache」というAMPで作られたサイトのCDN（コンテンツ配信ネットワーク）が存在することで高速化を図っています。

いい機会なので、「Google AMP」を使ってサイトを構築してみることにしました。
実際に作成したページ→https://forsmile.jp/pet/landing.amp.html
この記事では、AMPの概要と導入するとどんなメリットがあるのかを紹介します。

Google Ampとは？概要を紹介

Accelerated Mobile Pagesの略でAMPです。
AMPホームページ→AMP
公式では、「ウェブコンポーネントフレームワーク」ですとうたっています。
私がざっくりと中身を確認した感じでは、「ONSEN UI」とか「Vuetify」とかからハードなデザイン部分を抜き取った感じです。
ONSEN UIやVuetifyと同じように、htmlタグに加え独自の「タグ」が追加で使用可能になります。
主に機能に特化して最適化されたタグが多いと思います。
Vue.jsのようなJavaScriptフレームワークと違い、単純にタグだけ追加される感じです。

AMPの独自のコーディングルールが存在し、それに違反するとデバッグでエラーが検出されます。
独自コーディングルールはページごと、タグごとに細かく決められていますが、上記デバッグでルールにそぐわないコーディングを検出できます。なんだかめんどくさそうな感じですが、Webサイトの高速化作業を経験したことがあるエンジニアであれば、納得のルーリングになります。

一言でAMPを表現すれば、まさに公式サイトの下記フレーズの通りです。
「AMPはウェブサイトを高速かつユーザーファーストにし、収益化するシンプルかつ堅牢なフォーマットです。」

まぁただ、実際に導入してみて感じたのは、高速化とはあまり関係がない、エンジニア間で宗教論争が起こりそうなルールも存在してます。実装していて「あれ？これもだめなの？」って私も思いました。GIT等で議論され、今後もユーザの意見を取り入れながら発展させていく方針なようなので、これからまだまだ変化する可能性があるのも面白いところですね。

AMPを使用するメリット３選

SEO対策になる。特にモバイル

公式の発表では、AMPを導入しているかどうかで検索の順位に影響はないと宣言しています。しかし、現状のSEOの評価基準として、表示速度やユーザに待機時間を発生させないなどの「速度」に関する点も重要視されている傾向があります。なので、単純に表示が高速になるAMPサイトはSEOの観点からみてもかなり優位に立てるフレームワークであるといえます。
–2020/12/02追記
PCページも検索エンジン上位に上がってくるのが早かったです。複数キーワードですがしっかりとサイトが検索結果に表示されました。AMPじゃないランディングページの場合、外部リンクや内部リンクを駆使してやっと検索に表示されるようになったページもありました。AMPに変更してアップした記事は、特に外部リンク対策等せずにOrganic Searchのみで7日たたずにヒットしました。
たまたまかもしれませんが、AMPはSEO的に優位そう。

表示速度が早くなり、ロード遅延によるユーザ離脱が少なくなる

これは体感できるほどにレンダリングが早くなります。画像の読み込み等はやはり画像に依存してしまう部分はありますが、それも「AMP Cache」という仕組みでページがキャッシングされるおかげで快速に感じます。
画面表示が遅いことによるユーザの離脱率が低くなり、よりユーザファーストなページに近くと考えられます。

便利なタグが使用可能になる

AMPを追加することで、さまざまなコンポーネントを簡単に作成できるタグが使用可能になります。
カルーセルやアコーディオン動的なコンポーネントから、ツイッター等SNSとの連携まで、さまざまなタグが用意されているのが魅力です。

AMPを使用するデメリット

現状はごくごくシンプルな構成のページ以外は、AMPに適さないケースも多いと思います。
それは、概要で述べたAMP独自のコーディングルールに起因します。このルールをまもることで高速化できるのですが、このルールがあることで他のフレームワークを導入できなかったり、既存のページに導入することができなかったりします。
もし、既存のウェブサイトがある場合、既存のページをリファクタリングするのではなく、新たにAMPページを別で作る方法をお勧めします。検索エンジン対策としては、htmlの同ページ判定の仕組み(link rel="canonical")を使用して既存ページとAMPページを連携させることができます。

また、独特なコーディングルールが各タグに設定されているため、htmlの構造をしっかりと考えてコーディングしないとタグを埋め込んでも動作しないケースも多いです。また、他プラットフォーム(Google Adsense等)との連携がうまく機能しないケース等もあり、まだまだ発展途上な感じを残しているのもデメリットだと思います。

AMPのお勧め度

完全な私見になりますが、単純なサイトであれば使ってみてもいいかな程度だと思いました。
もし仮に業務で使用することにした場合、AMPが加わることで、AMPで実装可能なページとAMPで実装不可能なページ等発生するので、余計な設計コストがかかります。かといって、複雑なページがAMPによるメリットを享受できるかどうか疑問です。それはおおよそのWebページのコンバージョンがページ表示速度だけで実現されているものではないからです。AMPはTwitterや広告からの導線ページのみに使う程度が、現段階では良いと思います。
私はせっかく作りはじめたので、このまま使い続けてみます。上記評価が変わる日が来るといいですね。