トップページ
スマホサイト編
AMP（Accelerated Mobile Pages）の基礎と導入方法

AMP（Accelerated Mobile Pages）の基礎と導入方法

AMPの利点とは？

AMPはスマートフォン（スマホ）の表示に特化した高速化技術の1つです。

Googleではモバイルファーストインデックスなどを始めとしたモバイルファーストへの方針転換に伴い、モバイルフレンドリーなサイト作りを強く推奨しています。
その一環としてTwitter社と協同で生み出されたのがAMP（Accelerated Mobile Pages）技術です。AMP対応のサイトを構築することでスマホでの表示が高速化されます。

もう一つの利点としては、AMPのページはGoogleの検索結果ページにカルーセル表示され、目立たせることができる点があります。但しこれはすべてのAMPページで実施されるわけではなく、あくまでもGoolge検索エンジンの判断にゆだねられます。

AMPの仕組みとは

AMPでのスマホ表示高速化の中身はキャッシュの利用とマークアップの簡素化です。

キャッシュの利用

AMPサイトのコンテンツデータはGoogleのキャッシュサーバー（AMP CDNサーバーと呼ばれる）に定期的にキャッシュされ、閲覧者にはそのキャッシュサーバー上のデータが返されます。これまでのようにリクエストの度にWebサーバー側でHTMLを生成せずに済むため、その分高速化されるという理屈です。

Note なお、閲覧者側の視点では表示しているページ（リクエスト先）のURLが変わるわけではなく、サイト閲覧者側がキャッシュサーバーを意識することはありません。

マークアップの簡素化

スマホ表示が高速化されると聞けば、非常に喜ばしいことのように思えるかもしれませんが、実際には表示高速化によるデメリットもあります。

まず、AMPは基本的にドキュメントページを対象とした技術であり、一部を除きJavaScriptは大きく制限されます。
これはAMPがページ自体を高速化するというよりは、重い処理をさせない（できることを制限）という方針のもとに仕様が策定されているためです。

そのため例えばフロントエンド技術を駆使したようなWebページは恐らくAMP化は難しいです。JavaScriptによる、エフェクト実装サイトやアプリサイトには向いていない（実質的にAMP化不可）と言えるでしょう。

AMPに向いているサイト・向いていないサイト

AMPに向いているサイト・向いていないサイトを挙げるとすれば以下となるでしょう。

向いているサイト：

ブログサイト
ニュースサイト
情報サイト

向いていないサイト：

Webアプリサイト
エフェクトを駆使したサイト

AMPの導入と基本

AMPのサンプル

まず、AMPを具体的にどのように実装するかを理解するは、AMPを実装したサンプルページ全体を見るのが早いでしょう。
※詳細なルールは、この後1つ1つ解説します。

<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

AMP HTML 仕様より

AMPの必須マークアップ

以下のマークアップルールはAMPページには必須となり、必ず実装しておく必要があります。必須項目自体はそれほど多くはありません。

ルール	説明
`<!doctype html>`のdoctype宣言から開始します。	HTML標準です。
トップレベルの`<html amp>`タグを含めます。	ページをAMPコンテンツとして識別するために必要です。
`<head>`および`<body>`タグを含めます。	これらはHTMLではオプションですが、AMPでは必須です。
`<head>`タグの最初の子として`<meta charset="utf-8">`タグを含めます。	AMPページのエンコードを識別します。
`<head>`タグ内に`<script async src="https://cdn.ampproject.org/v0.js"></script>`タグを含めます。ベストプラクティスとしては、`<head>`タグ内のできるだけ上部このスクリプトを記述します。	AMP JSライブラリを含めてロードします。
`<head>`タグ内に`<link rel="canonical" href="$SOME_URL">`タグを含めます。	AMP HTMLドキュメントの通常のHTMLバージョンを指すか、そのようなHTMLバージョンが存在しない場合は自身を指すようにします。
`<head>`タグ内に`<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">`タグを含めます。 ※initial-scale=1を含めることを推奨しています。	レスポンシブビューポートを指定します。
`<head>`タグにAMPボイラープレートコードを含めます。	AMP JSがロードされるまでコンテンツを最初に隠すCSSボイラープレートです。

