ブラウザーが画像を非同期的にデコードするようにする方法を紹介します。
具体的には、img タグに decoding=”async” を追加するだけです。ブラウザーによっては、対応していない（Safari など）場合や、自動で最適化しているため効果が少ない場合がありますが、他のコンテンツの表示が速くなったり、表示完了までの時間が高速化する場合もあるようです。
PHP コード
下記のコードをテーマの functions.php に追記するだけです。特に設定はありません。
class Async_Image {
public function __construct() {
add_action( 'wp_head', array( $this, 'setup' ), 9999 );
}
function setup() {
add_filter( 'the_content', array( $this, 'add_image_async' ), 9999 );
add_filter( 'post_thumbnail_html', array( $this, 'add_image_async' ), 9999 );
add_filter( 'get_avatar', array( $this, 'add_image_async' ), 9999 );
}
function add_image_async( $content ) {
if ( ! is_feed() && ! is_preview() ) {
$content = preg_replace( '/<img((?![^>]*decoding\s*=)[^>]*)>/i', '<img decoding="async"${1}>', $content );
}
return $content;
}
}
new Async_Image();
※ 2019/4/12 既存の decoding 属性の値を上書きしないように変更しました。
プラグイン
プラグインで簡単に設定したいという方は、こちらをどうぞ。
ブラウザーが画像を非同期デコーディングするようにするプラグインです。
最後に
環境によっては、表示完了までの時間が高速化されるようなので、お試しください。