JavaScript勉強会

JavaScriptの学習日記

AMPでWebページの表示を高速化

Webページの表示を高速化する手段として「AMP」という仕組みがあります。

 

f:id:jsstudy:20190217183302p:plain

 

Accelerated Mobile Pages (AMP) とは?

Accelerated Mobile Pages - Wikipedia

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。

また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。

AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。

 

構成

AMPは、大きく分けて、AMP HTML、AMP JSそしてAMP Cacheの3つの部分からなる。

 

AMP HTMLは、ウェブページを記述するためのマークアップ言語であり、通常のウェブページで用いられるHTMLの亜種である。AMP HTMLでは画像などの表示にHTMLと異なる専用のタグを用いることになっているほか、HTMLの一部の機能は使用が制限されている。

 

AMP JSは、AMP HTMLを正しく高速に表示するためのライブラリであり、JavaScriptによって記述されている。AMP JSはまた、AMP HTML専用の機能と、一般のHTMLにのみ対応したブラウザとの橋渡しの役割をも担っている。AMP HTMLでは、このライブラリを呼び出して利用することになる。

 

AMP Cacheは、AMPページをキャッシュし配信するCDNであり、AMP対応のウェブページにさらなるパフォーマンスの改善をもたらす。閲覧者は、検索エンジンからAMP対応のウェブページを閲覧する際に、最適化が施されたキャッシュへアクセスすることになる。AMP Cacheは、Google AMP CacheとしてGoogleにより運用されている。

 

スクリプティング

AMPでは、ユーザーが作成したJavaScriptや、jQueryやAngularJSのような一般のJavaScriptライブラリは、原則として使用することができない。

インタラクティブなウェブページを作成するために、代替としてAMP HTMLのカスタム要素を使用することができる。

 

www.ampproject.org

 

AMP プロジェクトは、誰にとっても利用しやすいウェブを実現することを目的としたオープンソースの取り組みです。

AMP を導入すれば、端末や配信プラットフォームの種類を問わず、いつでも高速で美しく、パフォーマンスに優れたウェブサイトや広告を作成できるようになります。

 

AMPページの作り方

AMPの作り方を説明したドキュメントがありました。

www.ampproject.org

 

参考

did2memo.net

 

digitalidentity.co.jp

 

動的なWebページだとAMPではちょっと都合が悪いときもありそうですが、静的なWebページならAMPで作れそうですね。

 

AMPを使えばGoogleCDNにWebページがキャッシュされるので、表示が高速になります。

CDNが無料で使えると考えれば、静的なWebページには、AMPを採用しても良いかもしれませんね!

 

 

 

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)