Webサイトのパフォーマンス向上！Google I/0 2017でAMPが盛り上がりを見せたので実装方法について簡単に調べてみました

f:id:sitk:20170527114147p:plain

先日の、Google I/0 2017ご覧になられましたでしょうか。中でも、AMPがこれから盛り上がりを見せそうなので、少し調べてみました。実装するには少し手間がかかりそうですが、導入する価値はありそうです。Webサイトのパフォーマンス向上は、ビジネスにも良い影響を与えることでしょう。

AMPとは
AMP導入のメリット
AMPの実装方法について
UI Components
AMP Start
関連記事
事例紹介
まとめ

AMPとは

www.ampproject.org

AMPとは、Accelerated Mobile Pagesの略称です。「アンプ」と読むのが一般的のようです。モバイル端末でウェブページを高速表示するためのフレームワーク（AMP HTML）のことを指します。ちなみに、GoogleとTwitterが共同開発！信頼性は高いですね。

先日の、Google I/0 2017で、楽天レシピなどの事例が取り上げられ盛り上がりを見せませした。AMP関連のプレゼンテーションの映像が見れますので、どうぞ。

AMP導入のメリット

AMP導入のメリットとしては、下記が2点挙げられます。

ページの表示速度が上がる
データ通信量を抑えることができる

特に、ニュースサイトや、メディアサイト、最近ではECサイトにも導入が進められているそうです。AMP対応するには、いくつか表現の制限事項（JSが決められたものしか使えないなど）もありますが、それを差し引いても導入する価値はありますね。（Content is KING!!）

先日の、名古屋マークアップ勉強会 The Final にて、サイバーエージェントの佐藤歩さん（@ahomu）が基調講演で、パフォーマンスについてのお話がありました。

speakerdeck.com

この中で言及されてたのが、ページの表示遅延による、大手検索エンジンと広告収益の関係性を示す内容でした。

0.5秒遅れると1.2%の減益

1.0秒遅れると2.8%の減益

2.0秒遅れると4.3%の減益

となるそうです。

参考：The User and Business Impact of Server Delays, Additional Bytes, and HTTP Chunking in Web Search

大手で1.2%減益となると、かなり大きな額になりそうです。2秒の遅延で4.3%の減益。致命的ですね。。。お金に換算すると、その痛みが理解できます。。。

日本で生活していると、通信環境も良いですし、端末のスペックも良いので、個人的には、通信速度や、通信量を気にすることがありません。がしかし。そんなハイスペックな環境の中で生活しているのは、我々業界人だけなのでは、、、と思うこともあります。

イマドキの女子中高生は、TwitterやLINE、Instagramを使いまくってる（姪っ子がそうなんですが）。そして、月末には、容量制限で引っかかりイライラしている。挙句の果てには親と喧嘩してスマホを取り上げられる。そんな日常があるわけです。そんな女子中校生のためにも！ページの高速化は必要なんですね！

と、極端な例を出してしまいましたが、理由はどうあれ、素早く表示される方が、ユーザーにとってもビジネスしている側にも良いに決まってます。そんな理由があり、制作者としても、パフォーマンス改善をしていく必要があると切に感じています。

パフォーマンスは、アクセシビリティにも繋がります。これまた、サイバーエージェントの佐藤歩さん（@ahomu）の講演の中にでてきたのですが、

“使えない”はユーザー体験としてサーバー障害と同じくらい深刻な問題

とのことす。

「プロダクトとして使いものになる品質」が、望まれるわけです。なので、目先のUXよりも、きちんと使えるという「体験」が重要と述べられてました。そういう意味で、、、パフォーマンスとアクセシビリティは重要という理解をしております。（AMP対応はその一環）

AMPの実装方法について

AMPの実装方法について見ていきましょう。

シンプルなベースコード（公式サイトより）

下記ソースコードを元に、作り込んでいくのが効率良いですね。

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

適用のポイント

<html>にamp or ⚡を記載
文字コードはUTF-8
canonical必要（通常版側には、amphtmlが必要）
viewport必要 - <style amp-boilerplate>必要、中身は触らない - <script async src="https://cdn.ampproject.org/v0.js"></script>必要
カスタム属性で表現する