この記事をおすすめしたい人
- Nuxt.jsが楽々PWA導入と聞いて試したい人
- PWAが高速と聞いて興味ある人
- PWAってPageSpeed Insights対策にもなるのか知りたい人
- つまりオレ
なんでも興味を持って、なんでも実験する僕がPWAを試すお話です。
PWAは本来ならけっこう導入ハードル高いみたいなんですが、Nuxt.jsだとモジュール組み込むだけでちゃちゃっといけるみたいなんでやってみることにしました。
初回はまずPWAがなんなのかをやりたかったんですが、いまいちよく分からないので、これはいろいろ試しながら最後にやりたいと思います。
今回は「PWAが速い」という点についていろいろ調べてみます。
WordPressの上でな！
※ このブログはまだWordPress製です
このページの目次
PWAとは結局なんなのか
「Progressive Web Apps」の略だそうで、二次ソースで説明してるサイトはめっちゃあるんですが、一次ソースが分かんなかったです。
Googleが提唱してるらしいのでこれとかですかね…。
あとMDNのページとか…。
一言で言うと、「Webサイトをアプリ化する仕組み」みたいになるんですかね。
「アプリ」と付いていますが、いわゆるアプリに限定されないようで、ブログのような普通のWebサイトでもPWA化することができるようです。
(別に審査とかないので)
PWA導入のメリット
あまり深く理解していないので、今後実験しながら詳しくやっていく予定です。
今回はPWAのメリットの中でも「速い」という点について調べてきました。
PWAはなぜ速い？
もうね、「PWAとは！？」みたいなの解説してるサイト見るとどこ見ても「PWAは速い！」って書いてんですよね。
でもGoogleのサイト見ても、「ウェブ体験は高速でなければいけませんが、特にプログレッシブウェブアプリでは必須」とあるだけで「なぜ高速なのか」が抜けています。
MDNにいたっては特に速度について触れていません。
ほんまにPWAって速いんかい…。
という疑念が消せません。
そんな中から曲解と推論で、どうにかPWAが速い理由を考えたいと思います。
インストール不要なので速い
これは「WebサイトのPWA化」ではなく「アプリのPWA化」でのケースだと思います。
Googleのドキュメントにこの↓ような表現がありました。
ネイティブアプリの最初の読み込みは苛立たしいものです。 これはアプリストアと巨大なダウンロードサイズによる制限です。
これはつまり、逆に考えると「PWAならインストール不要なので速い」ということかなと。
キャッシュを利用するので速い
先ほどのGoogleのドキュメントにこの↓ような表現があります。
プログレッシブウェブアプリはブラウザタブで実行できますが、さらにインストールすることもできます。
Service Workerを使用して実行に必要なアプリケーションリソース（HTML、CSS、JavaScript、画像）を事前キャッシュし、実行時に天気データをキャッシュしてパフォーマンスを向上させるため高速です。
2個目の引用は「天気予報ウェブアプリ」のチュートリアルなので天気データうんぬん書かれていますが、PWAが使うデータ全般と捉えていいと思います。
これはちょっと納得できる理由です。
アプリとしてインストールし、Service Workerとやらがローカルのキャッシュにデータを保存するので速い。
うん、分かる。
PWAは本当に速いのか？
なんとなくPWAが速い理由を検討したので、今度はこれを客観的に評価してみたいと思います。
速度評価にはGoogleのPageSpeed Insightsを使います。
評価するサイトは姉妹サイトのオレGAME.com。
このサイトはNuxt.jsで書かれているので、PWAモジュールの導入前後でPageSpeed Insightsの結果がどう変わるかを比較します。
ページの構造？コンセプト？によって結果が異なる可能性があるので、テキスト多めのページとか画像メインのページとか、何パターンか検証します。
画像多めのページで比較
検証に使ったページはこのページです。
JPEG画像16枚で800KBほど、100KBのPNG画像1枚のコンテンツ。
PageSpeed Insightsの測定結果↓。
(左が導入前、右がPWAです)
えっ…
全く点数が変わりません…。
テキスト多めのページで比較
検証に使ったページはこのページです。
13KB弱の画像が2枚で、他はテキストのコンテンツ。
PageSpeed Insightsの測定結果↓。
(左が導入前、右がPWAです)
！？
むしろ下がりました。
PageSpeed Insightsは点数にけっこうムラがあるので、そのせいかもしれませんが、ムラを超えるほどの高速化はされなかったようです。
大きなデータを全て描画するページで比較
検証に使ったページはこのページです。
APIから大きなデータを取得し、それを全て表示しているページです。 つまり、通信量的にも描画的にも重いページ。
PageSpeed Insightsの測定結果↓。
(左が導入前、右がPWAです)
うん、たぶんそうだろうなって…。
大きなデータを使うが一部しか表示しないページで比較
検証に使ったページはこのページです。
APIから取得するデータは先ほどと同等ですが、一度に表示するのはごく僅かです。 つまり、通信量的には重いが描画は軽いページ。
PageSpeed Insightsの測定結果↓。
(左が導入前、右がPWAです)
ですよね、知ってた…。
PageSpeed Insightsでの速度比較のまとめ
PageSpeed Insightsは計測ごとにけっこう点数が変わるのでなんとも言いがたいですが、少なくとも、
PWA入れただけで50点が100点になる、なんてことはないッ！
と言っても良い結果になっていると思います。
どちらかというと下がっている結果が多かったですが、どのページもJavaScriptが重いって怒られてたので、PWA導入することでスクリプトのサイズが増えてやや減点みたいな感じでしょうか。
ならPWAは速くないのか？
そういうわけでもないんですよねー。
僕はずっとWordPress使ってきてたので「Webサイトの表示はこんなもん」と思っていたところに、Nuxt.jsで初めてSPAを経験して鳥肌が立ちました。
それでも遅かったいくつかのページ(大きいデータと多数の描画)ではちょっとひっかかりを感じていました。
ところがっ！
それらのページのひっかかり、PWA化してかなり改善しています。 このページとかこのページとか。
特にスマホで見た時の高速化具合がかなりのものです。
個人的には「PWAは速い」で間違いありません。
ただ、残念ながら…。
これを客観的に示せる用意ができていません。
今公開中のものはPWA化済みのもので、同時にPWA前のものをお見せできないのと、「速い」と感じたのも所詮僕の主観です。
動画にでもとるか…？
まとめ、と言いたいこと
今回の実験で、「PWAは体感では速くなってそう」というのが個人的には分かりました。
ですがPageSpeed Insightsでの評価は全く変わらないか、やや減少気味です。
PageSpeed Insightsのスコア目的でPWA導入を考えている人は、望んだのとはちょっと違う結果になるかもしれない。
ただ、ユーザ体験という意味では本当に快適になっています。
PWAにしろSPAにしろ、PageSpeed Insightsのスコアを下げやすい技術ですが、本当の意味でのユーザ体験の快適さを評価してくれることを期待しますGoogleさん。
PWA推進してんだからやってくれるでしょ！ 頼んだよ！
あとPageSpeed InsightsでAMPとかGoogleマップのスクリプトにケチつけさせるのやめてよね！！
以上、WordPressからお届けしました！