SEO対応と書いてありましたがネットで調べるとLazy Loadを使う場合検索エンジンのクローラーは画像を認識できないとあります。

これについて設定しなければならない事などはありますでしょうか？

また対策されている内容がわかれば知りたいです。

この件については、以下スレッドあたりでしょうか。

投稿者:: Akira

Lazy Load の情報の補足です。

Google、SEOに適したLazyloadの仕様を公開

公開された Google のドキュメント

Make sure Google can see lazy-loaded content

Google が薦める Intersection Observer API を使った Lazy Load のコードサンプル。

Lazy load images using IntersectionObserver

w3c が提供する Intersection Observer API の polyfill 。

intersection-observer.js

ただ、よほど画像の枚数が多いか、画像サイズがバカでかくないと、Lazy Load は効果を実感できないかも。数ヶ月前に自分のブログで実装して WebPageTest で計測したら、まったく速くならず実装をやめました。PageSpeed Insights の点数は上がるでしょうけど。

https://wp-cocoon.com/community/customs/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E9%80%9F%E5%BA%A6%E3%81%8C%E9%81%85%E3%81%84/#post-8697

このリンク先の情報前後あたりをチェックしてみるのも良いかと思います。

かうたっくさんが書かれたトピックにほぼ書かれています。
クローラー的には、noscriptを用いてクロール出来るようにしてあります。

Cocoonページなのでもそうですがヘッターロゴが表示されるまでにタイムラグが発生しており、画像が表示されるのが気になるほどです。

僕の環境からは、特に遅いとは感じないです。
Lazy Loadの仕様上、微細なラグは発生するのは致し方ないかと思います。
気になる場合は、無理に使用せずとも使用しないという選択肢もあるのではないでしょうか。

他のサイトや一般的に過去見た事あるサイトではこの現象を一度も見た事がないので不可解な感覚を覚えます。何か対策があればお願いしたいと思います。

そういうサイトがあるのであれば、比較のためにもURLを提示していただければと思います。

わいひらさん

エックスサーバーのキャッシュ・高速化関連は無効に設定してもしなくてもエックスサーバーでは以下のようになるみたいです。

Cocoon設定、高速化より。

• ブラウザキャッシュを無効・Lazy Load機能を有効に

または

• Lazy Load機能のみ無効の場合。

Cache-Control：max-age=1に

• 全項目にチェックを入れた場合

Cache-Control：max-age=31536000

となるようです。

今アチコチで話題が出ていて『Xアクセラレータに関わる不具合』やらも関係あるかもしれません。

これは推奨されている静的ファイル

ON [静的ファイル](推奨)
静的ファイルに対してXアクセラレータが有効になります。サーバー側で静的ファイルは2分間キャッシュされます。

これを有効にしていてもしてなくても同様です。

ON [全ファイル]
全てのファイルに対してXアクセラレータが有効になります。サーバー側で静的ファイルは2分間、動的ファイルは1分間キャッシュされます。

※ECサイトやログインしたユーザーのみに表示するコンテンツなど、キャッシュ処理を想定していないコンテンツ運用の場合、正常に表示されないことがあります。

コチラのほうは試してませんが。

https://www.xserver.ne.jp/manual/man_server_xaccelerator.php

あと

サイドバーのウィジェットの一部が表示されなく/#post-9026

• 時間を置いたらキャッシュが切れた問題後の書き込み
• Cocoonバージョン：1.4.0.1
• lozad lozad-img有り

ご指摘いただきましたサーバーのキャッシュ機能（＝ブラウザキャッシュ設定）を確認してみましたが、OFFになってました（そんな機能もあったんですね…）。

これも関係しそうです。

Cache-Control：max-age=31536000

これはそういう仕様です。新しいPageSpeed Insightsではブラウザキャッシュを長めに設定しないと警告が出るので長めに設定しているだけです。

また、当トピックの冒頭に書かれた内容とは、おそらく関係ないとは思います。

横入りで申し訳ございません。実は当サイトも同じ状況で、ヘッターロゴが表示されるまで、タイムラグが発生しています。

設定状況は、Cocoonの高速化設定を、すべてチェック済み。

ちなみに、エックスサーバーの高速化設定は、以下のようになっています。

• XアクセラレータはOFF。
• mod_pagespeed設定もOFF。
• ブラウザキャッシュ設定はON[全ての静的ファイル]。

