スマホページ爆速化-AMPを覚えとこう！ その1 〜概要編〜

スマホの普及及びスマホサイトの一般化・重要度が増してきた数年前から話題になってきたAMP。

よく聞くワードではありますが、実際当たり前のようにAMP対応が発生するかと言われればそうでもなく、普及はしたが必須かどうかは微妙なところです。

ですが、今後盛り上がって行く可能性もゼロではなく仕様だけでも覚えておくに越したことはありません。

今回そもそもAMPとはなんぞや？という部分からざっくり概要を説明したいと思います。

AMPとは、Accelerated Mobile Pagesの略でアンプと読みます。

GoogleやTwitterなどが共同で開発しているモバイル端末でホームページを高速表示するためのプロジェクト、またはAMP HTMLの仕組みのことです。

その名の通りモバイルユーザーの体験向上を目的として、とにかくWEBページの表示速度を高速化するための仕組みになります。

Google検索では2016年2月よりAMP対応されたウェブページが検索結果画面に表示されるようになったことでより普及し、「これからはAMP対応が必須だ！」と一瞬盛り上がったものです。

要するにAMP HTMLで作成されたWEBサイト（スマホサイト）はものすごく速くサクサクと表示されますよ！という感じです。

実際のところ、AMP対応されたサイトは増えはしたと思いますが、当たり前のように、PCサイト・スマホサイト・AMP対応という流れが全てかというそうではありません。

実際AMP対応というのは2019年1月現在、私は過去数件程度しかお仕事として対応したことはありません。

今後どうなるかはGoogleの力の入れ具合により左右されそうですが、要注目で概要だけでも知っておくべき技術だとは思います。

AMP（アンプ）にすると、サイトがものすごく速くなります。

ほぼページを読み込む時間は感じないくらい速いです。

目的がモバイルページを高速化するためのプロジェクトなので当然ですがありえないくらい速いです。

AMPページは、ほぼHTML5に近いマークアップですがAMP専用のAMP HTMLで記述します。

そして、

・AMP HTML

・AMP JS

・AMP Cache

と、大きく分けて3つの要素で構成されており、この3つの要素が速く表示される要因となります。

まずHTMLはAMP専用のタグで構成されたAMP HTMLで記述をします。

基本的には通常のHTMLと同じですが若干記述方法に違いがあるのと、高速に表示させるために遅くなる要因となるタグは使用できなくなっています。

CSSは記述方法は同じですがこれも使用できないスタイルがあります。

また外部ファイルにして読み込むことができずhead内のstyleタグ内への記述が必要になります（記述が多いとメンテナンス性が悪くなりますね）。

続いてAMP JSというAMPで用意されたJSライブラリの使用のみJSの記述は可能になります。

昨今インタラクティブなコンテンツは当たり前ではありますが、これらはサイトを遅くする要因にもなってます。

AMPでは予め使用可能で用意されたJSライブラリのみを使用することでサイトが速くなるというより遅くなる要因を排除してます。

ちなみに、AMP JSでは通常のサイトで使用したい、スライダー・タブ・アコーディオンなどなど一通り揃ってます。

ただし、ちょっとしたカスタマイズ等の記述もできないため、あくまで用意されたライブラリの仕様の範囲内になります。

もちろんみんな大好きjQueryも使えません！

そしてAMPの高速化の最大の要因がAMP Cacheです。

これは、AMPで記述したコンテンツは予めGoogleなどのサーバーにキャッシュされます。

そして検索結果でAMPでの検索結果一覧が表示されたタイミングでブラウザに返されますので、ページを開く前からすでにAMPで作成されたサイトデータをダウンロードさせることで、

サイトを開いて一からデータをダウンロードすることなくすでにダウンロード済のデータをすばやく表示させます。

速く表示させるためのAMP HTMLでの記述、動作が遅くなる要因を排除したAMP専用JSライブラリのみの使用、サイトを開く前にサイトデータをダウンロードさせるAMP Cacheの仕組み

の3つにより通常のウェブサイトではありえない高速化を実現しています。

AMPにするとサイトが高速表示され、ユーザーは快適でメリットしかなさそうですが、思ったほど普及していない現状から分かる通りデメリットもございます。

代表的なデメリットの要素は以下になります。

AMP（アンプ）はGoogleなどの検索結果に表示され、その検索結果からAMPページを閲覧することができます。

もちろんモバイルサイト高速化のプロジェクトですので、モバイルからの検索結果のみで表示され、モバイルのみで閲覧可能です。

以下にAMPサイトの一覧の表示とAMPサイトの例をご説明します。

今回はAMPのざっくりとした説明をしました。

AMPはAMPの仕様で構築すると、Googleなどのサーバーにキャッシュされ検索結果に表示されたら閲覧しているモバイルにデータがダウンロードされ、

閲覧したら一からダウンロードされるのではなくダウンロード済のデータを表示することで高速に表示できる仕組みです。

次回は実際にAMPで構築する際の技術的な説明をしたいと思います。