ウェブサイトの画像をいくら軽量化しても、テキストよりは読み込みに時間がかかってしまうのは仕方ないんですが、できるだけ読み込みはスムーズにしたいものですよね。
imgタグに「decoding=”async”」を追記するだけで画像を非同期にしてページの読み込みを高速化できるので、今回はWordPressの記事内に書かれたimgタグ全てにdecoding=”async”を追記する方法についてご紹介します。
imgタグに追記して画像を非同期にする
画像の読み込みを遅らせる方法としてはLazyLoadが有名です。スクロールさせるまでは画像読み込みを止めておくことで、読み込みを早くする仕組みですね。
LazyLoadのデメリットとしてはJavascriptを使わないといけなかったり、SEO的に不利になるという説もあります。
最近ではimgタグに「loading=”lazy”」と追記するしてLazyLoadを実現する方法もありますが、対応ブラウザがまだ多くないことと、結局SEO的に不利という話が完全に払拭されるまでは止めておいた方がいいのかなと思ったり。
というわけでページの読み込みを早くする施策の一つとして、「画像を非同期」にする「decoding=”async”」を追加する方法がおすすめです。
下記のようにimgタグに「decoding=”async”」ちらっと書くだけです。
<img src="画像のパス" class="クラス名" decoding="async" alt="画像の説明">
これを書いたことで実際にどれくらい効果があるのかは正直良く分かりません。ただ、簡単に実装できる方法ですしデメリットもないため、とりあえず入れておくくらいで良いのかなと。
WordPressの記事内にある画像にdecoding=”async”を設定する
decoding=”async”をimgタグに追記すれば画像は非同期化できますが、記事内にあるimgタグすべてに手動で「decoding=”async”」を設定するのは大変すぎるので、プログラムを書いて対応することにしました。
下記のコードをfunctions.phpに追記してください。
function content_img_async($content) {
$re_content = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2" decoding="async"', $content);
return $re_content;
}
add_filter('the_content','content_img_async');
たったこれだけで、全ての記事に入ってるimgタグにdecoding=”async”が追加されます。
WordPressでは記事の投稿画面に画像を追加する段階でimgタグにclass属性が付くようになってますので、そのclass属性を利用して置き換える形です。
やっぱりdecoding=”async”を消したいなと思ったときでもfunctions.phpの記述を消すだけですべての記事に対応できるので、とりあえずやってみるという気軽な感じで導入できますよ。
decoding=”async”に対応しているブラウザ
Safariが対応してないという情報を良く見かけてたんですが、下記の記事によると現在は対応しているようです。
仮に対応していないブラウザだったとしても、対応しているブラウザと比べて多少読み込みが遅い程度なので、気にしなくて良いかなと思います。
最後に
簡単にできてデメリットもないため、とりあえず追記しておくくらいの軽いノリで使って良さそうです。
ご紹介したコードは使っていただいて構いませんので、みなさんもぜひお試しください。