[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）

ブログを冊子印刷にして配布しているのですが、一部の画像が印刷されていないことがあります。
画像の遅延読込み で失敗しているようです。

WordPress によって自動的に付加される
「loading=”lazy”」「decoding=”async”」
を消すよう、functions.php を編集しました。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );
add_filter('wp_img_tag_add_decoding_attr', '__return_false');

[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）

WordPress本体でも、画像遅延読込みに対応するようになっていたんだね。

1. WordPressの更新で遅延読込みが追加されている

ブログを印刷しようと思ったときに、画像が白くなってしまうことがありました。
これは、画像の遅延読込みで後回しになってしまっているからです。

これまでは、いちいち下にスクロールして確認してから印刷するようにしていたのですが、やはり手間です。
印刷時には画像をそのまま表示できるようにしたいもの。

最近のWordPressは、アップデートによってデフォルトで画像の遅延読込み機能が追加されています。

WordPress 5.5から、imgタグに「loading=”lazy”」が自動で付加される¹
WordPress 6.1から、imgタグに「decoding=”async”」が自動で付加される²

目次に戻る

1-1. 「Lazy-load（遅延読込み）」を無効化する

Lazy-load（遅延読込み）は、ページ内の画像など重い要素の読込みを後回しにする仕組みです。
ページをスクロールして表示場所になったときに読込みます。

Lazy-loadとはサイト内の特定のコンテンツをページ読み込み時には読み込ませずにスクロールして特定のコンテンツ部分に来た時に初めてそのコンテンツを読み込ませる技術です。
プラグイン不要！ワードプレスがデフォルトでLazy-load（遅延読込）をサポート | 株式会社プランニングA

重い処理を後回しにすることで、ページ表示待ちをとりあえず終わらせることができます。

以前は遅延読込みをするには、プラグインを使って Javascript で動的に処理することが多かったです。

私も一時期サイト表示速度を上げるため、Cocoonテーマの画像遅延読込みを使ったことがあります。
しかし、印刷の失敗が多いため、オフにしていたはずです。

いつの間にかまた有効になってしまっていたようですね。

最近のブラウザでは img タグの loading属性に対応するようになり、”lazy” を指定するだけで遅延読込みにできるようになっています。
WordPressも1枚目以外³の画像にデフォルトで「loading=”lazy”」を追加するようになったのです。

WordPressが自動で付加する「loading=”lazy”」を消すには、functions.php に以下のコードを追加します⁴。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

wp_lazy_loading_enabled（WordPress遅延読込みの有効化）を false に設定しています。

遅延したくない場合は

loading=”eager”

目次に戻る

1-2. 「async decoding（非同期デコード）」を無効化する

lazy-loadingを無効にしたはずなのに、まだ印刷時に画像が消えているよ。

もう一つ、画像の表示を遅らせる機能に「非同期デコード」もあります。
こちらは読込んだ画像のデコード（解読）処理を制御しています。

loading属性は「画像をいつ読み込むか？」という画像の読み込みのタイミングを担当しますが、decoding属性は「画像をいつデコードするか？」という画像のデコードのタイミングを担当します。
decoding=”async”の使い方とloading=”lazy”との違いのまとめ

自分で設定したつもりはないのですが、画像に「decoding=”async”」を付加されていました。

lazy-loadingだけでなくて、デコードの非同期処理も気にしないといけないんだね。

これを無効にするには、以下のコードを追加します⁵。

add_filter('wp_img_tag_add_decoding_attr', '__return_false');

wp_img_tag_add_decoding_attr（WordPress画像タグにデコーディング属性を追加）を false に設定しています。

これで、記事を印刷するときにいちいちページ下までスクロールする必要がなくなりました。

目次に戻る

2. WordPressプラグインも要チェック

画像遅延読込みは、一か所を修正しても無効化できないことがあります。
そのほかテーマやプラグインでも採用されていることがあるからです。

印刷時に表示されなかった画像タグを見ると、

data-lazyloaded=”1″
class=”litespeed-loaded”

の2つの属性が付加されていました。

Litespeed Cacheプラグインの「画像遅延読込み」が有効になっていたようです。

私の使っているテーマ・プラグインでは、3か所に設定場所があったので、いずれも無効にしました。

そのほか、画像遅延読込みに関係するプラグイン

Cocoonテーマの「高速化」
Jetpackプラグインの「設定」ー「パフォーマンス」
Litespeed Cacheプラグイン

さしあたり Litespeed Cacheのプラグインを無効化しました。

もう少し、細かく切り分ければ、うまく活用できるはずです……

目次に戻る

3. 今後の課題（印刷とディスプレイの場合分け）

本来は印刷時だけ遅延読み込みを無効化できればいいのですが、とりあえず functions.php でまるまる無効化します。

上のコードを、印刷時のページ読み込み時にだけ適用できる方法を探してみます。

こちらもどうぞ。

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。なんか見た目にカラフルでいいですよね。 cocoonでコードがハイライトしないところが何故かうまく表示されません。まずは、表示されたコードブロックを見てみてください。このように、コードブロックがあるのにjavascriptの色分けがされていません。まずはHTMLを検証してクラスを確認する検証でHTMLを見てみると、ちゃんとjavasc...

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。遅延表示による画面のガタツキ検索バーには、Googleのカスタム検索を利用しています。サイドバーの検索ボックスの遅延表示でズレるこのように、ウェブページの画面が、後から表示される要素によってズレることを「CLS（Cumulative Layout Shift：累積的な割付の変移）」といいます。 div要素のheight属性ではうまくいかずスクリプトが非同期処理で読み込...

ブログの印刷時のスタイルを変更する【@media print】

スタイルシートは表示画面だけではなく、印刷時のスタイルを指定することもできます。今回は、先日（2020年6月1日）更新した。追加スタイルシートの中身をまとめておきます。追加CSSの中身このブログは冊子印刷でA4に2ページ分印刷したときに、文字サイズなど読みやすいように編集しています。そのまま印刷すると文字が大きすぎるかもしれません。このホームページではちょこちょこっとしたスタイルはWordPressの追加CSSに記述しています。今回、少し整理したので、まずはずらっとC...

アンカー広告が印刷に表示される [Google Adsense, Cocoon]

自分のブログを印刷していたら、アンカー広告が印刷されてしまうことに気づきました。ページごとに下部に広告が表示されてしまっています。 ◆追記（2022年4月3日）Cocoon 2.4.2の更新で直ったかもしれません。これまでは、本文内のAdsense広告は、印刷されないように設定されていました。印刷時のスタイルを、@media print で指定することができるからです（WordPressのCocoonテーマを利用しています）。しかし、最近（2021年7月19日から）表...

（参考）

（補足）

目次に戻る

QRコードを読み込むと、関連記事を確認できます。