AMP
今回は Web のモバイルページを高速表示する技術 AMP についてです。fff の記事ページにも導入しており、この記事も AMP を実装しています。
AMP とは
AMP とはAccelerated Mobile Pagesの略称で、Google と Twitter で共同開発されている、モバイルページを高速表示する為のオープンソースプロジェクト及びそのフレームワーク (AMP HTML) です。本来はプロジェクトを指して AMP と呼んでいましたが、現在ではフレームワークを指すことが多くなっています。
モバイルページの中でも AMP はニュース、レシピ、映画、飲食店等の記事コンテンツ、静的ページに適しています。AMP に対応するページは検索結果画面でも AMP マークつきで表示され、検索結果画面からアクセスするとすぐにページが表示され、検索結果画面にもすぐに戻ることが可能です。
また、構造化データをマークアップすることで検索結果画面上の表示もページ上部に表示される、リッチカードになるといった特徴があります。
一方で AMP の実装には制約もあり、動的ページや長時間閲覧するデザインが求められるようなページには向きません。それは AMP が高速表示される仕組みに関係しています。
AMP の高速表示の仕組み
AMP は AMP HTML、AMP JS、Google AMP Cache の3つの要素から構成されており、HTML や JavaScript の仕様とキャッシュの参照により高速表示を行っています。
AMP HTML はページを高速表示する為に制約が設定された HTML です。制約には通常の HTML と異なり AMP では使えないタグや必要となるタグがある、外部リソースでは独自の CSS や JavaScript が使用できない、画像や動画等のサイズを指定するといったものがあります。これによりページ内要素の処理を減らすことで速度低下をなくします。
AMP JS は AMP 専用の JavaScript で、外部リソースをロードする際に使用されます。AMP では独自の JavaScript には制約があり、画像や動画等の外部リソースのロードは全て AMP JS が行います。その際に外部リソースのロードに優先順位をつけ、遅延ロードをすることでロード中でもページの表示が可能にしています。
また、非同期の JavaScript のみを利用することでページ内の要素が DOM 構築をブロックしレンダリング速度が低下することを防ぎます。
Google AMP Cahce はキャッシュを利用した高速表示の仕組みです。AMP 対応ページはクローラー巡回時に Google と Twitter にキャッシュとして保存され、Google や Twitter のキャッシュからコンテンツが返されるようになります。その為、本来の AMP 対応ページへアクセスし読み込まなくとも Google のサーバーを参照するだけでページが表示されるようになり、表示が高速化されます。
なお、この記事のキャッシュページは下記のリンクからアクセスできます。
AMP | fff
AMPはモバイルページを高速表示する技術です。AMPの特徴や高速表示の仕組み、AMPを実装する方法やルールを紹介します。
これらの3つの要素で構成されることで AMP は静的ページを高速表示させることができます。
AMP の実装方法
AMP は HTML コードを AMP のルールに沿った記述で書くことで実装できます。具体的には AMP 実装に必須のタグ、AMP 専用のタグ、AMP で使用できないタグがあります。このルールを守ることで既存のページであっても AMP を実装することが可能となります。
AMP HTML ではコードを下記のように書きます。これは AMP 実装で必須のタグや AMP 専用のタグの例で、順番にポイントを説明します。
<!DOCTYPE html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="canonical" href="https://fff-create.com/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
p {
color:#f00;
}
<style>
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<p>サンプルページ</p>
<amp-img src="sample.png" height="100px" width="100px"></amp-img>
</body>
<html>まず AMP は HTML5 で DOCTYPE 宣言を行います。そしてAMP 対応ページである宣言をhtml要素の中で行います。絵文字の⚡もしくはampどちらかを書き、絵文字を使える点が特徴的です。
<!DOCTYPE html>
<html ⚡> <!-- 絵文字で宣言する場合 -->
<html amp> <!-- ampで宣言する場合 -->head要素とbody要素も必須となっています。
<head>～</head>
<body>～</body>meta要素の文字コード、viewport の設定も必須です。AMP は UTF-8 のみに対応している為、文字コードは utf-8 を設定します。また、文字コードの設定は head 要素内の最初に行います。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1">canonical の設定も必須となっています。canonical とは URL の正規化で、複数の重複・類似コンテンツが存在する場合にオリジナルを示し正規の URL を指定することです。例えば下記の URL は全て同じページを表すものですが、クローラーはそれぞれの別のページと認識します。その結果、重複コンテンツと見なされ SEO の評価が分散し検索順位が下がってしまいます。
- http://www.example.com
- http://www.example.com/index.html
- http://example.com
- http://example.com/index.html
AMP の場合は AMP に対応していないオリジナルページの URL を設定します。これは AMP の制約が多く AMP 対応ページとオリジナルページの両立が考えられるからです。もし AMP 対応ページしか存在しない場合も canonical に AMP 対応ページの URL を設定しタグを記述します。
<link rel="canonical" href="オリジナルページURL">AMP では外部 CSS は読み込めずstyle要素の中に CSS を記述するとエラーになってしまいますがamp-customを書くことで CSS が記述できるようになります。
<style amp-custom>
CSS
</style>また、AMP が使用する CSS、AMP Boilerplate Code も記述します。
<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 では JavaScript の利用にも制限がある為、AMP 用の JavaScript を読み込みます。
<script async src="https://cdn.ampproject.org/v0.js"></script>上記までが AMP 実装にあたり必須となるタグです。
AMP でimg要素を使う場合、AMP 専用のamp-img要素を使います。amp-img 要素は img 要素と異なりheight属性とwidth属性が必須となり、閉じタグも書く必要があるので気を付けなければなりません。img 要素以外にも外部リソースに関する要素は AMP 専用の要素を使います。
<amp-img src="sample.png" height="100px" width="100px"></amp-img>AMP 対応ページの元となるオリジナルページが存在する場合、canonical に関連してオリジナルページにも AMP 対応のページが存在する旨を記述する必要があります。
<link rel="amphtml" href="AMP 対応ページ URL">これらが AMP を実装するにあたり必要最低限のルールです。
ここで紹介した以外にも AMP の実装にはタグをはじめ様々なルールがあります。ただ一つ一つのルールは難しいものではないのでしっかり対応することで AMP を導入することが可能です。