サイトのスコア比較

Google Search Consoleにて謎技研のモバイル向けサイトのスコアが芳しくない。

特にLCP(Largest Contentful Paint)のスコアが悪い。

今回はPreactを入れてLighthouseのスコアが上がるかテストすることにした。

先に結論

先に結論を書いておくとPreactの利用は見送ることにした。

これはReact本家のReact.Lazyにより良いスコアが出るためだと考えている。

Preactって何

Gatsby系のサイトを軽量化する記事を英語で検索すると、それなりにこのプラグインを入れているサイトを目にする。

PreactはとにかくReactを軽量にしたようなモノとしか知らないので詳しい話は別サイトに譲る。

本家Reactと完全に同じように扱えるか？というとそうでもないらしく結構導入が大変だという噂も耳にする。

しかし！Gatsby.jsにはPreactを簡単に扱うライブラリがあるのでサクッと試せるのでは？と考えた。

Preact側が対応していないコードはどうなる？

詳しく調査したわけではないのだが、次のサイトによるとPreactに実装されていない機能を呼び出そうとしたときにはReactが使われるとの情報あり。

How To Make Your Gatsby App Smaller, Using Preact | JavaScript in Plain English

ただし、後述するが残念ながら私のケースでは動かないケースがあったので解決法を記してある。

それでも動かなければアンインストールすれば良いので試すのは気軽。

インストール

Gatsbyサイトならgatsby-plugin-preactをインストールしてプラグインに記述するだけでOK。

npm install gatsby-plugin-preact preact preact-render-to-string

gatsby-plugin-preact | Gatsby

スコアの計測

本番環境とローカル環境の両方でLighthouseのスコアを取ってみることにする。

ローカル環境は一旦Buildした後serveを使って仮サーバーを立てる。

またいつも通りブラウザはChromeからシークレットモード(無駄なプラグインがオフになる)で計測

注意点

次のフォーラムによるとReact.LazyとReact.Suspenseのコードが入っていると動かなくなる。

英語：Cannot read property 'insertBefore' of undefined when using Suspense and lazy · Issue #3149 · preactjs/preact

解決方法はないらしいので、こちらのコードを使用しないように対応した。

Preactを入れる前

ローカルで計測

本番環境で計測

本番のほうがLCPが良いのは謎

Preactを入れた後

ローカルで計測

本番環境で計測

微妙な結果に

本番環境ではトータルのスコアが落ちてしまった。

尚、この実験はPreact前のコードにReact.Lazyが入っており、このコードのお陰で多少のスコアアップがある。

そしてPreact後はこのLazyを排除したのでその分不利となったのが結果につながったと思われる。

Total Blocking Timeだけスコアが低くなっているのはこのせいだろう。

React.Lazyの注意点

Preactでは使えないReact.Lazyのおかげで本家React版のほうがスコアが良いという結果だと思われるが...ひとつ注意点がある。

React.Lazyはなんでもかんでも使えばいいというわけではなくむしろスコアダウンを招くので注意してもらいたい。

これは実際に実験した結果なのだが、毎回必ず読み込まれる広告部分や、非表示のドロワ部分(モバイル版)のような箇所にReact.Lazyを当てた所スコアが落ちる結果となった。

唯一スコアアップが見込めたのはGoogleのサイト内検索バーだけである。

広告のようなタイプのものは視覚に影響する(大きなスペースを描画している)ため、こちらのロードを遅延させてしまうとユーザーの使用感に影響するという評価なのではないだろうか。

さいごに

今回の結果を踏まえ当サイトではPreactの利用は見送ることにした。

またPreactを利用する場合はサイトそのものが動かなくなる可能性があるのでそもそもおすすめできるものではない。

とは言えGatsby.jsの場合インストール/アンインストールが手軽にできるので、サイトが重くなりがちなら試して見る価値はある。