WordPressサイトのパフォーマンス向上のために「loading=”lazy”」を活用する
WordPressウェブサイトのパフォーマンスを最適化する重要な手段として、アイキャッチ画像に「loading=”lazy”」属性を付与する方法があります。
この技術は、画像の遅延読み込みにより、ページの読み込み速度を効果的に高めることを目的としています。
GoogleのPageSpeed Insightsでは、「オフスクリーン画像の遅延読み込み」に関する重要な指標として取り上げられており、サイトのSEOスコアに直接影響を及ぼします。
「decoding=”async”」と「loading=”lazy”」の違いとは？
WordPressでのアイキャッチ画像最適化において、しばしば混同されるのが「decoding=”async”」と「loading=”lazy”」の二つの属性です。
「デコード処理（decoding）」は、「圧縮された画像ファイルを開いて、元のピクセルデータに戻す」ことです。「decoding=”async”」は、画像のデコード処理を非同期で行うことを指し、ページの応答性を高めるのに役立ちます。
しかし、これは画像の読み込みタイミングを遅らせるものではありません。
一方、「loading=”lazy”」は画像の読み込みを遅延させ、ページの初期表示速度を向上させる効果があります。
詳しい解説はこちらの記事が役立ちます。
WordPressでアイキャッチ画像に「loading=”lazy”」を設定する手順
functions.phpにコードを追加
以下のコードをWordPressのテーマフォルダ内のfunctions.phpファイルに追加することで、全てのアイキャッチ画像に自動的に「loading=”lazy”」属性が付与されます。
/**
* サムネイル画像にloading="lazy"を追加
*
* @param string $attr first parameter.
* @return $attr
*/
function add_lazy_loading( $attr ) {
$attr['loading'] = 'lazy';
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'add_lazy_loading' );注意点
この方法を採用すると、WordPressサイト内の全てのアイキャッチ画像に「loading=”lazy”」が適用されます。
特定の画像にのみ、この属性を適用したい場合は、コードごとにカスタマイズする方が良いと思います。
まとめ
WordPressサイトのパフォーマンスを向上させ、SEOスコアを高めるためには、「loading=”lazy”」属性の適用が非常に有効です。
この記事で紹介した方法を試して、ウェブサイトの読み込み速度を最適化してみてください。
