なぜやるのか
自分が満足するための個人記録サイトとして、これを単なる展示用ページではなく、「長期的に利用可能なツールの入り口」のように見せたいと考えました。今回の最適化の核は、サイトをより安定させ、クリーンにし、私の「信頼できる個人ツール」への審美眼と基準に合わせることにあります。
何を変えたのか
パフォーマンス面：より軽く、より安定し、より管理可能に
1) ルートレベルのレイジーロード
Resume / Bio / BlogList / BlogDetail をレイジーロード（遅延読み込み）に変更し、初回読み込み時のパッケージサイズと不要なページの読み込みコストを削減しました。
2) Blogハイライトライブラリの遅延読み込み
react-syntax-highlighter はサイズが大きいため、オンデマンド読み込みに変更しました。記事内にコードブロックがある場合のみハイライトとスタイルを読み込むようにし、通常の記事が初回読み込みを遅らせないようにしました。
3) 動きの視覚効果（動効）のダウングレード戦略
prefers-reduced-motion（視覚効果を減らす設定）への対応：
- パーティクル背景：完全にオフ
- タイプライター効果：静止テキストとして保持
これにより、システム設定を尊重しつつ、低スペックデバイスのレンダリング負荷も軽減します。
4) 画像のデフォルト lazy/async 設定
共通コンポーネント RTImage のデフォルトを loading="lazy" かつ decoding="async" に統一しました。アイコンなどの重要な初回表示リソースのみ、手動で eager に設定しています。
UI構造：より明確な位置付けと情報階層
1) ヒーローセクション（トップ）の再構成
- 位置付けを示す tagline を追加
- 3つの「原則/好み」を示す情報ブロックを追加
typewriterの内容を「スキルタグ」から「信頼性への位置付け」へシフト
2) Experience（経歴）への「信頼性」の追加
タイムラインに「長期メンテナンス/信頼性」に関連する重点項目を2〜3補足し、単なる年数や職位以上の経歴が見えるようにしました。
- 長期的な安定性を核としたプロダクト級アプリケーションの構築と継続的なメンテナンス。
- バリデーションとエッジケース処理を通じた、ユーザー向けフローにおけるデータ信頼性の向上。
- デザインおよびバックエンドとの連携による、大規模プロジェクトにおける保守性の高い機能の実装。
3) Services 文言の再調整
「技術カテゴリ」から「課題解決の方法」へと変更し、データの信頼性と長期的な保守能力を強調しました。
文言と位置付けの統一（三ヶ国語同期）
コアとなる文言を EN / zh-CN / ja の三ヶ国語で同期させました。主なポイント：
- 「reliable personal tools（信頼できる個人ツール）」というキーワードの統一
- サービス説明のトーンの再定義（「何ができるか」から「どう解決するか」へ）
- お問い合わせエリアを「雑談」から「信頼できるツール構築のための協力」というトーンに変更
現在の状態
今回の最適化の結果、サイトはより軽く、より安定し、より明確になりました。これは「自分が満足する」という当初の目的にさらに近づいた結果です：
- 初回画面での同期読み込みの削減
- 低性能デバイスやユーザー設定に優しい動効
- 新しい位置付けに合わせた文言と、より整理された情報階層