AMP ウェブコンポーネントフレームワークの紹介
今回は、AMP（Accelerated Mobile Pages）ウェブ・コンポーネントを紹介します。AMPコンポーネントは、ウェブサイトのパフォーマンスとユーザー体験を高速化することができます。利用前の簡単なセットアップの情報とあわせて参考になさってください。
はじめに
AMPとは、Googleが開発したオープンソースのHTMLフレームワークで、特にモバイル端末でのウェブページの読み込みを高速化することを目的としています。AMPコンポーネントは、標準的なHTML要素を置き換えたり、速度とパフォーマンスのために最適化された新機能を導入することが可能です。「amp-」を先頭に持つカスタム要素で、遅延ロード、非同期レンダリング、リソースの優先順位付けなど、ウェブパフォーマンスのベストプラクティスに基づいて構築されています。
特徴について
スピード
AMPページは、あらゆるデバイスとプラットフォームで、ほぼ瞬時に読み込まれます。
ビルドは簡単
特にWordPressやDrupalのような一般的なCMSを使用している場合は、AMPコンポーネントを使用して簡単にウェブサイトを作成または変換することができます。
柔軟性の維持
AMPコンポーネントには、デフォルトでスタイルが付属していません。CSSでコンポーネントをカスタマイズすることができます。
パフォーマンスの確保
AMPのコンポーネントは、最高のパフォーマンスを発揮するようにすでに最適化されています。
オープンソース
AMPはオープンソースのプロジェクトです。誰もがソースコードを参照し、貢献することができます。
AMPの仕組み
すべてのAMP JavaScriptを非同期に実行する
AMPはJavaScriptを用いてページの変更を行いますが、レンダリングの遅延を防ぐために非同期JavaScriptのみ許可されています。AMPコンポーネントのJavaScriptはパフォーマンスに影響を与えないよう設計されています。
すべてのリソースを静的にサイズ設定する
画像、広告、iframeなどの外部リソースは、HTMLにサイズを記述し、AMPが事前にレイアウトを決定できるようにします。これにより、外部リソースを待たずにページを読み込めます。
拡張メカニズムがレンダリングをブロックしないようにする
AMPは、ライトボックス、インスタグラムの埋め込み、ツイート、…ブロックのページレンダリングを妨げる拡張機能を許可していません。
すべてのサードパーティJavaScriptをクリティカルパスから除外する
サードパーティのJavaScriptはサンドボックス化されたiframe内でのみ許可され、メインページの実行を妨げない設計になっています。
すべてのCSSはインラインで、サイズバインドされていなければならない。
外部CSSはレンダリングをブロックするため、AMPではインライン・スタイルのみ許可します。最大サイズは50KBです。
GPUアクセラレーションによるアニメーションの実行のみ
AMPでは、transformとopacityのアニメーションのみ許可され、GPUによる高速処理が可能です。ページレイアウトの変更は不要になります。
リソース負荷の優先順位付け
AMPはリソースのダウンロードを制御を行い必要なものだけをロードし、画像や広告は、ユーザーが見る可能性がある場合のみダウンロードされます。
インストールと使用方法
インストールは簡単です。AMPスクリプトとCSSをインクルードし、「amp 」プロパティを追加するだけです。
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<title>AMPの紹介</title>
<link rel="canonical" href="http://localhost/amp-introduction.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">AMPヘッダ</h1>
</body>
</html>これで、 AMPコンポーネント を選択して使用できるようになりました。いくつかのコンポーネントは、実行するためにスクリプトを必要とするので、スクリプトを含めるようにしてください。例えば、amp-youtubeを使ってyoutubeの動画を埋め込んでみます。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<amp-youtube data-videoid="uCWRzmziXZo" layout="responsive" width="480" height="270"></amp-youtube>CSSをカスタマイズするには、スタイルタグを作成し、そこにカスタムスタイルを配置する必要があります。1つのAMPページで使用できるampスタイルタグは1つだけです。
<style amp-custom>
amp-youtube {
margin: 0 16px;
}
</style>以下はその結果である。
まとめ
AMPはオープンソースのHTMLフレームワークで、ページの読み込み速度を即座に向上させ、ページのパフォーマンスを最大化することができます。フレームワークはGoogleの開発者によるベストプラクティスで構築されているため、試してみるときっとそのパフォーマンスに驚くことでしょう。是非参考になさってください。
Reference:
Accelerated Mobile Pages wiki
AMP dev
参考ビデオ
この情報は役に立ちましたか？
関連記事
カテゴリー：
