新規タグ追加の関連商品画像のlazyload

[mai]

宜しくお願いいたします。
関連商品画像をこれまではfunctions.phpにて下記の様に表示していました。

add_filter('usces_filter_assistance_item_list', 'my_format_assistance_item_list',10,2);
function my_format_assistance_item_list($list, $post) {
	$width= 150; $height=150;
	$queried_object= get_queried_object();
    $str = '<li>';
    $str .= '＜ａ ｈｒｅｆ="'. get_permalink() . '" rel="bookmark">';
    $str .= usces_the_itemImage(0, $width, $height, $post, 'return'); //商品画像のHTML
    $str .=以下　略

今回contens内の画像はwidthとheightを指定することで
imgタグ内に
data-src=”画像url” class=” lazyload”が
自動的に追加されるようになり後読みされています。

そこでimgタグ内にdata-src=”画像url” class=” lazyload”を追加すれば
後読みがされるのかと思い追加してみました。
上記の商品画像のHTML部分を下記の様に変更しました。

$image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),'medium'); 
$str .= '<img width="'.$width.'" height="'. $height.'" />';

ソースコードは変更しましたが、google speed testでは後読みの認識はされていません。
何か基本的な所が理解できていないためだと思っています。
アドバイスお願いいたします。

現在の環境は下記の通りです。
WordPress のバージョン：5.7
Welcart のバージョン： 2.2.1
Welcart専用の拡張プラグイン：
ご利用のテーマ：voll(子テーマ)
サーバー：（会社名、サービス名）xserver
SSLの利用：（独自　常時SSL）

• このトピックはmaiが3年、 6ヶ月前に変更しました。
• このトピックはmaiが3年、 6ヶ月前に変更しました。
• このトピックは3年、 6ヶ月前にyasumaxが編集しました。理由: HTMLタグをエスケイプ処理

[mai]

loading=”lazy”をimgタグ内に組み込むと遅延読み込み？

[sagawa]

こんにちは。

今回contens内の画像はwidthとheightを指定することで
imgタグ内に
data-src=”画像url” class=” lazyload”が
自動的に追加されるようになり後読みされています。

固定ページなどの contens 内の画像に widthとheightを指定しても、自動的にdata-src が埋め込みされたり、クラスが付与されたりはしないとかと思いますが、なにか Lazy load のプラグインなどを導入されているのでしょうか？

[mai]

sagawa 様

何時もお世話になっています。
ご指摘の通りです。
以前幾つかのLazy Loadのプラグインを試しに入れていました。
その後、wordpress内の画像あるいはwidthとheightを指定した
画像は遅延読み込みを自動でするとの説明をどこかで読み
そのようにしていました。
そのためLazy Loadに関するプラグインは
削除あるいは無効化したつもりでいました。
先ほど確認するとLazy Loaderが有効化されていました。

合わせてプラグインを使わずにできる方法がございましたら
御教示頂ければ幸甚です。

[sagawa]

mai様

loading=”lazy”をimgタグ内に組み込むと遅延読み込み？
プラグインを使わずにできる方法がございましたら御教示頂ければ幸甚です。

WordPress 5.5 で WordPress の標準機能としてネイティブ Lazy-load が実装されております。loading="lazy"をimgタグ内に埋め込む事で、loading属性に対応しているブラウザ側で遅延ロードをサポートすることになります。

[mai]

sagawa 様

いつも有り難うございます。

ネイティブ Lazy-load の件有り難うございます。
当初の問題が解決いたしました。
ただ、Lazy Loaderをいきなり外すこともできません。
かなりの数の画像がwidth heightの指定ができていない状態です。

今後も宜しくお願いいたします。
有り難うございました。

[投稿者]

投稿