【WordPress】5.5以降でimgタグに自動付与される属性「loading=”lazy”」を出力しない方法

WordPress2021年8月25日

WordPress5.5以降、imgタグに属性「loading=”lazy”」が付与されるようになりました。Lazy loadingをお手軽に実装する便利なものですが、既に別の仕組みでLazy loadingを実装している場合や、AMPページを用意しているとエラーにの原因になります。そこで本記事では、「loading=”lazy”」が自動付与されないようにする方法をご紹介したいと思います。

ところでLazy loadingって何？

画像がビューポート（画面領域）外にある時はロードを実行せず、ビューポートに近づいた時に画像のロードを開始するという「画面表示を高速化する仕組み」のことです。ブラウザは通常HTMLに記述されているimgタグの画像ファイルを全てロードしますが、これはどんなに長いページでかなりスクロールしないと視認できない下部の画像であっても、全てロードします。これはネットワーク的にもサイトパフォーマンス的にもマイナス要因で、要は視認している画面領域の画像が表示されていればユーザーにとってはよい話なので、そこでLazy Loadによる画像の遅延ロードが役に立つことになります。

Javascriptライブラリで実装する方法がよく知られていますが、実はライブラリを読み込ませなくてもloading属性さえ付与すれば、Chrome・Firefox・Edgeは既に標準機能サポートされているので、その恩恵を得ることは実は簡単だったりします。

※2021年9月5日現在の情報です（Safariは未サポート）
※ちなみにloading属性はiframe要素にも使用可能です

loading属性の値として設定できるのは以下の3つとなります。

値	説明
auto	デフォルト値。画像の読み込み方法はブラウザの実装に依存
lazy	Lazy loadingを有効可
eager	画像をビューポート（画面領域）外でも即時ロード

「loading=”lazy”」を自動出力させない方法

記事のタイトルの通りですが、WordPress5.5以降ではこの属性が自動付与されるようになりました。実は最初これに気づきませんでして、Google Search ConsoleでAMPページのエラーが出ていることで「ん？なんだこの属性は？こんなの付与した覚えないぞ？」と気づきました次第でした。

出力された時のソース例

<img loading="lazy" src="/images/blog/2021/08/10_01_01.jpg" alt="" width="660" height="450">

AMPページにエラーが発生するのは非常に困るので、「loading=”lazy”」をいったん削除する対応を試みることにしました。前置きが長くなりましたが、これを解決する方法は以下です。

function.phpにソースを追加

function.phpに以下のソースコードを追加記述します。

/*====================================================
WordPress 5.5のlazy-loading『loading="lazy"』挿入の無効化
=====================================================*/
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

解説

まあ1行記述するだけなので解説するほどのものでもないのですが、WordPressの記事出力フィルターとして一つ追加しています。「wp_lazy_loading_enabled」の値を「return_false」とすることで、この出力機能がOFFになるということですね。これで以下のように「loading="lazy"」が付与されない形でimgタグが出力されるようになります。

<img src="/images/blog/2021/08/10_01_01.jpg" alt="" width="660" height="450">

まとめ

本来であればサイトパフォーマンスを向上させるために、Lazy loadingは積極的に取り入れるべきものかと思います。ですが今回当サイトではAMPページのエラー解消を優先したかったので、いったんLazy loadingはOFFにする方法を実施・ご紹介させていただきました。

ちょっと時間を見て通常のページでは属性を付与、AMPページでは属性を付与しないといった出し分けができるか検討してみようかなと思います。WordPressで「loading=”lazy”」が自動出力されてお困りの方に、本記事がご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。