主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2023/03/31
趣味で取りました。
サイト構成としては以下の通り:
基本キャッシュは Vercel がうまいことやってくれているので、 Next.js だけパフォーマンスなり変えていく感じになります。
で、やったこととしては以下の通り。
無かったので追加しました。 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;
ブログの色はほぼ変わっていないんですが、若干背景色を薄く、かつリンクの色を濃くしました。
あとは、ヘッダーを若干調整しました。いままではカテゴリー一覧などは白い枠の外にあって、すごく怒られていたのですが、中に入れてコントラスト比を確保しました。
まぁ他のブログを見た感じは中にあるパターンが多いので、じゃあいれるかーという形で。
うちのブログは Head 系に next-seo
を使っていたんですが、いままで NextSeo
を使っていた部分について、 DefaultSeo
を使ってあげて、差分だけ実行するようにしました。
もとからなんでやってなかったって話もあるんですが、これをすることで、 Total Blocking Time が減りました。まぁいらない JS 実行してますからね。
もともとは next/link
の prefetch
が有効になっていたんですが、技術系ブログを遡って読む人はあんまりいないかつ、例え JS 引っぱってきても個々のサイズはそこまで大きくないということで、ページトップ (/
) 以外へのリンクは prefetch=false
を設定しました。
例えば、ブログ記事ページだと、トップページ、カテゴリー一覧、このサイトについて、あとは設定しているカテゴリーへのリンクが取得されていたのですが、リンククリック時に取得するようにしてあります。
そもそもこれサーバーサイドでできるよね、っていうことで、 React Syntax Highlighter でやっていたのを、 shiki にして、かつサーバーで描画するようにしました。
これによって引っ張ってくる JS のサイズが大幅に減るので、体感速度も大幅に上昇します。
正直サードパーティースクリプトについてはどうしようも出来ないので、話題になっていた Partytown で逃がしました。
都合が良いことに、 GA の利用想定があるので、公式サイトの通りにやって終了。