はじめに
サイトロード時間が1~3秒延びるだけで直帰率が32%も上昇し、さらに5秒まで延びると90%のサイト訪問者が離脱する・・・
順位にも、影響するとか・・しないとか・・・
まずは、画像の対応で、LazysizeはGoogleのボットが巡回して来た時に、遅延読み込みを行わないため、正しい情報がGoogleに認識されるようです。
WordPressでもLazy Load系pluginがありますよね・・って。。こないだ。WP使いの子に、教えてもらいました。。w
Lighthouseでチェックしても、おこられちゃいますよね・・・。。
設定方法
今回は、Lazy Loadではなく、Lazysizeってプラグインを使用します。
Lazy Loadは、ブラウザーの表示領域から外れているものは読み込みせず...スクロールしたら、読み込みされるものです。Lazysizeは、GoogleBotにも認識されるLazy Loadです。
ダウンロード下記からlazysizes-umd.min.jsを持ってきて・・・
https://github.com/aFarkas/lazysizes
class="lazyload"を追加
src属性に画像を設定せず、data-src属性で画像パスを指定する
srcを空にしてはいけないので、1x1pxの透明な画像 data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
昔のスペンサーGIFですね。。ふるぅ・・
ファーストビューで使っちゃうと・・・ちかちか。。するので、ファーストビューは使用しないようにするとか・・おまけ・・
Webフォントなど使っていると。。3-4秒かかってしまうので・・Lighthouse、 Page Speedのときは、はずす・・やつ・・
いつまで使えるか・・・海外のブログにあったやつです・・・
まぁ。SEOとか意識しているサイトは、使用しないとか・・、部分的に使用するとか・・
レスポンシブ対応だと、2倍画像をスマホ、PCで1枚で作ってしまうと・・・画像が重い・・・よって。。Lighthouseいう場合・・
SEO用に下記のようにするとか・・width、alt、heightも指定してねって。。。言われるよね...・・Lighthouse
さいごに・・
知り合いのページ見てたら..検索順位下がってたので・・Lighthouseでチェックしまくりで検証中です・・
ライバルはいろいろ。。施策してますね・・・・
では。。