WordPress管理画面での画像キャッシュ対策〜パフォーマンスの落とし穴を学ぶ〜

はじめに

WordPressで画像を編集する際、「最新の画像がすぐに反映されない」というイライラした経験はありませんか？私も同じ悩みを抱え、ある解決策を試みましたが、結果的にそれは大きな間違いでした。

// 2025-01-07 WordPressの編集画面で画像キャッシュを使わない
function prevent_image_cache_in_admin() {
    if (!is_admin()) {
        return;
    }
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // メディアボタンクリック時の処理
        document.querySelectorAll('.add_media').forEach(button => {
            button.addEventListener('click', refreshImageUrls);
        });

        // クリップボードからのペースト時の処理
        document.addEventListener('paste', function(e) {
            setTimeout(refreshImageUrls, 1000); // ペースト完了後に実行
        });

        // エディタ内の画像更新処理
        function refreshImageUrls() {
            setTimeout(function() {
                document.querySelectorAll('.attachment img, .wp-block-image img').forEach(img => {
                    if (img.src && !img.src.includes('?v=')) {
                        img.src = img.src + '?v=' + Date.now();
                    }
                });
            }, 500);
        }

        // DOM変更の監視（動的に追加される画像用）
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    refreshImageUrls();
                }
            });
        });

        // エディタ領域の監視を開始
        const editor = document.querySelector('#editor, #content');
        if (editor) {
            observer.observe(editor, {
                childList: true,
                subtree: true
            });
        }
    });
    </script>
    <?php
}
add_action('admin_footer', 'prevent_image_cache_in_admin');Code language: JavaScript (javascript)

キャッシュの問題と最初の対処法

ブラウザには「キャッシュ」と呼ばれる仕組みがあります。これは、同じ画像を何度も読み込まないよう、一度読み込んだ画像を一時的に保存する仕組みです。これは通常、ウェブサイトの読み込み速度を上げるために役立ちますが、画像編集時には邪魔になることがあります。

最初に試みたコード

私は、管理画面で画像を編集したらすぐに最新版を表示させるため、JavaScriptを使ったユニークな解決策を考えました。具体的には、画像のURLに現在の時刻を追加して、ブラウザに新しい画像として認識させるコードです。

function refreshImageUrls() {
    document.querySelectorAll('.attachment img, .wp-block-image img').forEach(img => {
        if (img.src && !img.src.includes('?v=')) {
            img.src = img.src + '?v=' + Date.now();
        }
    });
}
Code language: JavaScript (javascript)

パフォーマンスの落とし穴

このコードには、致命的な問題がありました。具体的には：

画面上のすべての画像を常に監視する
画像のURLを頻繁に変更する
不要なスクリプト処理を繰り返し実行する

これらの処理は、管理画面の動作を著しく遅くする可能性がありました。

なぜ失敗したのか

コンピューターの処理能力には限りがあります。私のコードは、わずかな画像変更のために、大量の無駄な処理を発生させていたのです。これは、自動車で短い距離を移動するのに大型トラックを使うようなものでした。

より良い解決策

実際には、以下のような方法でキャッシュの問題に対処できます：

ブラウザの開発者ツールでハードリロードを行う
サーバー側でのキャッシュ制御
キャッシュ管理プラグインの利用

結論

プログラミングでは、「シンプルであること」が最も重要です。過剰な解決策は、かえって問題を複雑にしてしまうことがあるのです。