Google AMPとPWAをさらっと紹介

Google AMPとPWA をさらっと 2016/9/13 ウェブチップ社内勉強会 2016/9/16 1

Google AMPとは • Accelerated Mobile Pageの略 • AMP dramatically improves
the performances of mobile site on the web • ホームページ: https://www.ampproject.org/ • 静的コンテンツを⾼速でレンダリング • AMP HTML • 幾つかの専⽤タグ • AMP JS • 唯⼀使⽤可能なJavaScriptライブラリ。 • JQueryは使⽤できない（使⽤する⽅法がないこともない） • Google AMP Cache • Google社が提供するCDN • HTTP 2.0を使⽤ 2016/9/16 2

広義の意味では（個⼈的な解釈） • Webページを⾼速に表⽰するためのベストプラクティスを集めたもの • ベストプラクティス: • https://www.ampproject.org/ja/docs/get_started/technical_overview.html • ⾮同期スクリプトのみ使⽤を許可する •
すべてのリソースサイズを静的に決定する • 拡張機能によるレンダリングブロックを回避する • サードパーティの JavaScript をすべてクリティカルパスから外す • CSS はすべてインラインスタイルにしてサイズを固定する • フォントのトリガーを効率化する • できるだけスタイルを再計算しない • GPU アクセラレーションが有効なアニメーションのみ実⾏する • リソースの読み込みに優先順位をつける • ページを瞬時に読み込む • AMP の⾼速化に貢献する 2016/9/16 3

Google AMPの意図（のようなもの） • User Experience（ユーザー体験）よりも、 • Monetization（収益化） and User acquisition（ユーザー獲得）
• Content is King で UX is Queen • Fast Content → Faster Reading → More Consumption 2016/9/16 4

2016/9/16 5 AMP HTML <!doctype html> <html ⚡ 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"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s... <style amp-custom> /* any custom style goes here */ body { background-color: white; } amp-img { background-color: gray; border: 1px solid black; } </style> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img> <h1>Welcome to the mobile web</h1> </body> </html> ⬅なんと絵⽂字 ⬅CSS Initに似たboilerplate ⬅独⾃のスタイルはHTML内にインラインで書く ⬅画像専⽤タグ

検証 • Chrome DevToolを開き、URLの末尾に” #development=1”をつける 2016/9/16 6

2016/9/16 7 デモ

性能 ैདྷ ".1 1回⽬ 2770 ms ‒ DOM: 642 ms,
Load 2240 ms 736 ms ‒ DOM: 255 ms, Load 677 ms 2回⽬ 2820 ms ‒ DOM: 629 ms, Load 2310 ms 666 ms ‒ DOM: 249 ms, Load 623 ms 3回⽬ 2580 ms ‒ DOM: 609 ms, Load 2090 ms 730 ms ‒ DOM: 265 ms, Load 706 ms 平均 2723 ms ‒ DOM: 627 ms, Load 2213 ms 711 ms ‒ DOM: 256 ms, Load 669 ms 2016/9/16 8

Google検索 2016/9/16 9

Google検索結果 2016/9/16 10 検索結果カルーセル

Googleカルーセルへの表⽰ • schema.orgの仕様に則ってjson+ldをページに埋め込む • https://www.suzukikenichi.com/blog/schema-org-for-top-stories-with- amp/ • https://developers.google.com/structured-data/carousels/top-stories 2016/9/16 11

途上国のインターネット事情 2016/9/16 12

ネット⼈⼝ • 先進国のネット⼈⼝は頭打ち • 先進国では⼈⼝の90%前後がネット⼈⼝。 • 中国を含む途上国 • 中国のネット⼈⼝は7億⼈を超えているけど、⼈⼝の50%。 •
インドも1億⼈を超えているけど、⼈⼝の10%ぐらい 2016/9/16 13 Google IO Extend 報告会 in 神⼭より

ネット環境 • シェア • Androidのシェアが80%を超えている • そのほとんどはAndroid 1や2。 • iPhoneは⾼くて買えない。
• 回線が遅い • 2Gを使っている。 • 回線が⾼い • プリペイド式で、毎⽉500MBをチャージするような使い⽅。 • 機内モードにすぐ切り替えるらしい。 • こんな中、ちょっと試したいだけのアプリ（ 50MB）をダウンロードするか？ • アプリをアップデートするか？ 2016/9/16 14 Google IO Extend 報告会 in 神⼭より

