AMPで加速する

モバイルウェブアプリケーション

2017.09.24 HTML5 conf Room C 14:20-15:00

AMPで加速する

モバイルウェブアプリケーション (仮)

2017.09.24 HTML5 conf Room C 14:20-15:00

タイトルは雰囲気で決めた

  • 「AMPについてってどんな人が聞くのかな・・・」
  • 「そもそももう結構知られてる気がするけど・・・」

とりあえず言いたいことを話すことに決めました

DISCLAIMER

  • 今日は個人として話します
  • AMPはSEOのためのものとは思わないので、SEOの話は一切しません

goo.gl/AktJSs

自己紹介

  • やまぐちよしふみ
  • ymotongpoo
  • Developer Advocate, Google

今日の流れ

  • AMPそのものについて話す
  • Q&A

歴史

  • AMPは日本だけを見ていると動機を理解が難しい
  • 欧州は広告がひどすぎてAd Blockerの導入率が高い
  • メディア業界にも広告業界にも良くない

広告モデルがオープンウェブを支えてきた事実は認めよう

メディア系サイトに必要な要素再考

  • 静的コンテンツが主
  • 収益源は広告

広告の表示が静的なコンテンツの表示を妨げている

document.write()

  • ブラウザの非同期処理を一発で止めてくる
  • レンダリングをブロックする要因

歴史的経緯から仕方がない側面がある

静的ページを素早く表示する欲求

  • メインのコンテンツは素早く表示する
  • 広告もきちんと表示する
  • 表示が遅くなる原因はなるべく排除する

自力でチューニングする事が難しい人向けに簡単な仕組みを提供する必要性

Accerelated Mobile Pages

  • 2015年10月にOSS化
  • 初期段階よりGoogle、Pinterest、Twitterなどで採用

ページの高速化をするには

  • ページを簡潔に
    • JavaScriptを減らす、リクエストを減らす
  • 表示の最適化
    • 並列・遅延読み込み、先読み、レンダリング最適化
  • CDNの利用

AMPの構成要素

  • AMP HTML
    • ページを簡潔に
  • AMP JS
    • 表示の最適化
  • AMP Cache
    • CDN

AMP HTML

  • 「高速化する」というよりも「低速化させない」ことを主目的とした仕様が多い
  • カスタム要素を事前定義し宣言的な記述を強制
  • 機能が必要になったら標準のカスタム要素で提供する
    • 最も普及したWeb Componentsを利用したフレームワークと言っても良い(Custome Elements, Shadow DOM v1)

c.f. Web Componentsについて

16:20-17:00の泉水さんのセッションを見ましょう

AMP HTML

<!doctype html>

<html ⚡>

<head>

<title>Hello, AMPs</title>

<link rel="canonical" href="http://your.com/page1.html" />

<style amp-boilerplate>...</style>

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

</head>

<body>

<h1>Welcome to the mobile web</h1>

<amp-img height="300" width="400" src="hoge.png"></amp-img>

</body>

</html>

AMP HTMLの他の制約

  • 外部CSS禁止、Embed CSS禁止
    • <head>内でのインラインでの対応

AMP JS

  • AMP HTMLを動作させるためのライブラリ
  • これ以外のJavaScriptは一切読み込ませない
  • ユーザー定義のスクリプトが入り込めない

高速化はAMPチームが担保。使用者は読み込んでおくだけで良い。

AMP JS

  • PRPLパターンを自分で実装するの大変じゃないですか
  • ファーストビューを早く表示
    • dns-prefetch, preconnect
    • 遅延読み込み
    • レイアウトの固定

c.f. PRPLパターン

  • Push: 最初のURL ルートに不可欠なリソースをプッシュ
  • Render: 最初のルートをレンダリングする
  • Pre-cache: 残りのルートを事前キャッシュ
  • Lazy-load: オンデマンドで残りのルートを遅延読み込み

AMP JS

Header

Logo

Responsive hero image

Headline

Article text

Image
in article

Some more text

Ad

“Above the Fold”

Prerendered

“Below the Fold”

Not Prerendered

AMP JS (例: amp-adでの広告の表示)

広告は3p.jsで登録される

  • register(‘a9’, a9) // 3p/integrations.js

registrations[id] = draw // 3p/3p.js, in register(id, draw) function

draw3premote.html/frame.htmlというiframe内のHTMLの中で呼ばれる

  • draw3p(win, data, configCallback) // 3p/integrations.js

run(type, win, data) // 3p/3p.js

const fn = registrations[id] // 3p/3p.js, in run(type, win, data) function

fn(win, data)

frame.htmlは次のような関数を通過していく

  • AmpAd.upgradeCallback() // extensions/amp-ad/0.1/amp-ad.js

AmpAd3PImpl.layoutCallback() // extensions/amp-ad/0.1/amp-ad-3p-impl.js

getIframe(parentWindow, parentElement, opt_type, opt_context) // src/3p-frame.js

getBootstrapBaseUrl(parentWindow, opt_strictForUnitTest) // src/3p-frame.js

getDefatulaBootstrapBaseUrl(parentWindow) // src/3p-frame.js

AMP Cache

  • フレームワークでキャッシュの仕組みを提供
  • グローバルに展開するサービスには大きな影響
  • HTTP/2対応なのでアセットが多いページでの影響大

AMP Cache

  • いまはGoogleのものとCloudflareのものがある
  • ここではGoogle AMP Cacheについて話す

AMP Cache(Google Global Cache)

Web server

Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

※これは概念図です

AMP Cache(HTTP/2)

ロードマップ

新しい機能は日々追加されている

  • amp-sidebar
  • amp-carousel
  • amp-list
  • amp-live-list
  • amp-bind

DEMO

  • AMP by Exampleを見てみよう

amp-sidebar

amp-carousel

amp-carousel

amp-lightbox

amp-bind

  • アメーバブログの検索候補表示で対応している
  • amp-bindとamp-listの組み合わせ

「AMPとPWA」に関して

  • そもそも「PWA」の定義ってなんだ
    • Progressive Enhancementをするウェブアプリ
    • マーケティングワードです
  • AMPは決められた技術スタックのフレームワーク
  • したがって共存しうる

AMPとPWAの共存

  • PWAで語られる代表的な技術
    • Service Worker
    • Add to Homescreen (A2HS)
  • これをAMPを使って実現する

amp-install-serviceworker

  • 名前のとおりAMPページからSWをインストールさせる仕組み
  • AMP Cacheからでも小さなiframeを使ってインストールさせる

AMP as PWA

  • AMPページ自体がPWAになっているやつ
  • AMP by Exampleがいい例です

AMP in PWA

  • PWA化したページの中でAMPをコンテンツ単位として埋め込む
  • ShadowDOMを使ってパフォーマンス向上
    • iframeを使うとコンテンツを読み込むたびにJSの解析のフェーズが入る

ShadowReader

まとめ

  • AMPはCustom Element、PRPLパターン、HTTP/2対応のCDNの組み合わせを体現した1フレームワーク
    • 技術的観点からみてもその背景を見ると面白い

  • AMPの考え方を自プロダクトに反映させる価値はある

Q&A

20170923 HTML5 conf - Google Slides