2020.08.23

SEO対策！？高速表示できる！？AMPのメリットとデメリット

この記事は1341日前に投稿されたものです。

数年前からチラチラ聞くようになったAMP。ざっくり「モバイルで速く表示させるためのものでしょ」くらいの認識でしたが、ちゃんと知ってた方がいいな、ってことでお勉強を兼ねて記事にします。

この記事の目次

ＡＭＰ(Accelerated Mobile Pages)って？

AMPとはGoogleとTwitterが立ち上げたオープンソースプロジェクト（らしい）です。モバイルでの表示を高速にするためのもので、ユーザーのストレス軽減や離脱率を下げる仕組みです。

簡単に言えば、Googleがウェブサイトのデータをキャッシュしてリクエストがあれば直接表示するので、いちいちサーバ上のHTMLや画像などデータを読み込みに行かなくてよくなり表示が速くなるって仕組みです。AMPページは、データ量が約1/10ほどになって約４倍速くなるといわれているそうです。

AMPページは、AMP HTMLで作成します。HTMLを扱えるならマークアップもそんなに問題はないかと思いますが、いくつか制限があります。

いくつか代わりなるものが用意されていますが、Javascriptほど自由度はありません。

インラインでCSSは使用できず、記述する場所も決まってます。CSSの記述も５０KB以下に制限されます。
ウェブフォントの読み込みには対応しています。
ちなみにウェブフォントの読み込みは例外で<link>が使えます。

Googleが推進してるからといって、AMPで構築したから検索順位が上がるわけではないようです。ただGoogleはモバイルサイトをページ評価の基準にしています（モバイルフレンドリー）。なので、モバイルで最適化されていて表示が速くなれば、離脱率も下がるしページ評価も上がります。

これからも当分はモバイルが主流なのは変わらないと思います。現状ではAMPは必須！というわけではないと思いますが、そういう意味でも、ちゃんと知っておいた方がいいかな、と思った次第です。