先日、コードだけでGoogle Chrome対応のNative Lazy Loadを実装する記事を書きました。
しかし、
サムネイルまでは遅延読み込みしてくれないじゃん！
LION BLOGにスクリプト無しでLazy Loadを実装するメリット
というわけで本稿では、サムネイルにもChrome対応Native Lazy Loadを適用させる方法を記します。
どのテーマでもいいのですが、ここではLION BLOG（MEDIA含む）を採り上げます。
本記事のニーズがあるなら、これらテーマのユーザーじゃないかと思いましたので。
スクリプトを入れずに「オフスクリーン画像の遅延読み込み」で怒られずに済むのですから打ってつけでしょう。
サムネイルへの適用方法
LION BLOGやLION MEDIAじゃなくてもパターン１か２のどちらかでいけると思います。
アーカイブ部分ループ（トップページなど）
パターン１ the_post_thumbnailを使っている場合
まず「loop.php」を子テーマにコピーします……と言いたいところですが「親テーマ」のままでいいと思います。
どうせもう、今後はテーマの更新もないでしょう。
（元々、THE THORのテストバージョンみたいなものなので）
親テーマのままにしておいた方が簡単です。
変更前
<?php if(has_post_thumbnail()) {the_post_thumbnail('icatch');}
変更後
<?php if(has_post_thumbnail()) {the_post_thumbnail('icatch',array( 'alt' =>get_the_title(),'loading' =>lazy));}
パターン２ img srcで直接取得している場合
サムネイルの存在しない記事があるなら、パターン１の箇所のelse以下も書き換えます。
<img src="'.get_template_directory_uri().'/img/img_no.gif" alt="NO IMAGE"/>';}?>
<img src="'.get_template_directory_uri().'/img/img_no.gif" loading="lazy" alt="NO IMAGE"/>';}?>
人気記事一覧ウィジェット
親テーマのfunctions.phpの「人気記事一覧ウィジェットアイテム」を検索して、ループ部分と同様の修正を施してください。
LION BLOGのサムネイル回りの修正
ついでなのでやっておきましょう。
他のテーマでも、やってない場合はしておいた方がいいと思います。
サムネイルサイズの指定（サムネイル左にしたとき）
Pagespeed Insightsの「適切なサイズの画像」で怒られるので修正します。
icatchをmediumに指定し直せばOKです。
（mediumが横幅300の場合）
alt属性を付け加える
Lighthouseで「Image elements do not have [alt] attributes」（画像にalt属性がありません）と怒られるので付け加えます。
“”の中身は空でいいです。私は記事タイトル名にしています。
「画像なし」の方は最初からalt属性が入っています。
修正後のコード
<?php if(has_post_thumbnail()) {the_post_thumbnail('medium',array( 'alt' =>get_the_title(),'loading' =>lazy));} else {echo '<img src="'.get_template_directory_uri().'/img/img_no.gif" loading="lazy" alt="NO IMAGE"/>';}?></a>
Chrome以外はLazy Loadどうするの？
以下はあくまで私見です。
LazyLoadには一長一短ありまして。
よく言われるSEO上のマイナス効果はlozad.jsなどIntersectionObserverベースのものを使えばいいのですが。
モバイルですと遅れて読み込むのが間に合わず、空白のまま待つor飛ばされるという現象まであります。
（自分が読み手として自サイトをチェックした感想）
トータルでの読み込み時間は変わらない。
だったらスクリプトなんて１つでも少ない方がいいのですから。
あくまでPagespeed Insightsに怒られたくないのでやってるだけ。
そのうちsafari以外は対応してくるんじゃないかと思いますし、Chromeにだけ対応しておけば十分じゃないかと思います。
まとめ
ぜひ試してみてください！
コメント