参考なお、AMPマークアップの詳細を知りたい場合はAMP HTML 仕様（AMP Open Source Project日本語公式サイト）をご参照ください。

AMPの是非と将来性

キャッシュによる遅延や表示障害

上述したようにAMPはページのコンテンツデータをキャッシュに保存しており、リクエスト時にはそのキャッシュデータを返すことで高速化しています。
しかしキャッシュを使用する事によるデメリットとして、キャッシュデータの更新頻度に関連した表示遅延があります。
キャッシュによる高速化を成すためには、事前にページデータをキャッシュしておかなければなりません。しかしそのキャッシュ周期（max-age値）までの間はページの情報が更新されない事になります。

Google AMP キャッシュの更新

ユーザーが Google AMP キャッシュに対して AMP ドキュメントをリクエストすると、次にリクエストするユーザーに最新のコンテンツを提供できるようにするために、コンテンツがキャッシュされた後に Google AMP キャッシュから更新が自動的にリクエストされます。このモデルでは、AMP ドキュメントの更新が自動的にすばやく反映されるため、ドキュメントの更新後に更新前のバージョンが表示されることはほとんどありません。
キャッシュは、「stale-while-revalidate」モデルに従います。このモデルでは、特定のドキュメントやリソースが最新でないかどうかを判断する際のヒントとして、元のキャッシュヘッダー（Max-Age など）を使用します。ユーザーが最新でないものに対するリクエストを行うと、そのリクエストによって新しいコピーが取得され、次にリクエストするユーザーが最新のコンテンツを取得できるようになります。
Google AMP キャッシュでは、サイト運営者のサイトに生じる負荷の量を制限するために、ドキュメントは 15 秒以上、リソースは 1 分以上の間、最新と見なされます。 Google では、キャッシュの調整によってサイト運営者のサイトの鮮度と負荷の最適なバランスを保っています。そのため、この時間は将来変更される可能性があります。
https://developers.google.com/amp/cache/overviewより

このため、ページの内容を変更しても直ちにキャッシュが更新されるわけではないため、しばらくは古い情報のまま表示されてしまいます。これはすぐに情報の変更を反映して欲しい場合には不向きとなります。

Note少々面倒ですが手動によるGoogle AMP キャッシュの更新は可能です。

また、キャッシュサーバーを介してページを表示するという事は、サイトの表示はキャッシュサーバー側に依存してしまうことになります。
万が一、キャッシュサーバー側で遅延障害やサーバーダウンが起きてしまえば自分のAMPサイトも巻き添えを食ってしまうことになります。キャッシュサーバーと一蓮托生というわけですね。

最近のネット環境やスマートフォンは高速化

そもそも論となってしまいますが、最近では4Gや5Gなど、スマートフォンの通信速度自体は飛躍的に高速化しており、極端にデータサイズが大きいサイトやJavaScriptを酷使したサイトでもなければ、正直ページの表示遅延を感じる事はほぼ無くなっています。
また、AMPではなくても、独自のキャッシュサーバーによる高速化機能を実装しているレンタルサーバーも多数あり、それらを利用すれば、AMPのキャッシュサーバーを利用するメリットはほぼ無いかもしれません。

これはAMPに限らずキャッシュサーバー全般に言える事ですが、データをキャッシュ化することによる問題の方がむしろ大きい場合もあり、キャッシュは万能ではなく問題も多いのが現実です。
それらを念頭に置けば、これからはAMPは普及するどころか廃れていく可能性の方が高いのではないかと危惧されます。

個人的には、AMPはあくまでもモバイルファースト化への過渡期における技術であり、将来的なメリットはあまり無いのではないかと考えています。

公開日時：2020年03月22日 14:50:18

なお、レンタルサーバー選びで迷ったらこちらの記事で主要レンタルサーバーのプランと料金を比較していますので、是非参考にしてみてください。