フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

2017年5月24日

PWA＋AMP＝PWAMPと言う考え方

2017年5月17日から19日かけてGoogle I/O 2017が開催されました。

Smart ReplyやGoogle LensなどのAI技術、Android Go/Oに加え開発言語であるKotlinの正式化、Google Assistant iOS版の提供、Google Assistantを搭載したGoogle Homeの日本発売など、さまざまな技術躍進が発表される中で、やはり個人的にはPWAとAMPに関する内容が気になる所です。

PWAに関してはProduction Progressive Web Apps With JavaScript Frameworksにおけるフレームワーク上の「PRPL」のことを書くべきだとは思いますが、今回はFrom AMP to PWA: Progressive Web AMPsからAMP＋PWA対応を行ったサイトがどのような恩恵を受けるのか、一部抜粋した内容を前提となるモバイルパフォーマンスを含めて記載します。

モバイルとパフォーマンス

From AMP to PWAでも一部が紹介されていましたが、2016年度のDioubleClickによる調査「The need for mobile speed: How mobile latency impacts publisher revenue」では次の結果を示しています。

• モバイルサイトの77%は3G環境
• モバイルサイトの4分の3は読み込み時間に10秒以上かかる
• 3秒以内に読み込まれないと訪問者の53%が離脱する
• 平均読み込み時間は19秒
• 5秒以内に読み込んだサイトの広告収入は、19秒で読み込んだサイトの2倍
• 2人のうち1人が2秒以内にページを読み込むことを期待している
• 広告の平均サイズは816KB、3G環境では4秒かかる
• コンテンツの平均サイズは1.49MB、3G接続では7秒かかる
• サーバーリクエストのほぼ半分は広告関連
• ページあたりの平均214サーバーリクエストのうち...
  • コンテンツに関する内容は69
  • 広告に関する内容107
• ユーザーの46%はページ読み込みで待つことを嫌う
• 5秒で読み込んだサイトは、19秒で読み込んだサイトと比較して...
  • 1回の訪問あたりのページビュー数が60%大きい
  • 直帰率が35%低い
  • 平均セッションが70%長い
  • ビューアビリティが25%向上

セッションの中でも0.1秒、1秒、10秒におけるユーザーの動向なども言及していましたが「Monetization, User acquistion VS User Experience」と表示されていた通り、なぜAMPやPWAを使うべきなのか今一度考えるべきなのかもしれません。

AMP+PWAという選択肢

2017年4月にはTwitterがPWA対応したTwitter Liteが発表され、その開発過程をHow we built Twitter Liteに記載するなど徐々にPWAも浸透してきています。しかしPWAはService Workerのインストールを行わない限りキャッシュによる表示速度の向上は見込めず、初回訪問のスピードは必然的に低下します。

そこでPWAMPの考え方が登場します。

PWAMPの詳細についてはWhat Are Progressive Web AMPs?のPWAMP Combination Patterns項に「AMP as PWA」「AMP to PWA」「AMP in PWA」と言う3つの方法とその開発が紹介されています。他にもGoogle CodelabsによるProgressive Web AMPsなども参考になると思います。

PWAMPの実例はセッションの中で次の4社が紹介されていました。

• XING
• mynet
• goibibo.com
• 楽天レシピ

中でも楽天レシピについては滞在時間が50%向上、CTRが3.6倍、1ユーザーあたりのPVが3.1倍、プッシュ通知による週間セッション数が3.3倍～3週目には5.3倍になるなどの詳細がアナウンスされていましたが、今回はあえてその他の事例を掘り下げてみます。

XING

今年の2月に行われたE-commerce Berlin Expo 2017においてxing.com/jobsにおけるAMP&PWAを示唆したスライド「E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps - Start Fast, Stay Engaged」が公開されています。プッシュ通知が鬱陶しいと感じる方でも、個人と仕事を結びつけるためのプッシュ通知であれば喜んで通知を受けることを選択するでしょう。

mynet

AMP as PWAに沿った考え方でAMP HTMLにService Workerとmanifest.jsonを読み込んでいます。AMPの仕様上レイアウトやデザインに限りはあるものの、下記の結果を得ています。

• 記事ページビューあたり25%の収益
• 平均ページ読み込み速度は4倍
• 平均滞在時間が43%向上
• セッションごとのPVは34%向上

goibibo.com

セッションではバックグラウンドでのService Workerインストール後、PWAへのアップグレートを言及しています。Progressive Web App for Goibibo PlatformによればJSのペイロードを30%縮小したと記載されています。

他にもGoogle Developers Case StudiesにはWegoの実例が記載されていました。

Wego

Credential Management APIを用いたログインフローなどさまざまな技術を活用している印象を受けます。

• 検索による訪問が12%向上
• より速い広告表示によりCTRが3倍増加
• ページ読み込み速度の向上
• 新規ユーザーの読み込み速度は1.6秒
• 直帰率が20%低下

また、Wegoはampproject.orgのケーススタディにも記載されています。

セッションではPWAのページから知人にURLだけを送った際に、Service Worker上でナビゲーション要求をインターセプトし、AMPのURLに変換するなど、PWAの弱点を克服する方法もアナウンスしていました。

AMPだけ、PWAだけ、ではなく双方の良い所だけを組み合わせたより新しい技術にチャレンジしていきたいですね。