なぜ速度が大事か
半数以上の人が3秒以上かかるサイトを閉じる。訪問者全員が最新スマホと高速 Wi-Fi じゃない——電車の古いスマホも。プロジェクトボスは彼らも考える。
朗報：最大の速度向上は 画像 だけ——スマホの写真は5MBも普通；サイトにはその10分の1で十分。
見てみよう：Lighthouse で計測
Lighthouse は Chrome 内蔵：
- サイトを開く（ライブ版、localhost じゃない）。
- F12 → Lighthouse タブ → Analyze page load。
- 0–100のスコア（パフォーマンス、アクセシビリティ、SEO）——最重要は 具体的な改善リスト。
よくある tips と対処：
| Lighthouse tip | 対処 |
|---|---|
| Properly size images | 画像を縮小（下参照） |
| Serve images in next-gen formats | WebP で保存 |
| Image elements do not have width/height | width と height 属性追加 |
| Links do not have descriptive text | 「click here」ではなく行き先を |
画像を縮小
- サイズ：サイトは幅1200px（ヒーロー）か600px（普通）程度。任意のエディタ、オンライン（squoosh.app）でも。
- 形式：WebP は同品質で JPG の約3分の1。
- Lazy loading：折りたたみ下の画像はスクロールで初めて読み込み：
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />やってみよう 💪
- Lighthouse で計測、パフォーマンススコアを記録——スタートライン。
- 最大3枚を見つける（F12 → Network → Size でソート）。
- 縮小（サイズ + WebP）、上以外の画像に
loading="lazy"。 - 再計測、スコア比較。
LAUNCH.mdに：before → after。 - ボーナス：Wi-Fi オフでスマホテスト。どう？
💡
100点を期待しない。 大サイトでも70–90。大事なのは進歩：60→85は訪問者が実感する勝利。
✅
確認： before/after の Lighthouse スコア。画像はリサイズ、WebP、lazy loading。モバイルで明らかに速い。
このレッスンのまとめ
- 速度 = 訪問者が残る。3秒が限界。
- Lighthouse が何を直すか正確に教える。
- 最大のレバー：小さい画像（サイズ、WebP、lazy loading）。
© 2026 Ing. Martin Polak / AlgoRhino · コンテンツ利用規約