こんにちは。

陸号機です。

早速ですがAMPでご存知ですか？

アンプ？楽器とか繋ぐやつ？

ではないんです。

今日はこのAMPについてちょっと調べてみました。

最近、スマホで検索した時にURLの横にちっちゃくカミナリマークが入っているのはご存知でしたか？

そうです。

こういうやつです。

実はこのカミナリマークが入っているサイトの表示速度が爆速なんです。

どれくらい早いかというと。

これが通常の閲覧スピード。

これが AMP HTMLで構築されたページ。

爆速！！！

(※画像がボケいてすみません・・・。)
しかし！画像がボケているとはいえ、この爆速はお分かりいただけるでしょう！
画像がボケているのにも関わらずスピードを体験できるんですよ。

このAMPは(Accelerated Mobile Pages)

といってモバイルウェブ環境をより使いやすくし、モバイルコンテンツ配信エコシステムを強化する取り組みだとか。

AMPは2015年にモバイルユーザーの体験向上を目指して、

あの、Google社とTwitter社が共同でプロジェクトを立ち上げたようです。

すごいですね。

実はこのAMP最近ではニュースサイトや様々なメディアサイトでも少しずつ使われるようになっています。

ということで、Google検索した時にこのカミナリマークを探してみてください。
意外とあるかもしれません。

さて、なんでこのAMPが高速で表示されるのか・・・。

調べたところ、AMPは

AMP HTML
AMP JS
AMP CACHE

の要素から構成されているとか。

また、AMPは従来のJSやCSSを使ったサイトよりはタグや記述内容に、色々と制限があるみたいです。

また、広告タグは一部しか利用できません。

サイト構築の初心者には少し難しいかもしれませんね。

デザインの自由度もまだまだ低い・・・。という現実・・・。

「あ！そういえばGoogleが表示速度が遅すぎるサイトをクロールしないとか？

なんかそんな話があったような・・。」

「もしかして表示スピードってSEOに関係ある？順位が下がる？」

と思われそうですが、ご安心ください。

AMPに対応していないからといって、検索順位が下がることはありません。

ですが、モバイル化。

つまりサイトがモバイルに最適化されていないと順位が落ちてしまう危険性があるので、注意が必要です。

さて、賛否両論がありますが、AMPの記述方法についてちょっとだけご紹介します。

HTMLの宣言。

<!doctype html>
<html amp lang="ja">

と ampが付いていますね。

上記のような記述ではなく、

<html ⚡>

でもOK！絵文字でいけちゃうんです！

(何かよくわからないですが、ユニークですね・・w)

そのほかにも、

<meta charset="utf-8">を<head>の開始タグ直後に配置する
<head>タグ内に<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">を追加

・<video> → <amp-video>へ変更

・<iframe> → <amp-iframe>へ変更

・javascript → 使用不可

・css →link relで読み込み不可。

・head内に<style amp-custom>を記述してその中に記述

とか、色々制限があります。

もっと詳しく知りたい方は、

AMP 公式サイト

こちらからチェック！

いかがでしたか？

ウェブサイトを爆速で表示させることのできるAMP。

現在、ECサイトでAMPが適用されているのは見たことがありませんが、

近い将来AMPを採用したECサイトが現れるかもしれません。

ある調査では、ページの読み込みに 3 秒以上かかると、
40％のユーザーがそれ以上の閲覧をやめてしまうことがわかっています。

表示速度が上がり、ユーザーのストレスや表示速度の遅延によって、

購買意欲を低下させることなく画面を表示させることができるようになるかもしれませんね。

よくわかんねぇ！って方はまずカミナリを探すとこから始めてみてはいかがでしょうか？

では！