ポートフォリオサイトをどのように最適化したか
ポートフォリオは第一印象です。読み込みが遅かったり、Googleに表示されなかったりすると、チャンスを逃してしまいます。私はスピード、SEO、そしてメンテナンス性のためにサイトを最適化しました。
私のアプローチは以下の通りです。
スピードとパフォーマンス
軽量なスタックを選びましょう。AstroやNext.jsのような静的サイトジェネレーターを使用します。これらは重いフレームワークよりもJavaScriptの転送量が少なくて済みます。
重いUIライブラリは避けましょう。数キロバイトを節約するために、シンプルなコンポーネントは自分で作成します。
フォントはセルフホストしましょう。DNSルックアップを減らすために、サードパーティのCDNは避けます。レイアウトシフトを防ぐために font-display: swap を使用します。
すべての画像を最適化します。
- 画像をWebPまたはAVIFに変換する。
- アップロード前に画像をリサイズする。
- ファーストビュー以外の画像には
loading="lazy"を使用する。 - レイアウトシフトを防ぐために
widthとheight属性を追加する。
JavaScriptを管理します。
- ルートをコード分割（Code-split）する。
- 解析ツールのような非クリティカルなスクリプトは遅延読み込み（Defer）させる。
- 定期的にバンドルサイズを監査する。
SEOと構造
すべてのページに固有のタイトルとメタディスクリプションを使用します。
セマンティックHTMLを使用します。1ページにつきH1は1つとし、nav、main、footer などの適切なタグを使用します。
Open GraphとTwitter Cardのタグを追加します。これにより、リンクをシェアした際の見栄えが良くなります。
sitemap.xml と robots.txt を含めます。これにより、検索エンジンがサイトを見つけやすくなります。
JSON-LD構造化データを使用します。これにより、検索エンジンに自分が何者であるかを正確に伝えることができます。
アクセシビリティとSEOのために、画像には必ず alt テキストを追加します。
メンテナンスとワークフロー
コンテンツはMarkdownまたはシンプルなJSONファイルで記述します。これにより、コードに触れることなくプロジェクトを追加できます。
ワンコマンドでのデプロイを設定します。VercelやNetlifyを使用すれば、git push するだけでサイトが即座に更新されます。
依存関係を少なく保ちます。これにより、後々のインストール問題を回避できます。
サイトをテストします。Google PageSpeed InsightsやLighthouseを使用して、問題を見つけて修正します。
私はNext.jsとVercelでサイトを構築しました。WebP画像、固有のメタデータ、自動デプロイを使用しています。今では、新しいプロジェクトを追加するのに30秒しかかかりません。
基本に集中しましょう。スタック、画像、マークアップを一度正しく設定すれば、サイトは高速なまま、管理もしやすくなります。
あなたのポートフォリオ最適化において、最も大きな違いをもたらしたものは何ですか？ぜひコメントで教えてください。