- AMPの立ち位置
- 1番はやいのはハードチューニングしたサイト、それができるエンジニアのいる企業
- AMPは2番手の位置
- 遅い良くないサイトを2番手の位置まで押し上げるのが目的
- AMP単体での使い方も今後考えられるので、アメブロでは両方持っておく方針 (Pinterestとかと一緒)
- Pinterestの事例
- 150M+ MAU, 400+ engineers, 1000+ experiments
- Key Metrics
- Sessions (非会員のUU)
- Convrsion Rate (Pin)
- Page load timing (UX)
- In houseの計測システム
- Sessionはサーバサイド
- パフォマンスはクライアントサイドで計測
- A/Bテストはかなりやっている
- AMP化によって、
- Convrsion Rateはとんとん
- Page load timingは50%向上
- 通常ページはReactのSSR
- AMP用にpath追加
- AMP用のラッパーReactコンポーネント作った
- AMPとReactのattributeは違いがあるので別途ホワイトリスト化
- アメブロでは将来的にはtama-webに合体するかもしれないが、しばらくは別プロジェクトとして管理する方針
- ガーディアンの事例
- HTML入力できるエディタなので、invalidになりがち
- amphtml-validatorでテストしてからリリース
- すでにGoogleからのアクセスのうち60%はAMP
- Google検索結果ではAMPページの方が最大2%クリック率が良い
- 回遊のCTRは通常ページと比べて8.6%よい
- CPMはwithin 5% (5%の差？)
- Wego.comの事例
- シンガポールのTravel検索サービス
- 3G回線でテスト
- われわれも3Gテストのがよかったかな... しかし日本回線はやすぎて事情が違うなと感じた次第
- AMPとPWAの併用
- Organic 12%up
- AMPではサイト内のアクションが増え、コンバージョン39%アップ
- CPCとCPAは10 - 19%ダウン
- ROIは14%アップ
- amp-bind
- AMPドキュメント内でstateを持って表示を動的にクライアントで変えられる
- HTML, CSSで宣言的に書けるのでマークアッパー的なひとでもできるかな？
AMP.setState()なので Reactと間違えないように注意しようｗ- 少し慣れが必要そう
- AMPだけでチャットも作れるよ のなかで
- 2017年にbraking changeはない予定
- Claulfare
- Server-side Rendered AMPを開発中
- Browser loads the page
- AMP boilerplate CSS hides the page (SSRで隠さなくする)
- AMP JS Loads (もともとレンダリングはブロックしない)
- AMP inserts the AMP CSS (サーバーサイドでやる)
- AMP bootstraps web components (コレサイズ計算とか大変だけど、できそう)
- AMP shows the page (隠さなくなるのでこのフェーズいらない)
- AMP Viewer (検索結果のやつ)
- ATFをプリレンダ (AMPはレイアウトが決まっているのでできる)
- ひとつ先(N+1)の記事をプリレンダ
- AMP Down & AMP up
- AMP Down - Embed AMP as a data in a PWA
- PWAがnavigation clickをハイジャック
- XHRでAMPをfetch
- 取得できたらShadow Rootにインサート
- AMP up - AMPで本サイトのService Workerをinstall
- これおもしろかった
- AMP Down - Embed AMP as a data in a PWA
- レスポンシブ
- AMPはDesktopでも動くしcss使えるのでレスポンシブにすることもできる
- サンプル 2重のSidebarはなるほどなって感じ
- プラットフォーム対応
- Yahoo! Japanの検索結果にAMP版が出る予定、百度も
- BingはDesktop版の表示も検討している
- Progressive Web AMPs
- AMP単体でもPWAできますよ
ここにもあった。
https://www.smashingmagazine.com/2016/12/progressive-web-amps/