最近急にその名前を聞くようになったAMP(Accelerated Mobile Pages)ですがAMPってそもそもなんなの?やった方がいいの?っていうので調査してみることにしました。
そもそもAMPってなに?
Googleが2015年に発表したモバイル向けすまりスマホ向けに高速でWebサイトを表示される規格、記述する仕様のことです。
当然Googleが発表したのでGoogleはAMPを推奨しています。
ただ、今までもブログやニュースサイトなどあまりデザインに関連しないコンテンツでしかAMPを見ることがありませんでした。
それはAMPが使用できるHTMLを制限するとともに、Javascriptによる動的な表示を制限させることで表示を高速化させる仕様だったため、現在Javascriptがメインになった現在のWebサイトにおいて導入するデメリットの方が大きかったからです。
ところが2018年春に行われたアップデートで今まではできなかったことができるようになり、だいぶハードルが下がったように思われます。
AMPってどうやって実装するの?
簡単に言うと<html amp>というフォーマットでHTMLを用意する必要があります。
そしてschema.orgで構造化マークアップをする必要があります。
こうかくとなんかむずかしそうに見えますが、JSON-LDで記述することでマークアップには対応できるのでそれほど難しくはありません。
またWordpressには専用のPluginも出ているため、Wordpressを使っている場合は投稿についてはそれほど難しくなく実装できます。
AMPを導入すると表示速度がなんであがるの?
AMPを導入することでWebサイトの表示速度が上がる理由は大きくわけて2つです。
-
Webサイトをその都度読み込むわけではないから
AMPで構築されたサイトはGoogleにデータが保存されCDNとしてキャッシュデータが読み込まれるため、サーバーの負担が減るためです。
-
Webサイト自体が軽量化されている
AMPのルールに従ってサイトを作ると必然的にデータ量が小さくなります。
それはCSSをインラインで書かなければいけなかったり、そのデータ量にも制限があったりなどAMP構築のルールをクリアするために作ると必然的にデータ量が小さくなるからです