WordPressの画像に付与されるdecoding属性とloading属性の属性値を変更する
WordPressの画像に付与されるdecoding属性とloading属性
WordPressのバージョン5.5以降、HTMLImageElementのloading=”lazy”が追加され画像とiframeに自動的に付与されるようになり、同様にバージョン6.1以降ではdecoding=”async”が画像に付与されるようになりました。
HTMLImageElementのdecoding属性とloading属性は、画像の読み込みに関連する属性ですが、それぞれ異なる目的があります。簡単に言えば、decording属性は画像のデコード方法を指定し、loading属性はブラウザが画像を読み込む方法を指定します。loading属性は特に大量の画像やフレームが含まれるページで、パフォーマンスやユーザーエクスペリエンスを向上させるのに役立ちます。
画像のデコードとは画像ファイルをブラウザが理解できる形式に変換するプロセスです。通常、画像は圧縮された形式（例：JPEG、PNGなど）でサーバーからダウンロードされます。ブラウザはこれらの圧縮された画像ファイルを受け取り、それをブラウザが表示できるビットマップ形式に変換（デコード）して表示します。
decoding属性とloading属性の属性値
それではそれぞれの属性値について見てみましょう。MDN Web Docksには下記のように説明されています。
- decoding属性:
- sync: 他のDOMコンテンツのレンダリングと同期して画像をデコードし、すべてを一緒に表示します。
- async: 他のDOMコンテンツをレンダリングして表示した後、非同期に画像をデコードします。
- auto: デコードモードの優先順位はありません。ブラウザーがユーザーにとって最適なものを決定します。これは既定値です。
- loading属性:
- lazy: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。
- eager: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
属性値を変更する
これらを踏まえ、WordPressが自動的に出力するdecoding=”async”とloading=”lazy”では画像の読み込み時にチラつきが気になったため、今回はスムーズさを優先するためにdecoding=”auto”とloading=”eager”に変更いたしました（画像はdecodingとloading、iframeはloadingの属性値を変更）。
この設定はホームページの読み込み速度を上げたり、スムーズさを優先したり、それぞれのホームページに適したものにすればよいと思います。
以下はfunctions.phpに入力するコード例です。
// img タグに decoding="auto" と loading="eager" を追加する
function add_decoding_and_loading_properties($content) {
// img タグに decoding="auto" と loading="eager" を追加する
$content = preg_replace_callback('/<img([^>]*)>/i', function($matches) {
// decoding="auto" と loading="eager" を追加する
return '<img decoding="auto" loading="eager" ' . $matches[1] . '>';
}, $content);
// iframe タグに loading="eager" を追加する
$content = preg_replace_callback('/<iframe([^>]*)>/i', function($matches) {
// loading="eager" を追加する
return '<iframe loading="eager" ' . $matches[1] . '>';
}, $content);
return $content;
}
// 'the_content' フィルターフックを使用して、記事のコンテンツに適用する
add_filter('the_content', 'add_decoding_and_loading_properties');
最後に注意すべき点は、上記のコード例では画像とloadingを付与できるのはWordPressのthe_content()から出力された箇所のみです。the_content()を使用していない箇所はこのコードは適用されません。
ホームページ・WordPressをゼロからデザイン・構築しているWeb制作会社を探されている方へ
私たちAEDIは岡山県倉敷市のホームページ制作会社/Web制作会社・デザイン会社です。ホームページ制作、WordPress構築、多言語サイト構築、SEO、ソフトウェア・アプリ等のUI/UXデザインのホームページ制作サービスとロゴやチラシ、パンスレットやカタログデザインのグラフィックデザイン、モーションデザイン・モーショングラフィックス、キャラクターデザインそしてブランドデザイン・ブランディングのサービスをご提供しています。もしホームページ・WordPressをゼロからデザイン・構築しているサービスを提供しているホームページ制作会社/Web制作会社を探されている方がいらっしゃいましたらどうぞお気軽にお問い合わせください。お客様のご要望に応じたホームページを制作いたします。
