PWAで表示速度が2倍に! スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット&デメリット

ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。

PWAで表示速度が2倍に! スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット&デメリット

PWA(Progressive Web Apps)は本当に「アリ」なのか――?

ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。

一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Googleを中心に策定されている技術「PWA」です。2018年3月にはSafariにもService Workerが実装され、より開発が盛り上がっています。

そんな中、日本経済新聞社が提供する「日経電子版」は、2016年ごろからいち早くPWAを利用した開発を進めてきました。その効果は絶大で、特定のページではネイティブアプリよりも速度がでるまでになったそうです。

1

日経電子版をホームに追加するとネイティブアプリのような体感が得られる。タブもChromeなどのブラウザとは別になる

そこで、日経電子版を担当するエンジニア・宍戸俊哉さん、安田竜さんのお二人に、開発のノウハウや課題、ネイティブアプリとの関係など、PWAを使った開発のノウハウをインタビューしました。

宍戸俊哉(ししど・しゅんや/@sisidovski)(写真右)
2012年に新卒でドワンゴに入社し、2016年の4月に日本経済新聞社入社。ドワンゴではニコニコ静画などのサービスに携わり、フロントからサーバサイドまで幅広く業務を担当。現在は、日経電子版のCDN周りなどを担当し、新卒向けの研修など若手エンジニアの土台づくりにも従事している。
安田 竜(やすだ・りょう)(写真左)
2015年、新卒でNTTに入社し翌年に日本経済新聞社入社。大学ではセキュリティソフトウェアの実装などを行い、NTT在籍時はDockerなどのコンテナ仮想技術関連を研究していた。現在はPWA周りのService Worker開発などを担当するほか、機械学習関連の業務にも着手している。

速度改善を追い求めていたら、PWAにたどり着いた

2

―― 日経電子版にPWAを導入した「きっかけ」を教えてください。

宍戸:2015年に会社がイギリスの経済紙『Financial Times』を買収したのですが、向こうの開発陣にWorld Wide Web Consortium(W3C)などで活躍している方がいたんです。彼らといろいろと議論する中で、2016年ごろから「アプリだけでなくWebも内製開発を進めて、先端的な仕組みや技術を採用していこう」となりました。

僕らのチームの一番大事なKPIは「速度をあげる」こと。当時そのKPIを達成しようと思うと、必然的にService Workerが選択肢として浮かんできて。2016年にサイトに導入したので、取り組みとしてはかなり速い方だと思います。

Service Worker
PWAの根幹にある技術で、通常のWebページとは別のバックグラウンドで独立して動くスクリプト。オフラインでの操作やプッシュ通知などが行える。

そもそも、開発当初は「PWAをやっていくぞ」という感じではなかったんです。「速度を上げるためにService Workerを使いましょう」というところから始まって、速度改善に取り組んでいたら、たまたま「PWAが良さそう」という潮流があって、これいいんじゃないと。

個人的に、PWA自体はリリース当初から注目していて、2015年のアドベントカレンダー記事で紹介したりしていました。学んでいた知識がチームで使えたのはよかったですね。

―― Service Worker周りの開発は、安田さんが中心となって行っていると伺いました。会社として導入する前に「Service Workerは良さそう」という感触はあったのでしょうか?

安田:少し触ってみてすぐ、AppCacheよりは扱いやすく、プログラマブルで良いなと思いました。ただ当時は「Workbox」などService Worker周りのライブラリがなかったので、ゼロからコードを書いて、フレームワークの再実装みたいなことをしていました(笑)

Workbox
Service Workerのキャッシュ管理などを自動で行なってくれるライブラリ

宍戸:あと、Service Workerを素で使っていると、キャッシュの状態管理が難しかったんです。今から開発するとしたら、絶対にWorkboxみたいな抽象化されたレイヤーから使えるライブラリを使うと思います。

ネイティブアプリに「近い」ところまできている

――ずばり、PWAを導入してみて実感したメリットは?

宍戸:やっぱり速度ですね。スマホのホーム画面に追加したユーザからのアクセスで、良い結果が出ているんですよ。速度が上がったことで、通常の1セッション当たりの閲覧数が過去の数値に比べて、ホームに追加したユーザーのアクセスは約2倍になっています。詳しくはこの資料を見てもらえると。

3

Service Workerなしの速度

4

Service Workerありの速度。旧サイトと比較すると50%程度の速度改善が見られる(3G環境)


5

Lighthouse(パフォーマンス測定ツール)のスコア

面倒くさくてネイティブアプリをインストールしないユーザーが、ホーム画面から日経電子版にアクセスする頻度が高くなっているというのは良い傾向だと思います。サイトの表示が1秒遅いとコンバージョン率が何%落ちます、といった指標もありますし。

―― PWAの導入後、実際にユーザから速度に関する反応はありましたか?

宍戸:はい。「速くなったね」と。Service Workerでトップページや静的なものをキャッシュしているので、それが体感速度を上げた要因になったんだと思います。実際、PWA導入の翌週に表示の速さが話題とになり、Twitterのトレンドに「日経電子版」が入るくらいでした。サイトの速度がトピックとして取り上げられたのは良かったかなと。

Google I/O 2018でも、Webパフォーマンス改善のセッションで事例として紹介された

―― 一方で「PWAではネイティブアプリの速度に勝てない」という話も耳にします。その辺りはどうでしょう?

宍戸:確かに、よく議論になりますね。Androidでは、PWAを実装したWebの方が記事の表示速度は速い場合があります。iOSではまだ勝てていないですね……。

6

Androidアプリ(左)と、PWAで実装されたWebサイト(右)の速度比較。若干ではあるが、PWAを実装したWebサイトの方が早い

安田:僕らはSPA(Single Page Application)構成ではないので、ページをキャッシュするためにService Workerを使ってキャッシュの処理をゴリゴリと書きますが、ネイティブアプリの開発では手元にJSONを置いておいてロードするだけで済みます。日経では、開発の手間を考えるとやはりまだネイティブアプリの方が上だと思います。

SPA
Webアプリケーションのアーキテクチャ。単一のページでコンテンツの切り替えができる

宍戸:ネイティブアプリはマルチスレッドを扱う仕組みがちゃんと用意されているけれど、ブラウザはまだ使いやすい状態ではない。実際に60fpsで常に描画して……とかは簡単ではないですし、そこに難しさがあるなと感じます。

トータルすると、まだまだネイティブアプリの方が良い体験ができると思います。けど、速度に関してはけっこう「近い」ところまで来ているんじゃないかな。

安田:僕もそう思います。比較的、ネイティブアプリに体験を近づけやすい分野ではあると思うので。

7

正直、バグはめちゃくちゃ多かった

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く