お知らせ「WEXAL導入およびテーマ変更作業に伴う不具合について」

LION BLOG(MEDIA)を例にNative Lazy Loadをプラグイン無しでサムネイルにも適用させる

カスタマイズ&プラグイン
この記事は約4分で読めます。
スポンサーリンク

先日、コードだけでGoogle Chrome対応のNative Lazy Loadを実装する記事を書きました。

Chrome 対応Native Lazyloadをコードだけでサイトの画像に一括実装する(コピペ一発、プラグイン不要)
Google Chromeが標準機能でLazyloadに対応したんだってねえ サイトは何もしなくていいの? 「Chromeだけ」と割り切るなら、簡単なコード書くだけで対応できるわよ ...

しかし、

質問者の写真

嘘吐き! Pagespeed Insightに怒られたよ!
サムネイルまでは遅延読み込みしてくれないじゃん!
 
スポンサーリンク

LION BLOGにスクリプト無しでLazy Loadを実装するメリット

というわけで本稿では、サムネイルにもChrome対応Native Lazy Loadを適用させる方法を記します。
どのテーマでもいいのですが、ここではLION BLOG(MEDIA含む)を採り上げます。

解答者の写真
LION BLOGとLION MEDIAは「スクリプト無し」による軽快さを売りにしたテーマです
 

本記事のニーズがあるなら、これらテーマのユーザーじゃないかと思いましたので。
スクリプトを入れずに「オフスクリーン画像の遅延読み込み」で怒られずに済むのですから打ってつけでしょう。

スポンサーリンク

サムネイルへの適用方法

LION BLOGやLION MEDIAじゃなくてもパターン1か2のどちらかでいけると思います。

アーカイブ部分ループ(トップページなど)

パターン1 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));}

パターン2 img srcで直接取得している場合

サムネイルの存在しない記事があるなら、パターン1の箇所の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飛ばされるという現象まであります。
(自分が読み手として自サイトをチェックした感想)

トータルでの読み込み時間は変わらない。
だったらスクリプトなんて1つでも少ない方がいいのですから。

あくまでPagespeed Insightsに怒られたくないのでやってるだけ。
そのうちsafari以外は対応してくるんじゃないかと思いますし、Chromeにだけ対応しておけば十分じゃないかと思います。

スポンサーリンク

まとめ

解答者の写真
極力シンプルなカスタマイズをしたい方
ぜひ試してみてください!
 
author

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました