スマートフォン向けに縦に長い、画像がたくさんあるサイトを構築する必要があったのですが、ロードがとても遅いんですよね。
4G回線などでみられる場合も考えると、ロードが遅いのは致命的です。
画像が多いので、画像を遅延読み込みさせるのが効果的と思われます。
WordPressでの構築でしたので、Lazy Loadプラグインを入れてみました。
・・・一部画像が遅延読み込みしません。
どうしたことでしょうか。
遅延読み込みしない画像を調べてみたところ、imgタグにsrcset属性とsizes属性が入っています。
これは、画面のサイズによって読み込む画像をブラウザが判断するためのもので、レスポンシブなサイトでは非常に便利なものです。
WordPressでは4.4から、メディアから追加された画像について、この属性が自動的に出力されるようになっています。
で、この属性があると、src属性からではなく、srcset属性から画像が読み込まれるため、src属性のみを操作する遅延読み込みライブラリでは全く遅延しないのです。
srcset属性に対応した遅延読み込みプラグインはないのでしょうか。
あるんです。
あるんですけど、気づかずに作ってしまいました。
なるべく高速に動作することが目的でしたので、jQueryプラグインとして有名でエフェクトも設定できるLazy Loadを使わず、より高速な動作を目指したunveil.jsを使い、srcset属性に対応するようにカスタマイズしています。
ver1.1では
・さらなる高速動作
・投稿コンテンツ内のみの遅延読み込み⇒ページ全体を遅延読み込み可能に
（※現バージョンでも画像のsrc属性をdata-srcに、srcset属性をdata-srcsetに変更することで、どの画像でも遅延読み込みさせることが可能です。）
・デフォルトのローディング画像をセット可能に
を目指しています。
効率的な遅延読み込みプラグインをお探しのあなた、ぜひお使いください。
https://munyagu.com/plugins/clazy-load/