AMPに対応してモバイルページを高速に表示させる

はじめに

先日参加した「HTML5 Conference 2018」では、AMPに関するセッションがいくつかあり注目度の高さが伺えました。そこで今回はAMPの基礎について紹介します。

AMPとは

AMP（アンプ）はAccelerated Mobile Pagesの略で、2015年10月にGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトです。一般的には、モバイルページを高速で表示させるための手法を指します。

なぜAMPでは高速に表示されるのか

AMPがパフォーマンスを改善する仕組みにはいくつかありますが、その一部を紹介します。

非同期スクリプトのみを許可

今、多くのWebページではUXを向上させるために多くのJavaScriptが動作していることがあります。しかし、これによりレンダリングに時間がかかる場合があります。そこでAMPでは非同期のJavaScriptのみ使用を許可しています。

一方でサードパーティのJavaScriptに関してはiframe内で使用可能です。

リソース読み込みに優先度を付ける

AMPでは読み込むリソースの優先順位付けを行っており、その時点で重要なリソースが最初にダウンロードされるように処理を最適化します。そして、遅延読み込みされるリソースはプリフェッチします。

プリレンダリング

通常のWebページでは、クリック等でアクセスを要求してからHTML等が読み込まれるため、ページが表示されるまでにタイムラグがありました。しかしAMPでは、preconnect APIを活用することにより、ページを開く前に事前にページが読み込まれるようになるため、高速に表示することができます。

AMPの3要素

AMPは大きく分けて3つの要素から構成されています。それぞれについて説明します。

AMP HTML

AMP HTMLは安定したパフォーマンスのためにいくつか制限が課されていますが、基本的にはカスタムAMPプロパティがついたHTMLの拡張版です。

AMP HTMLページのほとんどのタグは通常のHTMLのタグと変わりませんが、一部のタグはAMP固有のタグに置き換えられます（amp-imgなど）

AMP JS

AMP JSライブラリは、AMP HTMLページの高速なレンダリングを可能とします。

AMP JSライブラリには、AMPのパフォーマンスに関する設定が実装されており、リソースの読み込み管理やカスタムタグを提供することで、ページの高速なレンダリングを実現します。

AMP Cache

AMP HTMLページを提供する場合は、Google AMP Cacheを利用することができます。

Google AMP Cacheはプロキシベースのコンテンツ配信ネットワークです。AMP HTMLページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に向上させてくれます。

AMPへの対応方法

では、実際にAMPに対応するための方法を紹介します。

AMP HTMLの宣言

下記のように宣言します。ampの部分はカミナリの絵文字で表現することも可能です。

 <!doctype html> <html amp lang="ja"> <!--下記のようにカミナリの絵文字でも可 --> <html ⚡ lang="ja">

<!doctype html>

meta要素の指定

AMPはUTF-8にのみ対応していますので、文字コードにはutf-8を指定します。また、ビューポートの指定も必須で、どちらか一方が欠けてもエラーになります。

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

1 2	<meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

構造化マークアップ

JSON-LDを指定して、下記のようにページの構成をクローラーに伝える必要があります。これを省略するとサーチコンソールでエラーになります。

 <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script>

{

"@context": "http://schema.org",

"@type": "NewsArticle",

"headline": "Open-source framework for publishing content",

"datePublished": "2015-10-07T12:02:41Z",

"image": [

"logo.jpg"

]

}

</script>

boilerplate

AMP JSが読み込まれるまでコンテンツを非表示にするためのCSSボイラープレートです。以下の通り記述します。

 <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>

ライブラリの読み込み

AMP JSライブラリを読み込みます。以下の通り記述します。

 <script async src="https://cdn.ampproject.org/v0.js"></script>

1	<script async src="https://cdn.ampproject.org/v0.js"></script>

カノニカルとアノテーション

AMPではcanonicalタグで元のページとの関連性をクローラーに伝える必要があります。AMPページには下記のように記述します。

 <link rel="canonical" href="$ORIGINAL_URL">

1	<link rel="canonical" href="$ORIGINAL_URL">

続いて、AMP元のページにも下記のように記述します。

 <link rel="amphtml" href="$AMP_URL">

1	<link rel="amphtml" href="$AMP_URL">

サンプルコード

最後にこちらに記載されている基本のテンプレートを紹介します。以下のコードは適宜修正することでAMP対応ページを作ることができます。

 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <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>Welcome to the mobile web</h1> </body> </html>