2026年4月16日
Web サイトの表示速度が重要な理由
ウェブサイトの表示速度は、ユーザー体験とSEOの両方に大きく影響します。特にスマホユーザーは通信速度が不安定なことが多いため、軽量で速いページが求められます。
- 表示に3秒以上かかると、約53%のユーザーが離脱するというデータがある
- Googleは表示速度をSEOのランキング要因の一つとしている
- スマホユーザーは特に速度に敏感（4G回線でも遅いと感じる）
- ECサイトでは表示速度が1秒遅くなるとコンバージョン率が7%下がるという調査結果もある
つまり、表示速度の改善は「ユーザーのため」であると同時に「自分のサイトの成果のため」でもあります。ポートフォリオサイトでも、表示速度が速いと面接官に好印象を与えられます。
① 画像を最適化する
画像はページの読み込み時間の大部分を占めます。特にスマホで撮った写真をそのまま使うと、1枚で数MBになることもあります。
- WebP形式を使う（JPEGより25〜35%小さい）。ほぼすべてのモダンブラウザが対応しています。
- 必要以上に大きい画像を使わない（表示サイズに合わせる）。幅1920pxの画像を幅300pxで表示するのは無駄です。
loading="lazy"で画像を遅延読み込みする。画面に表示されるまで読み込まないので、初期表示が速くなります。widthとheightを指定してレイアウトシフトを防ぐ。サイズを指定しないと、画像が読み込まれたときにページがガタッとずれます。
<img
src="photo.webp"
alt="写真"
width="800"
height="600"
loading="lazy"
>💡 学習ロードマップで基礎を確認できます。
② CSSとJavaScriptを最適化する
- 使っていないCSSを削除する
- JavaScriptは
</body>の直前に書く（またはdefer属性を使う） - CSSとJSファイルを圧縮（ミニファイ）する
- CSSは
<head>内に配置して、レンダリングブロックを最小限にする
<!-- deferでHTMLの解析をブロックしない -->
<script src="app.js" defer></script>
<!-- asyncは順序を保証しないが、独立したスクリプトに使える -->
<script src="analytics.js" async></script>defer はHTMLの解析が終わってからスクリプトを実行します。async はダウンロード完了次第すぐ実行します。メインのスクリプトには defer、分析ツールなど独立したスクリプトには async を使いましょう。
🔗 あわせてJavaScript入門もチェックしてみましょう。
③ 表示速度を計測する
改善の前後で速度を計測しましょう。無料で使えるツールがあります。
- PageSpeed Insights（
pagespeed.web.dev）：Googleの公式ツール。URLを入力するだけでモバイル・デスクトップ両方のスコアが確認できる。改善提案も具体的に表示してくれます。 - Chrome DevTools：Lighthouseタブで計測できる。F12キーで開発者ツールを開き、Lighthouseタブから「Analyze page load」をクリック。ローカル環境でも計測できるのが便利です。
- GTmetrix：詳細な分析ができる。ウォーターフォールチャートで何が遅いか一目でわかる。どのファイルの読み込みに時間がかかっているかが視覚的にわかります。
スコアは100点満点で、90点以上が「良好」です。まずは赤い項目（スコアが低い部分）から改善していきましょう。一度に全部改善する必要はありません。画像の最適化だけでもスコアが大幅に上がることがあります。
📖 開発者ツールの使い方でLighthouseの使い方を確認できます。
Core Web Vitals（コアウェブバイタル）
Googleが定めた3つの指標で、SEOのランキング要因にもなっています。
- LCP（Largest Contentful Paint）：最大コンテンツの表示時間。2.5秒以内が良好。ヒーロー画像やメインテキストが表示されるまでの時間です。画像の最適化が最も効果的な改善方法です。
- INP（Interaction to Next Paint）：ユーザー操作への応答速度。200ms以内が良好。ボタンをクリックしてから画面が変わるまでの時間です。重いJavaScriptの処理を減らすことで改善できます。
- CLS（Cumulative Layout Shift）：レイアウトのずれ。0.1以下が良好。画像や広告が読み込まれたときにページがガタッとずれる現象です。画像にwidth/heightを指定することで防げます。
CLSを防ぐには、画像に必ず width と height を指定し、Webフォントの読み込みで文字がガタつかないよう font-display: swap を使いましょう。
🔗 画像の最適化・開発者ツール・レスポンシブデザインも参考にしてください。
計測ツールの使い方
Chrome DevTools内のLighthouseで計測できます。F12キーで開発者ツールを開き、「Lighthouse」タブから「Analyze page load」をクリックするとスコアが表示されます。
スコアは100点満点で、90点以上が「良好」です。まずは赤い項目（スコアが低い部分）から改善していきましょう。オンラインツール「PageSpeed Insights」（pagespeed.web.dev）でも同様の計測ができます。
計測のポイント：
- モバイルとデスクトップの両方で計測する：モバイルの方がスコアが低くなりやすい
- シークレットモードで計測する：拡張機能の影響を排除できる
- 改善前後で比較する：変更の効果を数値で確認する
🔗 画像の最適化・レスポンシブ画像・フォントの読み込み・開発者ツール・レスポンシブデザインも参考にしてください。
まとめ
- ✅ 画像をWebP形式にして
loading="lazy"を使う - ✅
width・heightを指定してレイアウトシフトを防ぐ - ✅ JSは
defer属性でHTMLの解析をブロックしない - ✅ PageSpeed Insightsで定期的に計測する
表示速度の改善はユーザー体験とSEOの両方に効果があります。まずはPageSpeed Insightsで現状のスコアを確認し、画像の最適化から始めるのがおすすめです。画像をWebP形式に変換するだけでファイルサイズが30%以上削減できることもあります。少しずつ改善していきましょう。完璧を目指す必要はありません。スコアが90点以上になれば十分です。改善の効果は数値で確認できるので、達成感を感じやすいのもパフォーマンス改善の良いところです。自分のポートフォリオサイトで実践してみましょう。きっと効果を実感できます。
初心者が今すぐできる改善チェックリスト
以下のチェックリストを上から順に確認していきましょう。1つ改善するだけでもスコアが上がります。
- 画像にwidth・heightを指定しているか？ — CLSの改善に直結します
- 画像にloading="lazy"をつけているか？ — ファーストビュー以外の画像に指定
- scriptタグにdeferをつけているか？ — HTMLの解析をブロックしない
- 使っていないCSSを削除したか？ — ファイルサイズの削減
- 画像をWebP形式に変換したか？ — 最も効果が大きい改善
これらは特別なツールや知識がなくても、HTMLを書き換えるだけで対応できます。まずは自分のサイトで1つずつ試してみましょう。改善前後でPageSpeed Insightsのスコアを比較すると、効果が数値で確認できて達成感があります。1つ改善するたびにスコアが上がるのを見ると、もっと改善したくなるはずです。表示速度の改善は、プログラミングスキルの中でも特に実践的で、就職活動でもアピールポイントになります。「PageSpeed Insightsで90点以上を達成しました」と言えると、技術力の証明になります。自分のポートフォリオサイトで実践して、スコアのスクリーンショットを残しておきましょう。改善の過程を記録しておくと、自分の成長が可視化されてモチベーションにもなります。Webパフォーマンスの知識は、どんなWeb開発の現場でも求められる実践的なスキルです。今日から1つずつ改善を始めてみましょう。小さな改善の積み重ねが、大きな成果につながります。まずはPageSpeed Insightsでスコアを確認するところから始めてください。きっと改善のヒントが見つかるはずです。数値で成果が見えるのがパフォーマンス改善の魅力です。