AMPの概要や対応ポイントのまとめ

はじめに

今回はGoogleやTwitterなどを中心として進められているプロジェクト、Accelerated Mobile Pages（AMP）Projectについて解説していきます。
WebサイトをAMP化することで、表示速度が圧倒的に高速化され、ユーザの体験を高めることができます。
また、現在はトップニュースへの反映などサイト集客についてはメリットが限定されますが、今後はサイト表示のランキングなどにも影響していくのではないかなど噂され、AMP化していくメリットが強くなるものと思われます。

今回はAMPについて解説するのと併せ、実際にAMPに対応していく為のポイントもご紹介していきます。

AMPとは

AMPはモバイル端末において、ウェブページの表示を高速化させる為の技術です。
スマホなどのモバイル端末がWebサイト訪問の主流となった今、サイト表示速度が1秒遅くなるだけでユーザーの満足度は10%以上下がると言われています。

そんななか、GoogleやTwitterが中心となり、モバイル端末のユーザー体験を最適化する為の高速化プロジェクトが立ち上がりました。
それがAccelerated Mobile Pages（AMP）Projectです。

AMPは以下の3つで構成されます。

AMP HTML

AMPを実現するのは、通常のHTMLではなくAMP HTMLと呼ばれる特殊なHTMLを使用します。
例えばhtmlタグについて、通常このようにしているものを
<html lang="ja">
このように変える必要があります。
<html ⚡> （または<html amp>）

また、imgタグは使えず、amp-img を使用します。
更にamp-img ではwidthとheightが必須となります。

他にもformもamp-form、styleもstyle amp-custom とし更にサイズの制限があるなど多くのルールがあります。
詳しくは公式リファレンスをご覧ください。

AMP JS

AMPでは通常のJavaScriptが使えません。
レンダリングパフォーマンスを安定させ、後述のCacheを実現する為にも通常のJavaScriptは使えず、代替のパーツを使う形となります。
例えばサイトのアクセス数を計測するGoogle Analyticsのコードですが、このような形で埋め込むことができます。

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://bagelee.com",
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

詳しくは公式リファレンスをご覧ください。

AMP Cache

AMPによって作られたページを高速化させる為、GoogleやTwitterはレンダリングされるページをキャッシュ化します。
その為、都度Webサーバにアクセスすることがなく、高速化を実現しているのです。
ですが、このキャッシュ化してもらう為には、前述のルールを全てクリアしなければなりません。
そのための検証ツールも後ほどご紹介します。

AMP対応のポイント

特に動的なサイトなどにとって、AMP化は簡単なものではありません。
AMP対応をするにあたって、いくつかポイントをご紹介します。

検証ツールを必ず使う

AMPの対応が正しくできているか、検証ツールを使用することができます。
これはURLの後ろに#development=1 をつけるだけです。
するとGoogle Chromeの検証ツールのConsoleに、Powered by AMP ⚡ HTML と表示されるはずです。
そしてその後にAMP validation successful. とメッセージが出てくれば成功です。正しくAMP化されています。

正しくできていない場合には赤文字でエラーが出ますので、確認するようにしてください。

CSSの容量をとにかく削る！

先述の通り、スタイルは<style amp-custom>で囲むことが必要となります。
また、CSSは最大50KBまでしか記載できません。
そして!important が使えないなど制約も多いです。
この制約を守りながら見かけを整えるのは本当に難しく、特にbootstrapなどの外部ライブラリを使用している場合には一発で50KBを超えてしまうこともあります。

ポイントとしては、CSSはminify（最小化）すること、また不要なスタイルは削除するなどです。

画像の縦横幅を把握しておく

amp-img タグには必ずwidthとheightが必要です。
予めサイズは抑えておくようにしましょう。

POINT!!

AMPはトップニュースへの反映などのメリットもある為、CMSなどのシステムを使用したメディアサイト、またECサイトなどにAMPは多く用いられます。ですが、こういったシステムで意外と厄介なのがシステムで画像を入れる為に横幅、縦幅がわからないというケースがあることです。
その為、システム内で画像サイズを揃える、アップロード時にサイズをDBに保存する、レンダリング時にImageMagick などを使用しwidth、heightを取得しサイズを設定する必要があります。

URLを分けても同一にしても構わない

所謂レスポンシブサイトのように、1つのページでAMP対応と通常のHTML対応を兼ね備えるケースもありますし、ページを分けるケースもあります。
経験上、ページを分けるほうが作りやすいと感じていますが、どちらでもAMP化は可能です。

また、その場合にはcanonical属性を指定する必要があります。
canonical属性とは、優先して見て欲しいページを検索エンジンに伝える為の属性です。

PC版とSP版を分ける場合には、PC版のページにこのように「AMPの場合はこちらのページを見てね」と指定してあげます。
`

そしてAMPページには、通常のHTMLページをこのように指定します。
<link rel="canonical" href="https://bagelee.com/test.html">

当然、1つのページで兼ね備える場合には、canonical属性で自分自身のページを指定する必要があります。
<link rel="canonical" href="https://bagelee.com/test.html">

まとめ

AMP化することで高速化が実現可能であり、また今後もメリットが多く出てくると言われています。
ですが、特にシステムが入るサイトや動的なサイトなどではAMP化が非常に大変です。
いわゆるハマりどころも多くある為、今後細かい使い方も解説していきます。
また、とにかく公式ページをチェックすることで、新しいパーツなどの情報を得ることができるので、ぜひ確認するようにしてみてください。
AMP公式サイト