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

Published: 2022/5/21


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

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

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

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

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

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

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


Tags: nuxtpagespeed-insights

関連記事

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags