【WordPress高速化】Lazyloadを使わずにdecoding=”async”で画像を非同期読み込みする| umi.designはWeb・ホームページ制作、WordPress構築、グラフィックデザイン(ポスター、パンフレット)、イラスト制作などを行っています。

HTMLのimg要素に新しく追加された「decoding」。こちらを指定することでLazyLoadを使用せずに画像の非同期読み込みが可能になります。LazyLoad分のJavaScriptを減らすことができ、サイト表示の高速化に繋がります。

速度改善はどの程度されるのか。

フィルムカメラのワンテンポ遅れてくる感じがたまらない

こちらの記事で検証してみました。速度検証はPageSpeed Insightsで行います。

	PC	SP
実施前	86	65
実施後	93	73

7~8点の点数アップです。検証するタイミングにも少し左右されたりするので、2~3回計測し、平均値を出すとよりいいですね。

それでは実際にやってみましょう。

imgタグへの追加の仕方

このdecodingはどのように設定するかというと、imgタグへの記述方法はこんな感じです。

<img class="henzutsu" src="namakemono-janaiyo.jpg" decoding="async" alt="very cute redpanda">

こちらの「decoding=”async”」部分です。
これだけの追加で改善につながるので楽ですね。

WordPressでの実装方法

いやワシはWordPressやねん。imgタグ一個一個に書いていくのとかめんどくさいし、、前の記事直すのとかちょっと…という人もいるかと思います。

その場合、テーマのfunctions.phpを触ります。PHPとかわからないよふぇぇという方でも大丈夫。真っ白になって、焦って冷や汗かきながら調べてこれかーあれかーって直すのが一番勉強になり、力になります。()

というのは半分冗談ですが、functions.phpの下の方に下記をコピー&ペーストをします。

// imgを置換／decoding
function customize_img_async($content) {
  $re_content = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2" decoding="async"', $content);
  return $re_content;
}
add_filter('the_content','customize_img_async');

対応ブラウザは？

全力でおすすめしたいこのdecodingですが、まだまだ対応ブラウザは多くありません。
実際、
PCはGoogle Chrome、Firefox 63、Opera
SPはChrome for Android、、、

PCでChromeに対応していれば半数はカバーできるとはいえ、スマホのほうで、Safariに対応していないのは痛いところです。

写真・画像の多いサイトでは速度改善に一役買ってくれるはずです。お試しあれ。