Googleʼs Answer!? • AMP + PWA = ⾼速モバイルページ配信 2016/9/16 15

PWA 2016/9/16 16

PWAとは？ • Progressive Web Applicationの略 • https://developers.google.com/web/progressive-web-apps/ 2016/9/16 17 Service
Workerを使ったアレのこと

特⻑ • Instant Loading ‒ 即時読み込み • どんなネットワークを使っていようともほぼ即時読み込み。 • Add
to Home Screen ‒ ホーム統合 • ホーム画⾯に追加できて、アプリのように振る舞う • Push Notifications ‒ プッシュ通知 • エンゲージメントの強化 • Fast - 速い • なめらかなアニメーション / スクロール / ナビゲーション • Secure ‒ 安全 • https • Responsive ‒ レスポンシブ • モバイルフォン、タブレット、ラップトップ 2016/9/16 18

ネイティブアプリ vs ウェブアプリ ωΠςΟϒΞϓϦ • 操作性が良い・速い • デバイスの機能を100%使える • エンゲージメントが⾼い
• オフラインでも使える ΢ΣϒΞϓϦ • ⼿軽に試せる（インストール不要） • 常に最新（アップデート不要） • 容易なマルチデバイス展開 • 課⾦する場合の⼿数料が最低 2016/9/16 19 PWAがギャップを埋める

2016/9/16 20 例: Washington Post ホームに貼り付け可能専⽤のスプラッシュ即時読み込み他のタブは即時ではないがスムーズなアニメにより
ストレス軽減

Instant Loadの仕組み 2016/9/16 21 フレームの部分はローカルのキャッシュ（＝ブラウザのキャッシュ）から読み込みコンテンツの部分は（おそらく）スプラッシュを
表⽰している間にバックグラウンドで先読み

Google AMPとPWAをさらっと紹介

Google AMPとPWAをさらっと紹介

NAKANO Hideo

More Decks by NAKANO Hideo

Other Decks in Programming

Featured

Transcript

Google AMPとPWA をさらっと 2016/9/13 ウェブチップ社内勉強会 2016/9/16 1

Google AMPとは • Accelerated Mobile Pageの略 • AMP dramatically improves

Google AMPの意図（のようなもの） • User Experience（ユーザー体験）よりも、 • Monetization（収益化） and User acquisition（ユーザー獲得）

2016/9/16 5 AMP HTML <!doctype html> <html ⚡ lang="en"> <head>

検証 • Chrome DevToolを開き、URLの末尾に” #development=1”をつける 2016/9/16 6

2016/9/16 7 デモ

性能 ैདྷ ".1 1回⽬ 2770 ms ‒ DOM: 642 ms,

Google検索 2016/9/16 9

Google検索結果 2016/9/16 10 検索結果カルーセル

Googleカルーセルへの表⽰ • schema.orgの仕様に則ってjson+ldをページに埋め込む • https://www.suzukikenichi.com/blog/schema-org-for-top-stories-with- amp/ • https://developers.google.com/structured-data/carousels/top-stories 2016/9/16 11

途上国のインターネット事情 2016/9/16 12

ネット⼈⼝ • 先進国のネット⼈⼝は頭打ち • 先進国では⼈⼝の90%前後がネット⼈⼝。 • 中国を含む途上国 • 中国のネット⼈⼝は7億⼈を超えているけど、⼈⼝の50%。 •

ネット環境 • シェア • Androidのシェアが80%を超えている • そのほとんどはAndroid 1や2。 • iPhoneは⾼くて買えない。

Googleʼs Answer!? • AMP + PWA = ⾼速モバイルページ配信 2016/9/16 15

PWA 2016/9/16 16

PWAとは？ • Progressive Web Applicationの略 • https://developers.google.com/web/progressive-web-apps/ 2016/9/16 17 Service

特⻑ • Instant Loading ‒ 即時読み込み • どんなネットワークを使っていようともほぼ即時読み込み。 • Add

ネイティブアプリ vs ウェブアプリ ωΠςΟϒΞϓϦ • 操作性が良い・速い • デバイスの機能を100%使える • エンゲージメントが⾼い

2016/9/16 20 例: Washington Post ホームに貼り付け可能専⽤のスプラッシュ即時読み込み他のタブは即時ではないがスムーズなアニメにより

Instant Loadの仕組み 2016/9/16 21 フレームの部分はローカルのキャッシュ（＝ブラウザのキャッシュ）から読み込みコンテンツの部分は（おそらく）スプラッシュを