AMP JSで画像遅延してみました。

このあいだお仕事で表示速度をあげたいって話がでてきたのでいろいろ調べていたのですが、その際、AMP化の話がでたので気になって調べてみました。さくっと試してみたかったのでAMP JSで画像遅延をやってみたのでそのメモです。

htmlをAMP化する方法ではなくて、AMPって？、AMP JSを使ってみる、辺りについて書いています。

AMP（Accelerated Mobile Pages）とは？

Googleが中心となって立ち上げた、モバイルデバイスでのWebブラウジングを高速化することを目的としたオープンソースプロジェクト
AMPで策定された仕様に沿ってモバイルページを構築すれば、通常の約4倍の速さでページが表示され、データ量が約1/10になると言われている
3,100 万のドメインが AMP ドキュメントを発行
検索結果の上位表示がされる可能性が高くなる

AMPは使用できるHTMLを制限するとともに、JavaScriptによる動的な表示を制限することで表示を高速化する技術で、次の3つの要素から構成される。

表示の高速化のためにHTMLに制約を加えた「AMP HTML」
高速にコンテンツのロードを行うためのJavaScriptコード「AMP JS」
コンテンツのキャッシュ配信を行う「Google AMP Cache」

AMP HTML

安定したパフォーマンスを実現するための制限が設定された HTML

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
　　<h1>Welcome to the mobile web</h1>
　　<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
  </body>
</html>

AMP HTML ページ内の大半のタグは通常の HTML タグですが、一部の HTML タグは AMP 固有のタグに置き換えられる。

ex) amp-img、amp-video

AMP ページは、検索エンジンや他のプラットフォームで <link rel=""> HTML タグにより検出される。サイトのページについて非 AMP バージョンと AMP バージョンの両方を作成するか、AMP バージョンのみを作成するかを選ぶことができる。

AMP JS

AMP JS ライブラリは、AMP HTML ページの高速なレンダリングを確実に行えるようにするもの

head タグの最後に記述

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

AMP JS ライブラリでは、AMP の最適なパフォーマンスを実現するための方策をすべて実施し、リソースの読み込みを管理して、上記のカスタムタグを提供することにより、サイトのページの高速レンダリングを確実に行えるようにしている。

AMP Cache

Google AMP Cache は、キャッシュされた AMP HTML ページの配信に利用できる。

AMP HTML ページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に改善する。

Google AMP Cache を使用すると、効率を最大限に高められるように、ドキュメント、すべての JS ファイル、あらゆる画像が、HTTP 2.0 を使用する同一の生成元から読み込まれる。

AMPの仕組み

Googleにインデックスされると、GoogleはそのAMPページをキャッシュする
Googleの検索結果などからAMPページにアクセスすると、すでにGoogleによってキャッシュされたWebページのデータが返される仕組みになっているので、通常のWebページよりも高速に表示できる

AMP JSを使ってみる

通常のHTMLファイルをAMPページにするには時間がかかっちゃうのでAMP JSだけ使ってを表示速度を高速化を試してみました。

（AMPでは表示速度を高速化するためにAMP JSというJavaScriptのライブラリーを読み込み、表示速度の改善を行っている。）

AMP JSは非AMPページでも利用できます。

1. AMP JSをhead内に非同期で読み込む

以下の記述を</head>の直前に記述します。

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

2. img要素をamp-img要素に置き換える

img

<img src="img.jpg" alt="" />

amp-img

<amp-img src="img.jpg" width="400" height="300" layout="responsive" alt="" />

width属性とheight属性は必須で指定する必要があります。 layout属性で要素を画面上でどのように表示するか指定します。

www.ampproject.org

これだけで遅延ロードができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>amp-img</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<main>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
</main>
</body>
</html>

今までjquery.lazyload.jsなどで遅延ロードを実装していましたが、AMP JSで遅延ロードを実装してみるのもいいかもです。

（デメリットなどはまだ調べられていないですが、、、）

AMPを調べていてPWAと比較している記事を目にしました。

なんとなく、AMPはニュースサイトのような記事コンテンツが多いページに向いてるのかなあって感じています。

PWAはまだよく分かっていないので時間があるとき調べたい...です。

参考