ルクセリタスでLazyRoad機能を設定・Google対策も

ルクセリタス・使い方

はじめに

ルクセリタスには元々、画像遅延読み込み(LazyRoad)機能があります。

2020年8月リリースのWordPress5.5から、LazyRoad機能が実装され、自動で画像の遅延読み込みがされますが、完璧(すべての画像に対応)ではないようです。

WordPress5.5~ 画像ファイル(img と iframe)のタグに「loading=”lazy”」が自動挿入さる。

 

ルクセリタスでLazyRoad設定

Luxeritas→カスタマイズ→LazyRoadタブ

ルクセリタス・カスタマイズ

 

ルクセリタス・LazyRoad

Ver.Luxeritas 3.14.2~ 3択に。(詳細は 開発者さまのブログ参照

初期値は「Native Lazyload ( WP 5.5 or later )」

 

この初期値のままで自動で画像遅延読み込み処理がされます。

 

Native Lazyload

WordPress5.5以上で対応。
細かい設定は不可。
若干、高速。

 

loading="lazy" が挿入される事を確認
  • 記事上アイキャッチ画像
  • 記事内の挿入画像
  • カルーセルスライダーのアイキャッチ
  • 新着記事ウィジェットのサムネイル(ルクセリタスオリジナル)
  • 画像ウィジェットのサムネイル
  • ギャラリーウィジェットのサムネイル
  • 関連記事のサムネイル
  • Next / Prev ナビゲーションのサムネイル
  • コメントのアバター画像アイコン

 

遅延読み込み対象外のもの

ブログカードのアイキャッチサムネイル

ブログカード

 

 

Intersection Observer

WordPress Ver. などの前提条件なし
細かい設定が可能。

ルクセリタス・LazyRoad

 

「Intersection Observer」を選択した場合は、読み込みの遅延を無効にしたいものがある場合以外、上記項目すべてにチェックを入れて保存

 

これでブログカードのサムネイルも遅延読み込みが適用されます。
当サイトの場合は、「Google Serch Console」でブログカードの画像も遅延読み込みにしろ・・との案内が出たので、「Intersection Observer」にしています。

 

 

注意点

サイドバーやフッターなどに、カスタムHTMLウィジェットで画像を設定している場合は、

ソースコードに手書きで「loading="lazy"」を追記しておく事。

 

<img src="xxxx.png" alt="" width="xxpx" height="xxpx" loading="lazy">

 

関連記事