はじめに
WordPressのトップページで4枚のPNG画像を使ったヒーロースライダーを運用していました。表示はきれいでしたが、画像だけで合計約7.8MBあり、モバイル表示の負荷が高い状態でした。
今回、見た目をほぼ維持したままWebPへ変換し、合計約316KBまで削減しました。あわせて、LCP候補の先読み、遅延読み込み、画像サイズ指定、スライドのアクセシビリティ対応まで実装しました。
改善前後
| 項目 | 改善前 | 改善後 |
|---|---|---|
| 画像形式 | PNG | WebP |
| 4枚の合計 | 約7.8MB | 約316KB |
| 削減率 | - | 約96% |
| 画像サイズ属性 | なし | width / height を指定 |
| 読み込み | 一律 | 1枚目 eager、以降 lazy |
| スライド状態 | 見た目のみ | aria-hidden と同期 |
1. WebPへ変換する
元画像は1672×941pxでした。表示領域を考慮して1440×810pxへ縮小し、WebPで書き出しました。
重要なのは、ファイルサイズだけで判断せず、文字や工具、輪郭が崩れていないか目視確認することです。
2. WordPressの本文HTMLで画像URLを置換する
スライダーが固定ページ本文に含まれていたため、the_content フィルターで対象画像だけを置換しました。
function slider_asset_map() {
$base = content_url('/uploads/2026/10/');
return [
'slider-electrical-work.png' => $base . 'slider-electrical-work.webp',
'slider-air-conditioner.png' => $base . 'slider-air-conditioner.webp',
'slider-security-lighting.png' => $base . 'slider-security-lighting.webp',
'slider-pc-web.png' => $base . 'slider-pc-web.webp',
];
}
置換対象をスライダーの figure に限定し、他の記事画像へ影響しないようにします。
3. LCP候補だけを優先する
最初の1枚はファーストビューで表示されるため、次の属性を付けました。
<img
src="slider-electrical-work.webp"
width="1440"
height="810"
loading="eager"
fetchpriority="high"
decoding="async"
alt="一般電気工事のイメージ"
>
2枚目以降は loading="lazy" と fetchpriority="low" にします。すべてを優先読込すると、かえって初期表示を圧迫します。
さらに wp_head で最初の画像だけをpreloadしました。
echo '<link rel="preload" as="image" type="image/webp" href="' . esc_url($first_image) . '" fetchpriority="high">';
4. スライドの状態をaria-hiddenへ同期する
非表示スライドまで読み上げられないよう、既存の is-active クラスを監視します。
const slides = [...document.querySelectorAll('.nagasu-slide')];
const sync = () => slides.forEach(slide => {
slide.setAttribute(
'aria-hidden',
slide.classList.contains('is-active') ? 'false' : 'true'
);
});
sync();
const observer = new MutationObserver(sync);
slides.forEach(slide => observer.observe(slide, {
attributes: true,
attributeFilter: ['class']
}));
既存スライダーの切替処理を書き換えず、状態だけ追従できるのが利点です。
5. レスポンシブ表示を自動確認する
Playwrightで1440pxと390pxを確認しました。
document.documentElement.scrollWidth === innerWidth- 画像4枚がWebPになっている
- 全画像の
completeがtrue - 最初の画像だけが
eager/high - 2枚目以降が
lazy/low - クリック後に
aria-hiddenが切り替わる
画面幅だけでなく、実際の画像URL・読込状態・アクセシビリティ属性までテストすると、見た目だけでは見落とす問題を拾えます。
まとめ
画像最適化は「WebPへ変換して終わり」ではありません。
- 適切な表示サイズへ縮小
- LCP候補だけを優先
- width / heightでレイアウトを安定
- 非表示スライドの読み上げを制御
- PC・スマホで横はみ出しと操作を検証
この5点をセットで行うことで、表示速度・安定性・操作性をまとめて改善できました。