相変わらずwebの再構築やってる時に思った事の１つですが、結構悩んだのが画像遅延ってヤツ。
ようは見えない範囲の画像のレンダリングを遅らせて、見える範囲のレンダリングを早める。ってか、見えない範囲の画像はレンダリングしないから軽くなるって手法のヤツ。
wordpressでメジャーなプラグインは『Lazy Load』ですね。ライブラリも配布されてるからwordpressじゃなくてもお手軽に使える画像遅延JSですが、チョット不安があったってお話し。
検索エンジンはどう判断してるんだろ？って事
僕もサイトが少しでも軽く出来るなら と思ってプラグインも試してみたしライブラリも使ってみたんです。
実際のトコロ、軽くもなるし、画像が多い場合確かに早くなる部分もある。けれども手法がチョット不安。
何故不安かというと、『Lazy Load』のライブラリの配布サイトを見れば分かると思う。
簡潔に書くと、画像遅延系の手法はimg要素に1pxの小さな画像を置いて、jsで本来の画像に入れ替えるって手法なワケです。だから、画像は本来の画像ではなく1pxの仮の画像がマークアップされる。
htmlはこんな感じなる。
<img src="遅延用.gif" data-original="本来の画像.png" alt="サンプル">
で、このままだとjavaを切ってる場合1pxの画像しか表示されなくなるから、その下にNOSCRIPTでフォローする。
<img src="遅延用.gif" data-original="本来の画像.png" alt="サンプル"> <NOSCRIPT> <img src="本来の画像.png" alt="サンプル"> </NOSCRIPT>
こんな感じに。
で更に、このままだとJSが切られてる場合、本来の画像の上に良く分からない1pxの画像が出ちゃうから、NOSCRIPTじゃないほうのimg要素はdisplay:noneにする。
こんな感じ方法です。
コレって本来の画像はNOSCRIPTでしかマークアップされてないし、あるべきはずのimg要素はdisplay:noneな上に本来の画像パスはdata要素の中なワケで検索という部分でかなり不安です。
ただ、結構面白いなーと思って、試しに見えてる部分まで画像を遅延させてみたんです。で、その状態で『PageSpeed Insights – Google Developers』で調べてみたら、
『見えてる範囲のレンダリングが遅延されてる』的な感じでメッセージが出てました。
どうやら、何かを遅延させているのは判断出来るようです。
ですが、問題なのはJSで追加されたりする要素は確か受け取らない。
以前、スキーマーの要素をJSで挿入してた時がありましたが、クローラーはそれを受け取ってくれない。その上本来のimg要素はcssでdisplay:noneだとますます受取らない。
あとはNOSCRIPTをどう受取ってくれるかだろうけど、NOSCRIPTってスパマーの方が多用する事があるらしくて結構不安なタグ。とは言えNOSCRIPTも全部受取ってくれるならそれを利用しようとするスパマーや詐欺まがいなSEO業者がいてもおかしくない訳なので検索エンジン側は警戒すべきタグだとは思う。
他の人はどう考えてる？
自分だけの判断だとイマイチ自信が無いので、色々検索してみたらやっぱり同じ様な考えの人はそれなりにいますね。
普通に考えたってimg要素が遅延用の1pxの画像なんだから、HTMLを少し理解してれば不安で当たり前ってトコロだと思う。
まとめ
至った結論としては、何だかんだ良い部分もあるんでテキスト重視のサイトなら良いかなって感じ。
特にwordpressのプラグインの場合、記事の中の画像が遅延の対象になってて、確かアイキャッチは遅延されてなかった。だから最低限の画像に影響は出ない。
でも、画像多いサイトはチョット怖いな。画像が多いサイトって、多分画像検索からの来訪者が多いと思う。でも画像遅延でクローラーが読み込んでくれないと、そーゆー来訪者は無くなってしまいますからね。
『Lazy Load』って結構良いなーと思ったんだけど、このブログなら使えても、もろ仕事のほうじゃ怖くて使えないし、画像の多い物作りブログでも怖いから、とっても惜しい気持ちになったお話しでした。
ではでは