2026年7月7日

WordPressのCSSのwill-changeを正しく使う方法

テーマ・デザイン

はじめに

ウェブページのパフォーマンス向上は、ユーザー体験を改善し、SEO効果にも寄与します。CSSプロパティ will-change は、要素がアニメーションやスクロールなどの操作で変化する可能性がある場合に、ブラウザがその要素に対して最適な描画処理を行うことを通知します。

本記事では、WordPressテーマ開発において will-change プロパティを正しく使用することで、サイトの反応速度と視覚効果の向上につなげる手法について説明します。また、その使用方法や注意点も合わせて紹介します。

症状・背景

このテーマが必要になる主な場面:

アニメーションが遅延する
スクロールアニメーションが滑らかでない
モーダルウィンドウの表示が遅い
画像やビデオのロード時間が長い

手順・設定方法

ステップ1: ウェブページ要素にwill-changeプロパティを適用する

# テーマのスタイルシート（style.css）を開く
nano wp-content/themes/your-theme/style.css

# アニメーションが適用される要素にwill-changeプロパティを追加
.your-element {
  will-change: transform, opacity;
}

ステップ2: モーダルウィンドウの表示速度向上

# モーダルウィンドウを定義するCSSセレクタにwill-changeプロパティを追加
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  display: none;
  will-change: opacity;
}

# モーダルウィンドウの表示を制御するJavaScriptスクリプトを開く
nano wp-content/themes/your-theme/js/modal.js

# モーダルウィンドウが表示されたときにopacityプロパティを適用し、will-changeプロパティを使用して透明度の変更を通知
document.querySelector('.modal').style.opacity = '1';

ステップ3: 画像やビデオのロード時間短縮

# 画像やビデオ要素にwill-changeプロパティを追加
img.lazyload, video.lazyload {
  opacity: 0;
  will-change: opacity;
}

# ビヘイビアスクリプトを開く
nano wp-content/themes/your-theme/js/lazy-load.js

# データがロードされたときに画像やビデオのopacityを変更し、will-changeプロパティを使用して透明度の変化を通知
document.querySelectorAll('img.lazyload, video.lazyload').forEach(function(element) {
  element.style.opacity = '1';
});

ステップ4: パフォーマンス監視とチューニング

# Google Lighthouseを使ってサイトパフォーマンスを評価する
npx lighthouse http://localhost/your-site --chrome-path=/usr/bin/chromium-browser

# レポートを開いて、will-changeプロパティの影響を確認し、必要に応じて調整を行う

注意事項

will-change プロパティは高頻度で描画処理を行います。過度な使用はCPUやGPUの負担につながる可能性があります。
will-change を適用する要素が多いと、ブラウザの描画効率が低下することがあります。必要最小限の要素だけに適用することを推奨します。
セキュリティ上の注意: will-changeプロパティ自体は安全ですが、適切に使用しない場合や頻繁な変更がユーザー体験を悪化させる可能性があります。
パフォーマンス/運用上の注意: will-change を適用した要素の描画効率を定期的に確認し、必要に応じて最適化を行うことを忘れないでください。

まとめ

1. アニメーション要素: アニメーションが適用される要素には will-change: transform, opacity; などのプロパティを指定します。

2. モーダルウィンドウ表示速度: モーダルウィンドウに will-change: opacity; を指定し、JavaScriptで透明度の変更を通知します。

3. 画像やビデオロード時間: 画像やビデオ要素に will-change: opacity; を指定し、データがロードされたときに透明度の変更を通知します。

4. パフォーマンス監視: Google Lighthouseなどのツールを利用して定期的にサイトパフォーマンスを評価し、必要に応じて調整を行います。

Post Views: 1