BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

AMP HTMLによるモバイルWebのスピードアップ

| 作者: Abel Avram フォローする 12 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2015年11月9日. 推定読書時間: 4 分 |

原文(投稿日:2015/10/09)へのリンク

Googleは,Web上のモバイルエクスペリエンス向上を目的とした制限付きHTMLの仕様を,オープンソースとして公開した。

AMP(Accelerated Mobile Pages)はGoogleが提唱し,その後すぐに約30のコンテンツ提供者によって支持された,モバイルデバイス上でのWebページの読み込みを高速化ないし瞬時に可能にするプロジェクトである。ユーザには,よりシームレスになったWebエクスペリエンスという恩恵があり,コンテンツ提供者には,直帰率(bounce rate)低下による広告表示のもたらす収入増が期待できる。最近の調査によると,ロードに10秒以上を要するページの場合,その直帰率は58%に達するという。

AMPは,制限されたHTMLとキャッシュを利用して,モバイルの静的コンテンツのパフォーマンスを改善することを目的としたものだ。新たなWeb言語や技術は導入せず,現在すでに存在するものをベースとしたフレームワークである。コンテンツ提供者としては,いくつか制限はあるものの,これまでどおり自由にコンテントの作成し,公開することができる。また,ページの読み込みを高速化するため,世界規模のキャッシュにコンテンツをキープすることが奨励されている。AMPの使用に関心のあるコンテンツ提供者に対しては,Googleが,無料でキャッシュサービスを提供する予定である。

AMPページは制限付きのHTMLタグセットを使用する。そのため,既存のブラウザを変更する必要なく,AMPのページのレンダリングが可能だ。AMPを提供するサーバは,これらのページを他のHTMLページと同等に扱ってもよいし,あるいは画像のサイズをビューポートのサイズに合わせたり,特定のイメージやCSSのインライン化,HTMLおよびCSSの縮小,外部コンポーネントのプリロードなどを行って,さらに最適化することもできる。

パフォーマンス上の理由から,いくつかのHTMLタグが禁止されている。applet, base, embed, form, frame, frameset, object, paramなどは使用できない。button以外の入力エレメントは禁止される。scriptは,application/ld+jsonタイプ,およびAMDランタイムのロードに必須のもの以外は禁止されると同時に,ヘッダおよびページの最終エレメントでなければならない。audio, img, videoはそれぞれ,独自エレメントであるamp-audio, amp-img, amp-videoで代替する。iframeも,機能的に制限のあるamp-frameで置き換えられる。その他,amp-anim, amp-ad, amp-pixel, amp-twitterなど,いくつかのカスタムエレメントがデザインされている。これらのエレメントはすべて,プリロードやレンダリングなどに一定のルールを設けることで,ページのパフォーマンスを最大化するために考えられたものだ。

AMPスクリプトを除き,コンテンツ作成者によるページ内のJavaScriptは許可されない。AMPスクリプトはJavaScriptで記述されていて,AMP特有のエレメントの実装であるAMPランタイムのロード,リソースローディングの優先順位付けと実行,開発中のページの検証などを行う。AMPランタイムは,リソースロードの実行可否とタイミングを決定する。

広告や分析などを目的としたサードパーティ製コンテンツ(JSを含む)は,対応するAMPエレメント – amp-ad, amp-pixel – を使ってAMPページに含めることができる。実行はiframeサンドボックス内に制限されている。分析(analytics)にはtracking pixelsが使用される。

AMPコンポーネントには,仕様に従った形式でJavaScriptを含めることができる。このコードはメインページのコンテキストで実行されるが,優先度は低い。InstagramやTwitter, YouTubeといった特定のサービスが,この種のコンポーネントを使用する。 CSSの利用は推奨されているが,一定のガイドラインに従う必要がある。

AMPを開発したチームによると,AMPで最適化されたいくつかのWebページを対象にSpeed Indexを使用したパフォーマンス計測を行った結果,15~85%の性能向上が確認されたという。また,AMPページの高速性を示す目的で,Google検索のデモが用意されている。以下のリンクからデモを実行するためには,モバイルデバイスからのアクセスが必要だ: http://g.co/ampdemo。但しAMPの仕様自体は最終決定されていない。

プロジェクトには,BBCやFinancial Times, The Economist, The Huffington Post, The New York Times, The Washington Postなど,AMPを利用する意思を持った多くのコンテンツ提供者が賛同している。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション
BT