| 1 |
WebP変換 |
ヒーロースライダー画像のWebP/AVIF変換 + <picture>要素対応
squoosh・sharp・imagemin 等でWebP変換し、<picture>タグでAVIF→WebP→JPGのフォールバックを設定する。
<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><img src="hero.jpg" alt="..."></picture>
|
🔴 高 |
LCP -1〜2秒
転送量 -40% |
| 2 |
Lazy Load |
スクロール外画像への loading="lazy" 属性付与
ファーストビュー以外の全画像（case1.jpg、case2.jpg、guide.png、fb_img_02/03.png）に loading="lazy" を付与。HTMLの属性変更のみで実装可能。
<img src="case1.jpg" loading="lazy" width="600" height="400" alt="...">
|
🔴 高 |
初期ロード
-50〜70% |
| 3 |
Lazy Load |
LCP画像への fetchpriority="high" + preload 設定
スライダー1枚目（karioki_house7.jpg）のみ fetchpriority="high" を付与し、<head>に preload リンクを追加。他スライド画像はlazy読み込みにする。
<link rel="preload" as="image" href="karioki_house7.webp" type="image/webp">
|
🔴 高 |
LCP -1〜2秒 |
| 4 |
CSS最適化 |
CSSミニファイ + Critical CSS インライン化
本番環境のCSSを cssnano や clean-css でミニファイし、ファーストビューに必要なCritical CSSのみをHTMLにインライン化。残りのCSSは非同期で読み込む。
|
🟠 中 |
FCP -0.5〜1秒 |
| 5 |
JS最適化 |
JSミニファイ + 未使用コードの除去（Tree Shaking）
webpack や Rollup を使用してJSをバンドル・ミニファイし、スライダーライブラリなど使用機能のみを取り込む。defer 属性で非同期化する。
|
🟠 中 |
JS転送量
-20〜40% |
| 6 |
キャッシュ |
静的アセットへの長期キャッシュ設定 + コンテンツハッシュ
サーバー設定（.htaccess / nginx.conf）で画像・CSS・JSに1年のキャッシュを設定。CSS/JSファイル名にビルドハッシュを付与して、更新時のキャッシュバスティングを実現する。
# .htaccess例
Header set Cache-Control "max-age=31536000, public, immutable"
|
🟠 中 |
再訪問時
ロード -80% |
| 7 |
画像リサイズ |
srcset / sizes による解像度別画像の提供
モバイル（~375px）・タブレット（~768px）・PC（~1280px）向けに適切にリサイズした画像を用意し、srcset と sizes 属性で最適解像度を自動選択させる。
|
🟠 中 |
モバイル転送量
-40〜60% |
| 8 |
SVG |
SVGアイコンのスプライト化 + SVGO最適化
phone-icon、check-icon、question、answer等の複数SVGを1つのスプライトファイルにまとめ、SVGOで最適化する。HTTPリクエスト数を削減できる。
|
🟢 低 |
リクエスト数
削減 |
| 9 |
圧縮 |
Brotli圧縮の有効化（gzipからの移行）
サーバーでBrotliエンコードを有効化し、HTML・CSS・JSをgzip比15〜20%追加圧縮する。対応ブラウザ（Chrome/Firefox/Safari）には自動的にBrotliで配信される。
|
🟢 低 |
転送量
-15〜20% |