Nuxt Speedkit で Pagespeed Insight が 100/100 になる理由

Nuxt の高速化についていろいろ調べていたところ、 Nuxt Speedkit なるものがあることに気がついた。 これは、 Nuxt を高速化するためのもろもろのツールを提供してくれるライブラリである、とのこと。

Introduction

nuxt-speedkit.grabarzundpartner.dev

しかも、何やら Pagespeed Insights で、モバイルとデスクトップの両方で、 100 点まで叩き出せるのがウリらしい。 (下記が、その Demo サイト)

Grabarz & Partner Group

Die Grabarz-Gruppe ist eine unabhängige, inhaber:innengeführte Agenturgruppe mit über 250 hochqualifizierten Marketing-Spezialist:innen unterschiedlichster Disziplinen.

grabarz-group.de

まっとうにやって、そんなことが可能にはちょっと思えなかったので、これについて調べてみた際のメモ。

答え: Pagespeed Insights (モバイル) では javascript を読み込まない

このライブラリは、 Nuxt を高速化していく上でやりたくなるようなもろもろの機能を提供してくれる。 その中でも、モジュールとしてこのライブラリを指定した際には、 Nuxt App のクライアント側での読み込みのエントリーポイントとなる client.js を webpack の設定から無理矢理書き換えて、 requestIdleCallback をして、十分にクライアントのリソースの空きがある場合にのみ、もともとの client.js を読み込むようなロジックでもってラップしてしまう。

nuxt-speedkit/entry.js at 377afca2943c7572ef9f3af63b198846fbba403c · GrabarzUndPartner/nuxt-speedkit

nuxt-speedkit will help you to improve the lighthouse performance score (100/100) of your website. - nuxt-speedkit/entry.js at 377afca2943c7572ef9f3af63b198846fbba403c · GrabarzUndPartner/nuxt-spee...

github.com

そして、 Pagespeed Insights においては、十分にクライアント側に空きがある状態には、基本的にはならない。 結果、 Pagespeed Insights においてスコアが評価される際には javascript の読み込みがほぼほぼスキップされることになり、Nuxt で高速化する場合に一番の鬼門となる Total Blocking Time (TBT) と Time To Interactive (TTI) を、丸々回避してしまうことで、高得点を叩き出している。

これは、割とズルに近いことなんじゃないか、とは思わなくもない