パフォーマンス向上が主な目的

新しい環境にまだなれず、改修に少し時間がかかってしまった🔥
今までの個人サイトは静的ページになっているにも関わらずパフォーマンスが効率的ではなかったためこの度Next.jsから乗り越えた。

個人サイト

こちらから見れます！

背景

静的ページだけですむ

Next.jsは様々なレンダリング方法があるため無難な選択になりうるが、Astroのような不要なJavascriptを削除してくれるようなものはない。主に前までのパフォーマンスの低下は不要な部分が大きく反映されていることが原因になりつつあったのでそこの部分を修正することが必要だと思っていた。

シンプルに他のフレームワークでもコード書きたい

最近ずっとNext.jsしか使っていなかったため、新しいフレームワークを利用してみたくなった背景がある。
そこの部分からTypescriptを使用することができる他のフレームワークを模索しつつ、パフォーマンスの改善にも役立ちそうなのがAstroということもあり前回までで興味本位で触っていたためこの度個人ページでも利用することにした。

要件

よりシンプルに

前までの部分はかなりいらない項目なども多数あり、確かに機能という面ではよかったが、その分必要ないこともたくさんあったなと考えている。
そこの改善からダークモードはOSに依存させて実装し、このブログのように自分で変更することはあまりないのかなとユーザー目線で考えてみるとそう思った。

ハイパフォーマンス

これに尽きる。
ただの静的ジェネレータとして個人ページは機能してくれればいいので無駄な機能はある意味いらないなと思った。
今までは確実なものを利用していたが、個人的に新しいものを試してみたくなった背景がある。

結果

モバイル

変更前

変更後

パソコン

変更前

変更後

個人的にはかなり満足だと思う。
画像周りは改善の余地があるがここの部分はしっかりと強調したいプライドがあるのでこのまま👤

最後に

何度も話しているが、自分の目指しているものはプロダクトを成長させることができるエンジニアだ。
そのために少しでもパフォーマンスが良くなるのならば勉強する価値はあると思っている。
最近フロントエンドの記事ばかり書いているので少しずつバックエンドも書いていきたい