AMPって何？仕組みを知って快適にページを閲覧しよう
スマートフォンの検索結果に、「AMP」という文字や雷マークが表示されているのを見かけたことがありますか?
今回は、AMPとはどのような目的で導入されたものか、また、どのようなものなのかを説明していきます。
AMPとは
AMPとは、Accelerated Mobile Pagesの略でアンプと読みます。モバイルユーザーが快適にホームページを閲覧できるようにすることを目的としてGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、一般的にはモバイル端末でホームページを高速で表示させるための仕組みを指します。
ホームページの表示速度が遅いと、スマートフォンの場合特に、ユーザーが表示を待てない傾向があり、そのままページを離脱してしまうこともあります。AMPを実装すると、モバイル ページの表示速度が約4倍、データ量が約1/10になると言われていて、ユーザーはストレスなくページの閲覧をすることができます。
AMP対応をしているサイト
現在、AMP対応しているのは、ニュースメディアや食べログ等の情報サイトが中心です。時事要素を含む内容をGoogleで検索すると、AMP対応しているページがトップニュースとして画像つきでカルーセル表示されます。
また、Googleの検索結果では、AMP対応ページには雷マークが表示されます。
カルーセル表示
AMPアイコン
AMPの仕組み
通常、Googleなどの検索結果からWebページにアクセスする際、検索結果に表示されたリンクをクリックしてからサーバ上にあるHTMLやCSS、画像ファイルなどを読み込みます。そのため、読み込みが完了するまでに時間がかかります。
一方AMP対応しているWebページは、あらかじめGoogleやTwitterのサーバにキャッシュする（Webページのデータを一時的に保存する）ことで、リンクをクリックしたときに、通常はサーバにデータを読みに行くところをあらかじめ用意しておいたキャッシュを表示させ、読み込み時間を大幅に削減しています。
このようにAMP対応のWebページはキャッシュを表示しているため、オリジナルのURL（本来のURL）と異なるキャッシュ表示用のURLが表示されます。
オリジナルURLの表示の仕方
AMP対応ページからは、「オリジナルのページを見ることができない」「オリジナルのURLがわからず、コピーできない」といった問題点がありましたが、2017年2月にAMP対応ページに新機能が追加され、AMPページのヘッダーバーにオリジナルURLの表示・コピー・共有が行えるボタンが実装されました。
AMP対応ページのヘッダーのボタンをタップするとオリジナルのURLが表示され、URLをタップするとオリジナルのページが表示されます。また、URLを長押しすると選択肢が表示され、新しいタブでの表示、URLのコピー、メールやSNSでの共有もできます。
1. ヘッダーのボタンをタップ
2. オリジナルURLが表示
3. オリジナルURLを長押し
AMPの今後
オリジナルのURLが表示されないことは、コンテンツを提供している側にとってもデメリットが多く、上記の新機能の追加が行われました。今後は、オリジナルのURLのみを表示するようGoogleは取り組みを進めているようです。
また、今のところAMP対応しているのは、ニュースメディアや情報サイトが多いですが、商品を販売するECサイトなどでも対応が進められています。
まとめ
- AMPとはモバイル端末でホームページを高速で表示させるための仕組み
- AMP対応のページは、表示速度が約4倍、データ量が約1/10になるといわれている
- Googleの検索結果では、AMP対応ページには雷マークが表示される
- あらかじめWebページをGoogleやTwitter側でキャッシュさせることで読み込み時間を大幅に削減している
- キャッシュを表示しているURLと本来のオリジナルURLは異なる
アーティス
最新記事 by アーティス (全て見る)
- 【初心者向け】CSSの属性セレクタを活用しよう！種類や指定方法を解説！ - 2019年10月16日
- システムエンジニアが4Kディスプレイを導入して快適な開発環境を作ってみた - 2019年10月3日
- GitForWindowsで社内のGitLabにPushしてみた - 2019年9月30日
- 【初心者向け】CSSだけで矢印をスタイルしてコーディングを効率化しよう - 2019年9月27日
- 迷惑メール対策には複数のメールアドレス（サブアドレス）を使って対処しよう - 2019年8月7日
おすすめ関連記事
最新記事
