みなさんこんにちは、ガノー（Twitter:Ganohr）です。
以前ホットリンク対策として、悪質なサイトからホットリンクされた画像に404や403を返却してしまうと、実際に自サイトへ訪問された際にその画像に対するステータスコードがキャッシュされてしまうことで、自サイト内での画像が表示できない不具合とその対処コードを共有しました。
画像のホットリンク対策決定版!直リンクは404,承認済みサイトは通常通り表示!不審なサイトは画像差し替え!自サイトでの正常表示も実現!ホットリンクとはよく直リンクと表現され他サーバのコンテンツを抜き取り配信する卑劣行為.承認済みサイトは通常通り表示/不審サイトは画像差し替え/且つ自サイト&有用なボットで正常表示を実現 ... 続きを読む
これと似た現象で『W3 Total Cache』を有効化したサイトで、Lazy Loadingオプションを利用している際に、誤ったステータスコードがキャッシュされている画像の読み込みが失敗してしまう現象を発見しました。
今回は先述の内容を流用し、対処するコードを共有します。
W3 Total CacheSearch Engine (SEO) & Performance Optimization (WPO) via caching. Integrated caching: CDN, Page, Minify, Object, Fragment, Database support. ... 外部サイトへアクセス
wordpress.orgW3 Total CacheのLazy Loadingを対処するコード
setInterval(
() => {
const lazyErrors = document.querySelectorAll("img.lazy.error");
if (lazyErrors.length === 0) {
return;
}
lazyErrors.forEach(
e => {
e.src += "?cachecontroll=1";
e.classList.remove("error");
e.classList.add("loaded");
}
)
}, 1000
);今回のコードでは、1秒おきに『W3 Total Cache』のLazy Loadingがimgタグへ付与するクラス名lazy.errorがある要素を全てピックアップし、そのsrc属性に?cachecontroll=1というオプションパラメータを付与することで、誤ったキャッシュを迂回して画像をリロードさせます。
また、そのリロードの結果にかかわらず、クラス名からerrorを除去し、Lazy Loading成功を示すクラス名loadedを付与することで、何度も同じ画像のリロードを試さないよう配慮しています。
このコードであれば、必要十分なリソースでLazy Loadingにてエラーの起こったリソースを対処できます。
最後に
現在多くのブラウザがimgタグ自体にloading='lazy'属性によるLazy Loadingに対応し、decoding='async'によるブロッキング解消機能を有しています。
今後はW3 Total Cacheの独自実装のLazy Loadingを採用するパターンは少なくなってくると思いますが、いざという時にこの記事が役に立てば幸いです。
参考になったら、SNSへシェアしたり、ブックマークしてくだされば励みになります。
以上、ガノー（Twitter:Ganohr）でした！
