なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2023/03/31

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

カテゴリー：

趣味で取りました。

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

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 を設定しました。
例えば、ブログ記事ページだと、トップページ、カテゴリー一覧、このサイトについて、あとは設定しているカテゴリーへのリンクが取得されていたのですが、リンククリック時に取得するようにしてあります。

シンタックスハイライトの SSR 化

そもそもこれサーバーサイドでできるよね、っていうことで、 React Syntax Highlighter でやっていたのを、 shiki にして、かつサーバーで描画するようにしました。
これによって引っ張ってくる JS のサイズが大幅に減るので、体感速度も大幅に上昇します。

Partytown でサードパーティースクリプトを Service Worker へ

正直サードパーティースクリプトについてはどうしようも出来ないので、話題になっていた Partytown で逃がしました。
都合が良いことに、 GA の利用想定があるので、公式サイトの通りにやって終了。

結果

performance details result of page speed insights