念のため、Cocoon環境に関する情報も、載せておきます。

----------------------------------------------
ホームURL： https://doteiban.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
使用スキンURL：
Wordpressバージョン：4.9.8
PHPバージョン：7.2.6
ブラウザ：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：1.4.1
カテゴリ数：19
タグ数：328
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
利用中のプラグイン：
BackWPup 3.6.6
Contact Form 7 5.0.5
Edit Author Slug 1.6.0
EWWW Image Optimizer 4.5.1
Google XML Sitemaps 4.0.9
Limit Login Attempts 1.7.1
Optimize Database after Deleting Revisions 4.7.2
Protect Uploads 0.2
Remove Query Strings From Static Resources 1.4
RSS Image Feed 4.2.5
Search Regex 1.4.16
SiteGuard WP Plugin 1.4.3
Throws SPAM Away 2.9
Visual Editor Custom Buttons 1.5.2.2
WebSub/PubSubHubbub 3.0.1
WordPress Ping Optimizer 2.35.0.1.3
WP Fastest Cache 0.8.8.8
WP Multibyte Patch 2.8.1
----------------------------------------------

h　ttps://doteiban.net

にアクセスすれば爆速でロゴが表示されました。

-------追記----------

ログインユーザーでないので爆速で表示されたのかも知れないですね？キャッシュプラグインの設定が不明ですが。

------------------

ただそのタイムラグが一瞬のことであるのであれば、Cocoonも私のページも一瞬壊れた画像が表示されますね。

altなし状態です。

***

ほかは投稿ページで『一部の画像が画像が小さく表示される』場合もあります。これは提示可能ですが、ややこしいので一応ソースのみ。

width="224" height="28" 幅が244px　高さは298.06px。AMPならエラーが出そうな細かい数字です。

<img class="alignnone size-full wp-image-341 lozad lozad-img" data-src="https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png?resize=505%2C672&amp;ssl=1" alt="ユーザー用のサイトマップ例" width="224" height="28" data-srcset="https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png?w=505&amp;ssl=1 505w,  https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png ?resize=225%2C300&amp;ssl=1 225w,  https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png ?resize=301%2C400&amp;ssl=1 301w" sizes="(max-width: 505px) 100vw, 505px" src="https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png?resize=505%2C672&amp;ssl=1" srcset="https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png?w=505&amp;ssl=1 505w,  https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png ?resize=225%2C300&amp;ssl=1 225w,  https://i0.wp.com/bibabosi-rizumu.com/wp-content/uploads/2015/03/099c03d795fec4514a4a3f325e951c28.png ?resize=301%2C400&amp;ssl=1 301w" data-loaded="true">

• あとlazy-Loadを停止したとき

lozad lozad-imgのclass属性が消えてない。さらになぜか画像が表示されないときに出る『壊れた画像マーク』になってしまう事もありました。

コチラはプラグインのttps://i0.wp.com/を利用してないサイトです。

公開前だったので、全部昨日修正しましたが。altを書いていてもaltが表示されなかった感じですね。イロイロ謎ですが。

あと、今ビバ★りずむ：私のページでログインを求められましたが、画像が表示されてないですね。

<img class="lozad lozad-img" data-src="画像のパス" alt="CAPTCHA">

https://gyazo.com/0dbebad4891e650b63d95b7a7ffdd4f9

原因の可能性があるかも知れないけど、いまは不明ですが。

******追記

一応対処方法

ソースコードで画像のパスを見て表示。それで入力。※設定かもですが、

• もし404になった場合

プラグインで表示させているので、FTPでそのプラグインフォルダ名を変更して強制エラーを出して停止。

普通にログインをする。

**

その後プラグインフォルダ名を元に戻して、Lazy Loadを機能を停止する方法をとりました。

> https://doteiban.net/
僕が見る限りでは、普通に表示されているようです。全然遅くないと思います。
ただLazy Loadという名前の通り、多少なりともタイムラグは出るのはしょうがないです。
どうしてもタイムラグを発生させたくない場合は、Lazy Loadを無効にすればよいのではないでしょうか。
Lazy Loadを有効にしていたからといって、良くなるのはPageSpeed Insightsのスコアだけです。
多くの人が、PageSpeed Insightsのスコアでテーマの善し悪しを判断される傾向があるので、一応対応はしていますが、ブログの本質はスコアではないと思います。