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

この記事は約4分で読めます。

WordPressカスタマイズ

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

しかし、

質問者の写真

嘘吐き! 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にだけ対応しておけば十分じゃないかと思います。

まとめ

解答者の写真
極力シンプルなカスタマイズをしたい方
ぜひ試してみてください!
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