※当サイトにはプロモーションが含まれています。
ここ最近、PageSpeed Insights（ページスピードインサイト）で、モバイル表示される際のスピードの改善をおこなっています。
ページ速度が測定できる「PageSpeed Insights」はこちら
そこで気になったのが、「オフスクリーン画像の遅延読み込み」です。
このオフスクリーン画像の遅延読み込み（Lazy Loading）は、ユーザーがスクロールして画像が画面内に表示されるタイミングまで、画像を読み込まない技術です。
なお、この遅延読み込み設定は下記のように、<img> タグに loading=”lazy” 属性を追加することで実装できます。
<img src="example.jpg" alt="サンプル画像" loading="lazy">
にゃのらいと ワードプレスや賢威の機能で、loading=”lazy”は付与されにゃいの？
ワードプレスや賢威のバージョン、プラグインなどに左右されると思うので一概には言えませんが、確認した限りでは、
アイキャッチと、関連記事には、loading=”lazy”は付与されないようでした。
その為、関連記事のアイキャッチに対して、loading=”lazy”を付与する方法を備忘録として残します。
なお、アイキャッチは、ファーストビュー（First View）で表示されることもあり、通常、loading=”lazy”は付与しません。
関連記事のアイキャッチに遅延読み込み設定を追加する方法
関連記事のアイキャッチに遅延読み込み設定を追加する方法についてです。
この変更は、親テーマに手を加えるので、修正する際は必ずバックアップを取るようにしてください。
また、親テーマをアップデートした際には、この修正箇所は上書きされてしまいます。
※本来は、funciton.phpの変更で対処したかったのですが上手くいきませんでした。
①親テーマにあるkeni-post.phpをダウンロードする
keni-post.phpを修正します。
なお、keni-post.phpのファイルは、下記のフォルダに格納されていると思います。
/home/（あなたが契約した名前）/www/（あなたが作成したフォルダ名）/wp-content/themes/keni80_wp_standard_all_202411021815/keni/module/keni-post
②keni-post.phpの内容を編集する
keni-post.phpの1071行目付近に記載されている
$str_html .= '<img src="' . $str_image_url . '" class="relation-image"' . $str_img_attr . ' >';に対して、
decoding="async" loading="lazy"
を追加します。
この属性を持つ画像は、スクロールしてビューポートに近づいたときに初めて読み込まれます。
これにより、ページの初期読み込みが速くなり、PageSpeed Insightsの評価が向上する可能性があります。
画像を非同期的にデコードすることで、レンダリングブロックを避け、ページの描画を高速化します。
これは、画像の表示をページ全体の読み込みが終わるまで待たずにおこなうため、ユーザー体験が向上すると言われています。
つまり、下記のようになります。
$str_html .= '<img src="' . $str_image_url . '" class="relation-image"' . $str_img_attr . ' decoding="async" loading="lazy">';
実際のコードを見るとこんな感じになります。
③修正したkeni-post.phpをアップロードする
コードを追加した、keni-post.phpを親テーマにアップロードして上書きすれば終了です。
無事、decoding=”async” loading=”lazy”が付与されました。
なお、親テーマのファイルが書き換えられてしまうので、オリジナルファイルは必ずバックアップをとるようにしてください。
ページ速度が測定できる「PageSpeed Insights」はこちら
これらの設定は、ワードプレスのプラグインを使用することで解決する事もできます。
ただ、プラグインは相性問題などがあってトラブルが起きた際に面倒くさいこともあり、なるべくプラグインを使用しない方向で修正しました。
