【視聴メモ】Building Successful Websites: Case Studies for Mature and Emerging Markets (Google I/O ’19)

この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。

---

References

https://www.youtube.com/watch?v=3As9NibdIjk
Speaker(s): Aanchal Bahadur, Matt Doyle, Jesar Shah, Charlie Croom, Rudra Kasturi

Abstract

Investing in the web has led to broader reach, meaningful engagement, and business impact for companies around the world. Come hear directly from them on how they are building successful websites for users in different network conditions, on a wide range of device-types, platforms and operating systems.

訳

Webに投資することは幅広い層へのアピールと意味あるエンゲージメント、また世界中の企業へのビジネスインパクトをもたらします。ここではどのようにして様々なネットワーク状況・デバイスタイプ・OSとプラットフォームのユーザーに意味あるWebサイトを提供するかということをお話します。

Contents

• Case Studies

Twitter

• Build once, ship to everyone
  • 一つのコードベースでDesktop,Mobile,FeaturePhoneすべてに対応した
• ツイート数が3倍に
• インストール数は500万以上
• Desktopとの違いは？

• フィーチャーフォンの場合は？
  • スマートフォンと違い、フローティングボタンはでかすぎて配置できないのでバーにリンクを出すだけにしている

Times Internet

• インドのインターネット企業
• ネットワーク強度の弱い村に住むユーザーが多い
• ニュースサイトでPWAを導入したが、パフォーマンスやエンゲージメントの点で最高だった
• 基本的な3つの要素(Code Splitting / Resource Optimization / Offline Caching)をきちっとやった
• Lighthouse満点
• PWAにしてユーザーの増加数が72%増加したしセッション時間が31%増加したよ
• 広告収入が59%増加した
• 次は？
  • TWAでPWAをネイティブ化する
  • 普通のアプリに比べて8倍小さく、5倍速い

Hulu

• PWA Desktop
• ネイティブ版のレビューがひどすぎた
• Web版の方が良いぐらいだというレビューがあったのでWeb版だけにすることにした
• PWAにするために2つのことから始めた
  • Web App Manifestを書いてSWを導入した
  • 最低限のことをするのには開発者一人が2週間書けるだけでよかった
  • リサーチ、開発、QA、リリースすべてのステージでそれだけ
  • 1スプリントあればPWA化可能！

Memo

• PWA! PWA!
• このセッションで話されたことはすべて web.dev で学習可能なコースとして整備されています