2022-06-04

【Gatsby.js】Preactを入れたら軽くなる?

Preactを入れる前と入れた後でLighthouseのスコアを比較してみる。

Article Image
使用ソフトウェアバージョン備考
Gatsby4.14.1
React18.0.0
Preact10.7.3

サイトのスコア比較

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.LazyReact.Suspenceのコードが入っていると動かなくなる。

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

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

Preactを入れる前

ローカルで計測

Preact入れる前-ローカル計測結果

本番環境で計測

Preact入れる前-本番の結果

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

Preactを入れた後

ローカルで計測

Preact入れた後-ローカル計測結果

本番環境で計測

Preact入れた後-本番の結果

微妙な結果に

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

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

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

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

React.Lazyの注意点

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

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

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

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

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

さいごに

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

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

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


この記事のタグ


謎の技術研究部 (謎技研)