Mima Design MemottoWEB DESIGNER · mima

Webサイトを速くするために実践した五つの施策

個人ブログとポートフォリオを運営していると、デザインの見た目だけでなく、ページが表示されるまでの時間も気になるようになります。特にスマートフォンから訪れる人が多いサイトでは、数秒の差が離脱率や読みやすさに影響します。

私も制作実績や開発メモ、イベントレポートを整理する中で、画像や外部スクリプトが少しずつ増えていきました。そこで、感覚だけで調整するのではなく、表示速度を計測しながら改善を進めました。

この記事では、Webサイトを高速化するためにやった5つの施策を、実際に取り組みやすい順番でまとめます。大規模なサーバー移行をしなくても、フロントエンドの設定を見直すだけで体感速度を変えられます。

最初に表示速度を計測する

最初に行ったのは、Google PageSpeed InsightsやLighthouseを使った現状確認です。スコアだけを見るのではなく、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、Interaction to Next Paint（INP）を確認し、どの処理がボトルネックになっているかを探しました。

計測は同じページでも、通信環境や端末によって結果が変わります。そのため、トップページだけで判断せず、画像の多い記事ページや埋め込み要素のあるページも対象にしました。改善前の数値を保存しておくと、施策の効果を比較しやすくなります。

画像を軽量な形式に変換する

サイトの表示を遅くしていた大きな原因は画像でした。制作実績のスクリーンショットやイベント写真を、そのままPNGやJPEGで掲載すると、1枚だけで数百KBから数MBになることがあります。そこで、写真はWebPやAVIFへ変換し、画面上で必要なサイズに合わせてリサイズしました。

さらに、ファーストビューにない画像には遅延読み込みを設定しました。loading="lazy"を利用すれば、ページを開いた瞬間にすべての画像を取得せず、スクロールに合わせて読み込めます。画像の縦横比をあらかじめ指定しておくと、読み込み中のレイアウト崩れも抑えられます。

CSSとJavaScriptの読み込みを整理する

使っていないCSSやJavaScriptを削除すると、転送量と解析時間を減らせます。過去に試したUIライブラリや、現在は使っていないアイコン用のスタイルが残っていないかを確認し、必要なページだけで読み込む形に整理しました。

JavaScriptはHTMLの解析を止めることがあるため、基本的にはdeferを付け、初期表示に不要な処理は後から実行します。アクセス解析やSNSボタンなどの外部スクリプトも、数を増やしすぎないことが重要です。制作メモを公開するときも、実装例だけでなく読み込みコストを意識するようになりました。

キャッシュと配信設定を見直す

同じ画像やCSSを毎回ダウンロードさせないため、ブラウザキャッシュの有効期間を設定しました。ファイル名にハッシュやバージョンを付けておけば、内容を更新したときだけ新しいファイルを取得できます。訪問者にとっては、2回目以降の表示が軽くなる点が大きなメリットです。

アクセス数や画像の容量が増えてきた場合は、CDNの利用も有効です。閲覧者に近い拠点から静的ファイルを配信できるため、サーバーとの距離による遅延を減らせます。たとえば、Web制作の記録を整理する際にも、画像や静的ファイルの配信方法まで確認しておくと、運用後の負担を抑えられます。

フォントと表示優先度を調整する

Webフォントはデザインの印象を整えやすい一方、読み込みに時間がかかる場合があります。使用するウェイトを必要最小限に絞り、可能であればシステムフォントを優先しました。フォントの読み込み中に文字が見えなくなる現象を避けるため、font-display: swapも設定しています。

すべてを一度に変更するのではなく、訪問者が最初に見る部分を優先しました。見出しや本文が先に表示され、画面外の装飾や補助機能は後から読み込まれる構成にすると、体感速度が向上します。

改善を継続するための確認項目は次のとおりです。

  • 主要ページをスマートフォン回線で定期的に計測する
  • 画像を掲載前にリサイズし、WebPやAVIFへ変換する
  • 不要なCSS、JavaScript、外部サービスを削除する
  • キャッシュ期間とファイル更新の仕組みを整える
  • LCP、CLS、INPの変化を改善前後で記録する
  • デザイン性と読み込み速度のバランスを確認する

表示速度の改善は、一度設定して終わりではありません。新しい記事や機能を追加するたびに、画像容量や外部スクリプトが増えていないかを確認することが大切です。まずはトップページを計測し、最も重い要素を一つだけ軽くするところから始めてみてください。小さな改善を積み重ねることで、使いやすく、訪れた人が内容に集中できるサイトへ近づけられます。