W3 Total Cache 設定ガイド

User Experience|画像の遅延読み込み

W3 Total Cache(以下 W3TC)のUser Experienceメニューでは、Lszy Loading(画像の遅延読み込み)の処理方法と除外に関する設定をおこないます。

初期値で一般的なWebサイト向けの設定になっているので基本的には変更する必要はありません。

Lazy Loading

ここでの設定は、General Settingsで User Experience > Lazy Loading を有効化している場合のみ機能します。

Process HTML image tags

チェックを入れるとWordPressが出力するページのHTMLから画像に関する imgタグを読み取って遅延読み込みを処理します。ONのままにしておきます。

Process background images

チェックを入れるとCSSのbackgroundプロパティで指定した背景画像にも遅延読み込みを適用します。背景をページの全面に使用している場合などでタイムラグが気になるなど、特別な理由がない限りこちらもONのままで良いでしょう。

Exclude words

遅延読み込み処理をさせたくない画像について imgタグ内に含まれる、キーワード(属性・属性値・class・ファイル名)を指定します。

一般に除外されることの多いものについては初期値で設定されているので、必要に応じてこの欄を追加または削除して調整してください。本記事投稿日現在の初期値は以下のとおりです(クリックして展開します)。

Exclude words の初期値

avia-bg-style-fixed
data-bgposition=
data-envira-src=
data-large_image=
data-lazy-original=
data-lazy-src=
data-lazyload=
data-lazysrc=
data-no-lazy=
data-src=
data-srcset=
fullurl=
lazy-slider-img=
loading="eager"
no-lazy
rev-slidebg
skip-lazy
soliloquy-image
swatch-img
w3-total-cache
woocommerce/assets/images/placeholder.png
wpcf7_captcha
Script Embed method

遅延処理用のスクリプトの配置と動作をドロップダウンメニューから選択します。

  • async
    遅延読み込み用の外部スクリプト(.jsファイル)を内に配置して非同期で読み込みます(初期値・推奨)。

  • sync (to head)
    遅延読み込み用の外部スクリプトを内に配置します。画像の遅延読み込みは可能ですが、スクリプト自体のレンダリングブロックが発生する可能性があります。

  • inline
    遅延読み込み用のスクリプトを直前にインラインで挿入します。レンダリングブロックは発生しないものの、遅延読み込み用のJSファイルにブラウザキャッシュを効かせることができないので、Webサイトのページ数が少ない場合以外は推奨されません。