注意今すぐAMPを実装したいという方は違う記事を探しましょう。
AMPとは
AMP(Accelerated Mobile Pages)とはGoogleが推奨しているコンテンツを高速に表示させるための手法であり、GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
公式ドキュメント(一部日本語訳)
AMPの仕組み
通常、ウェブページにアクセスする場合、サイトのあるサーバーにリクエストし、ファイルを受け取り、それをレンダリングして、ページを表示するという段階を踏むことになります。
AMPではウェブページの情報をあらかじめGoogleやTwitter側でキャッシュとして保存しておき、検索などのリンクをクリックした際には、その情報を直接クライアントに受け渡すことで、ステップを大幅に削減しています。
AMPの構成
AMPを構成する主要素としては、以下の４つがあります。
- HTML5（AMP HTML）
- CSS 3（Custom Styling）
- JavaScript (AMP JS)
- グローバル プロキシ キャッシュ (AMP Cache)
このAMP HTMLというフレームワークはオープンソースとして公開されており、あらかじめその仕様に沿ってモバイルサイトを作成することで、Googleの検索結果やTwitterからリンクを開く際の表示速度を高速化することができます。
メリット
-
ページの高速化
検索サイトからAMPページを読み込む平均時間は0.5秒以内に短縮されます。
-
エンゲージメントの増加
AMPを導入するとウェブサイトへのトラフィックが10%増加し、ユーザーがページに滞在する時間が2倍になると言われています。
- 収益の増加
ECサイトではコンバージョン率が20%増加し、広告クリック率が上がったサイトが85%にのぼります。
参考ページがかなりみやすくわかりやすかったです
参考サイト
AMPで使える機能たち
一部をざっと説明
amp-analytics
AMP ドキュメントからアナリティクス データを収集します。
amp-autocomplete
検索フォームに入力中のテキストに対しECサイトに登録されている商品名やカテゴリーなどから候補を表示し、フォームに反映する機能
amp-carousel
横軸に沿って複数の類似コンテンツを表示します。
amp-ad
広告を表示するコンテナです。(これ使うと広告出るってやつです)
amp-list
データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。
ざっとこんな大枠はこんな感じでしょうか。
随時わかったことなどあれば追加していきます。
参考
ドキュメント
https://amp.dev/ja/
https://amp.dev/ja/documentation/components/
rabbitさん
https://gomobile.jp/rabbit/#amp-box