WordPress 画像の非同期デコーディング

ブラウザーが画像を非同期的にデコードするようにする方法を紹介します。

具体的には、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 属性の値を上書きしないように変更しました。

プラグイン

プラグインで簡単に設定したいという方は、こちらをどうぞ。

ブラウザーが画像を非同期デコーディングするようにするプラグインです。

最後に

環境によっては、表示完了までの時間が高速化されるようなので、お試しください。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。(スパム対策)