画像やiframeの遅延読み込み機能(レイジーロード)について

ver20181101で遅延読み込み機能(レイジーロード)を実装しました。

これは画像とiframe(YouTubeなど)を後で読み込むことでページ表示の高速化を図る機能です。

画像を後から読み込むのでGoogle Botに認識されずにSEO的に良くないなどの弊害もあったため実装をこれまで見送ってきましたが、海外SEO情報さんのブログで解決策が紹介されていたので、それをヒントに実装した形です。

今回はこの4536のレイジーロードの仕様についてお話しします。

レイジーロードの仕様

レイジーロード機能をオンにすると以下のように動作します。

  1. アイキャッチ画像と計測タグ以外の画像を透過画像(base64)に変換して専用の属性を付与
  2. 1の画像の下にnoscriptタグで囲んだ本来の画像を配置(Botにも認識してもらう)
  3. 表示されるまではローディング画像(base64のgif画像)を表示
  4. 表示領域が画像近くになると本来の画像を読み込んで表示

ユーザーにレイジーロードを実感させないように気持ち早めに画像を表示するようにしています。

【追記】Intersection observer APIを使った仕様に変更しました。

ifameもレイジーロード

画像の他にYouTubeなどの埋め込みに使われるiframeも遅延読み込みに対応しています。

iframeはnoscript不要かなとも思いましたが、現時点では画像と同じ仕様にしています。

検索結果への影響(SEO事情)

当サイトと別の管理サイトでレイジーロード機能をオンにして運営していますが、今のところ悪影響はありません。

理論上は、表示速度が向上して、それに伴いユーザー体験も向上するので、SEO的には良い影響があると考えていますが、画像SEOを強く意識していたり、レイジーロードに抵抗がある場合は無理に使わなくていいと思います。

ただ、画像が多いページやYouTube動画をたくさん埋め込んでいるページなどは目に見えて表示速度がアップするので、少しでも表示速度をアップさせたい場合は活用してみてください。

【追記】「サイトマップに画像を含める」ことが最善策だと考えています。

設定はテーマカスタマイザーで

レイジーロードはテーマカスタマイザー(外観→カスタマイズ)のメディア関連メニューでオンオフできます。

オンにするとどのように遅延読み込みされるのかプレビュー画面で確認できるので、確かめてみてください。


カテゴリー:4536マニュアル

シェフ

WordPressテーマ「4536」の開発者。ご要望やご質問があればコメントやフォーラムまでどうぞ。