Google の PageSpeed Insights で全スコア100点を取る

趣味で取りました。

result of page speed insights

サイト構成としては以下の通り：

Next.js
TailwindCSS
Vercel

基本キャッシュは Vercel がうまいことやってくれているので、 Next.js だけパフォーマンスなり変えていく感じになります。
で、やったこととしては以下の通り。

lang=ja の追加

無かったので追加しました。 Next.js なら _document.tsx を追加して上げれば良いです。

import { Html, Head, Main, NextScript } from "next/document";

const Document = () => {
  return (
    <Html lang="ja">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};

export default Document;

コントラスト比の調整

ブログの色はほぼ変わっていないんですが、若干背景色を薄く、かつリンクの色を濃くしました。あとは、ヘッダーを若干調整しました。いままではカテゴリー一覧などは白い枠の外にあって、すごく怒られていたのですが、中に入れてコントラスト比を確保しました。
まぁ他のブログを見た感じは中にあるパターンが多いので、じゃあいれるかーという形で。

JS 実行量の軽減

うちのブログは Head 系に next-seo を使っていたんですが、いままで NextSeo を使っていた部分について、 DefaultSeo を使ってあげて、差分だけ実行するようにしました。
もとからなんでやってなかったって話もあるんですが、これをすることで、 Total Blocking Time が減りました。まぁいらない JS 実行してますからね。

JS 取得量の削減

もともとは next/link の prefetch が有効になっていたんですが、技術系ブログを遡って読む人はあんまりいないかつ、例え JS 引っぱってきても個々のサイズはそこまで大きくないということで、ページトップ (/) 以外へのリンクは prefetch=false を設定しました。
例えば、ブログ記事ページだと、トップページ、カテゴリー一覧、このサイトについて、あとは設定しているカテゴリーへのリンクが取得されていたのですが、リンククリック時に取得するようにしてあります。