AMP”でモバイルページを高速化!ストレスフリーを実現する最新トレンド技術

“AMP”でモバイルページを高速化!
ストレスフリーを実現する最新トレンド技術

ENGINEERING

HTML/HTML5 , Mobile

本記事では、Accelerated Mobile Pages (AMP)とはどういう技術なのか、どんなシーンで利用すべきかなど、モバイルファーストの時代を乗り切る最新技術について説明します。

モバイルページを爆速表示させる“AMP”とは?

Accelerated Mobile Pages (以下AMP)とは、モバイルページの表示を高速化する仕組みです。
一般的にモバイル端末はPCよりもスペックが低く回線速度が遅くなることが多いため、特に公共wifiやインフラ環境の整備が追いついていない国や海外からのアクセスの際はWebページの表示が遅くなりがちです。そのためページ制作時にファイル容量を軽くするなどの工夫が必要になりますが、それでも限界があります。

しかし、AMP用に作成されたページはGoogleのCDNにキャッシュされ、パフォーマンスが改善されます。検索結果からはそのキャッシュにアクセスするため高速に表示されるのです。
また、AMP用に用意されたJSライブラリもパフォーマンス最適化処理がされています。そのためWebページをAMPに対応させることでページを瞬時に表示させることができます。
さらに、特定の要件を満たしたAMPページは表示が速くなるだけではなく、Google検索結果の上部に表示される「トップニュース」というカルーセルの中に画像付きで表示されるようになります。(すべてのページが表示されるとは限りません。)

参考
AMP公式サイト
Googleウェブマスター向け公式ブログ

AMPを導入すべき2大メリット

1. 離脱が減り、UXが向上する。

ページ表示に時間がかかるとユーザーの離脱率が上がるという統計があります。表示が高速になることでユーザーはストレスフリーとなり離脱率が下がり、さらにサイトを高速に回遊できるため結果的にPV数の向上につながるでしょう。

2. 検索結果で目立ちやすくなる。

前述の通り、特定の要件を満たしたAMPページはGoogle検索結果の上部に画像付きで大きく表示されやすくなるので、ページの存在がユーザーの目に触れやすくなります
さらに、AMP対応していれば通常の検索結果部分に稲妻マーク付きで「AMP」と表示されます。一般ユーザーにAMPアイコンが付いているページは表示が速いと認知されるようになれば、ユーザーはこのアイコンの付いているページを優先して訪問するようになるかもしれません。

SEOに関しては、Googleのブログ記事にあるようにランキングには影響しません。ただし、GoogleがAMPを推奨したりモバイルファーストインデックスモバイルファーストインデックス検索エンジンのランキングシステムにおいて、主にモバイルサイトのコンテンツを用いてサイトを評価する手法のこと。
2016年11月にGoogleが正式に導入をアナウンスしたことで話題になった。
の導入を予定したりとモバイルページを優遇する傾向にあるので、将来的にはSEOに有利になる可能性があります。

AMP対応サイトには「稲妻マーク」が表示される。

AMP導入前にこれだけは知っておくべき!

1. デザインに制限あり。

AMPは高速化を実現するために使用できるHTMLタグやJS等が制限されており、動画の埋め込みはできますが、通常のWebページでは表現できるデザインやアニメーションなどが表現できないなどの制約があります。そのため、サイトのトップページやランディングページなどで凝ったデザインにしようとしても、AMPページでは十分な表現ができないため表現の妥協が必要となります。

2. コスト増

通常のWebページとは別にAMP用のページを新たに作る必要があるため、その分追加の費用がかかってしまいます。WordPress等で既にAMP対応プラグインがあるCMSを用いていれば簡単に導入可能ですが、デザインによっては思い通りのレイアウトにならない場合もあります。

また、まだ標準といえるほど普及していない独自のタグを使用するため、制作者によっては調査・学習費用がかかることもあります。

こんなコンテンツにおすすめ!

Googleのブログ記事にあるように、すべてのページをAMP化する必要はありません。
AMPはテキストと写真や動画のみで構成されるシンプルな静的なページに適しています。具体的には、ブログ記事、お知らせページ、製品ページなど、特定の情報を伝える記事・情報発信が主体のページです。

一方、WebサイトのトップページのようにUIに凝りたいページや、Webサービスのようなユーザーに使ってもらう事が主体のサービスには適していません。

AMPプロジェクトは進化を続けていて今後重要になるであろうテクノロジーなので、早めに適応、動向を把握しておくことで業界の流れに乗り遅れず、ユーザーにストレスフリーな環境を提供することができるでしょう。
オロではAMPの動向を見極めながらそれぞれのWebサイトに最適な提案、実装をしていきます。

この記事を書いた社員

Koya Iwasaki

Front-End Engineer

フロントエンドエンジニア。メンテナブルなCSS設計やタスクランナーを使ったコーディング効率化、JSフレームワークを使ったWebアプリ制作を得意とする。