見出し画像

PWAを完了しました。

PWAはlighthouse auditの一番右の指標で、manifestとservice workerのフィアルが適式と認められると、check付きのバッチが付与されます。いままで特別な配慮はせずにプラグインのインストールで様子を見ていた次第です。

一番最初は、インストール数が多くsettingが不要なPWAというシンプルなプラグインをインストールして有効化していましたが、8つの項目のうち、start:URLの登録ができていないとのエラーがでで不合格状態を維持。次に、やはりインストール数の多いSuper Progressive Web Appsというプラグインを試し、特に設定の難しさはない感じでしたが、やはりPWAの項目のなかのstart:URLの登録ができていないとのエラーがでで不合格状態。しばらくそのままで置いときました。

Bootstrapの問題を先日解決できたので、次はPWAを合格へを目指すことにと再挑戦。登録のエラーなので、manifestとservice workerのJavacriptを少し書き換えれば成功するだろうと思いましたので、いろいろとググったところでその問題を解決しているウェブ上のページは発見できず、暫く放置かもと。しかしてGoogleのLCPを解説するBlogのページのLighthouseはどうなんだろうと思ってボタンを押して見ると、プロの方でも全てのスコアが良いわけでもないことが分かりましたが、PWAはしっかり合格していて、これはPWAを合格にする方策が必ずあると確信しました。

Javascriptの書き換えは敷居が高いことから、プラグインの入れ替えを選び、インストール数は多くはないものでしたが、PWA for WP & AMPというプラグインを選びました。設定はロゴをUploadするぐらいで難しいものではなく、ほぼdefaultでセットし、lighthouse auditをしたところ、自動的に合格となりました。大事なのはプラグインの選択で、サイトに適合するプラグインを導入する必要があるということでした。初めからもっとプラグイン選択に集中していれば、回り道はしなくて良かったかもです。

PWAが合格すると何が良いのかという答えには現状特に答えがありません。service workerが使えて、backgroundでの処理から高速化ができるのかと期待したところが、サイトの高速化にはほぼ寄与していないように思います。push notificationもなんだかなあというところです。ただ、その道のプロの方々がPWAの将来性に語っていますので、そのうち良いことがあるかもと思っております。

その後、ついに満点に到達!

画像1

何と操作した覚えがないのに、急にブラックな背景に反転。Perrmanceの100点は安定したものではなく、Casheの調子によるところが大きいです。Total Blocking Timeが変動し、40msなら100点満点(上図)、230msなら5点ぐらい減点です。

この記事が気に入ったらサポートをしてみませんか?