求人サイト「シニアジョブ」をNuxt3, NestJSでゼロから開発＆運用中ですが、Google Search Console（以下サチコ）のウェブに関する主な指標で「不良」、もしくは「改善が必要」の項目が出てくるようになりました。

seniorjob.jp

それぞれ詳しく書くと長くなって書き終わらないので箇条書き程度にやったことをメモ。

いろいろやった結果、PageSpeed Insights （以下PSI）で2023/4/21時点でパフォーマンスの点数は

PCは87点前後

モバイルは50点前後

となりました。

モバイルはかなり厳しいので個人的には黄色の50（50未満は赤）で及第点と納得してます。

数字だけでなく、主要なページは体感でもかなり早くなったのでさわってほしいところ。

まずはPSIの直接的でわかりやすい指摘から潰していきます。

Nuxt側

だいたいファイルサイズ小さくしてね系

画像ファイル

width, heightを付ける（styleで変えてる場合はなるべく実際に表示されるサイズに合わせる）
デザインで使っている画像ファイルサイズを小さくする（WEBツールで小さくしたり、webpにしたり）

求人画像もできればやりたいけど、未対応

HTML

余計なタグ、classの削除
v-ifしかないspan, divをtemplateにしてDOM要素数を減らす（空になったりするとバグる場合もあり）
ループ内の直書きSVGタグをファイル化(useなんてあるんだ・・・)

/_nuxt/entry.*.js を小さくする

NuxtでHTMLのあと、一番最初に読み込まれる外部JSファイルです。ビルド時に生成され*にはハッシュ値が入ります。

NuxtやVue Router系、plugins、middlewereなどが含まれます。

pluginで大きめなパッケージなどを使ってると大きくなりがち。

具体的なパッケージはnuxi analyzeで検討をつけます。

nuxi analyze · Nuxt

こんな感じで一部でしか使ってないクソデカライブラリがentryに入ってしまったりしてるのを気づけるので、importする場所やタイミングを工夫したり、なるべくpluginsからcomposablesに処理を移し、必要最低限しかentryに入らないようにします。

nuxt.com

特にFirebaseのライブラリが大きかったですが、全体で使うためpluginに残しておきたい。dynamic importすることでentry.*.jsに含まれなくなりました。

/_nuxt/entry.*.css を小さくする

jsと同じくnuxt.config.cssで指定したCSSファイル, Tailwind CSSの生成物などがここに入ってしまいます。

デザインを外注したため、1つの大きないわゆるstyle.cssが存在してました。

ページによって使うものが変わるため、分割し、nuxt.configからは削除、pageやlayoutで読み込むようにしました。

Nuxt Tailwindを使ってますが、これは全ページで使うTailwindのclassをまとめて入れてしまい、大きくなっているのが課題として残ります。

理想としてはすべてコンポーネントにscopedとして書き、分割、結合はNuxtに任せることですが、共通CSSもないと辛いので難しいところ。

Tailwindプラグイン Tailwind Elements削除

アコーディオンなどで一部使っていたんですが、Tailwindのプラグインということで分割importはできず、使っていない全部のCSS, JSが読み込まれてしまい非常にファイルサイズが大きかった。

https://tailwind-elements.com/

アコーディオンなどは自前で実装し、削除

CLS (Cumulative Layout Shift) 読み込み中のボタンなどのズレ

CLSについてはこちら

ClientOnlyにfalkbackを設定する

<ClientOnly> · Nuxt Components

サーバー側とブラウザ側でDOMが違うと起きるVueのWarn Hydration node mismatch 対策として雑にClientOnlyを使ってましたが、大きな表示ずれの原因になるのでfallbackを指定し、ずれないようにしました

たとえばログイン状態↓こうすることで「非ログイン中に出すやつ」がSSRされるようになります。

<ClientOnly>
  <div v-if="isLogin">ログイン中にだすやつ</div>
  <div v-else>非ログイン中に出すやつ</div>
  <template #fallback>
    <div>非ログイン中に出すやつ</div>
  </template>
</ClientOnly>

ログイン有無はPSIでは指摘してくれないので、自分で気づく必要がありました。

layoutをやめる

詳し動きは下記ツイートなんですが、Nuxt本体のバグが仕様か、layoutsを使うとサイト内遷移のCSR時にどうしても一瞬slot部分が空になってしまいました。

2023/6/15追記 page内でuseAsyncDataなどをawaitし、navigationをブロックするのが原因。awaitをとりスケルトンローディングを表示するなどで対応可能でした

フッターの位置が大きくずれて、減点MAX（1.0）の原因になってました。

ひとまず主要なページはpage側に移して回避。

Nuxt3、layoutを使うとサイト内遷移のCSR時に、どうしても一瞬slot部分空っぽの状態で表示されてしまい、CLSで悪影響が出てそうなので、治るまでlayout使わないようにするしかなさそう
— uyamazak 🕊️ (@uyamazak) 2023年3月16日

こちらのページ遷移も単一しかみてくれないPSIは指摘してくれません

いい対策が思いつかないのでlayoutでヘッダー・フッターを入れるのをやめ、改善を確認。のちに読み込むCSSだけ切り替えるようにlayoutは使用するようにしました。

Google Tag Manager

Google Analyticsの他、いろいろ広告やコンバージョン測定系をGTMで挿入してます。

Nuxtで読み込むJSより先に動くと、処理がブロックされてページ表示速度に影響がでてPSIでも下記警告が出ます。

ビジネス的に挿入しないわけにはいかないので、ページビュートリガーをドキュメントにあるうち一番遅い「ウィンドウの読み込み」に変更し、多少マシになりました。

ページビュートリガー - タグマネージャーヘルプ

NestJS

重い処理はキャッシュ

都道府県、市区町村やら職種などのいわゆるマスターデータは毎回DBから取らずにメモリにキャッシュするようにしました。

サーバーコストを抑えるためもあり、まだRedisも入れてない理由もあって、メモリキャッシュを使ってますが、ネットワークのオーバーヘッドもないし、JSONなどにシリアライズせずにJSのオブジェクト等を持てる利点もあり、今後も用途に合わせて使っていく予定。

マネージドRedisが高い＆必要なサーバー数がまだ少ない＆ Cloud Runが安すぎて、キャッシュ用にメモリ1GB増やしても全然安い。

求人一覧ではDBを使わずにElasticsearchだけで必要な情報を返す

サイトので一番重要でもある求人一覧ページは、Elasticsearchで条件にあう求人を検索しIDを取得、そのIDを使ってDBから詳細取得の２段階をやっていましたが、 Elasticsearchに一覧で必要な情報だけいれたフィールドを追加し、sourceから取得することで、DBアクセスを不要にしました。