「Lazy Load」というJavaScriptライブラリをご存じでしょうか。SEO対策やWEBサイト集客でもとても必要な技術となります。
大量の画像を表示するWebページは、表示速度が遅くなりますよね。サイトの表示速度の高速化ができます。今回はSEO対策にもなる「Lazy Load」のについて解説します。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいます。
「Lazy Load」とは？本来は一般的にはブラウザは指定のページに含まれるすべての画像を一気に読み込せようとします。「Lazy Load」を利用するとユーザーが実際に見ている画面の外にある画像は読み込みません。
WeBサイトの画像など容量が大きければ読み込みには時間がかかります。ネットワークやサーバーに負担がかかる点が懸念されます。表示が遅ければそれだけでSEO対策としては検討しなくてはいけませんよね。
その場合には防御策にはキャッシュなどいろいろと対策はございますが、Lazy Loadという表示速度を高速化させる技術が用いられるようになりました。
[ad2]
LazyLoad（レイジーロード）とは？デメリットは動かない効かないない！SEO効果！遅延読み込プラグインやWordpressでの注意点
大量の画像を表示するWebページは、表示速度が遅くなりますよね。LazyLoadを全て読み込むということは、ビューポート内に存在しない画像（ユーザーがほとんど閲覧しない下部の画像）でも、読み込んでしまうので、当然ブラウザは重くなります。
SEO効果
画像の遅延読み込みを使用すると、ユーザーが特定の画像までスクロールダウンしたときにのみウェブサイトに画像を読み込むことができます。
そこでWebサイトのロード時間を短縮し、Webサイトのパフォーマンスを向上させることができます。
画像の多い人気サイトの多くは、Lazy Loadを使用してウェブサイトの速度とパフォーマンスを向上させています。
表示を遅延させるには２つある
ブラウザのネイティブLazyload設定と、JavaScriptライブラリの使用の２つがあります。
[ad2]
LazyLoadはWordPress5.5
WordPress 5.5から、画像の遅延読み込みが標準機能となっています。
（2020年8月に公開されたWordPress5.5は、およそ3ヶ月ぶりに実施されたメジャーアップデートによるバージョン）
よってWordpressのプラグインや機能を使わなくても遅延読み込みさせることができます。画像の遅延読み込みはGoogleも推奨している技術です。
PageSpeed Insights を利用すると、ページ表示速度の計測や改善方法の確認をすることができます。
冒頭でもお伝えしましたが、検索順位を決めるSEOとして使用されていることが、Googleの公式ブログで明言しています。
[ad2]
Lazy Loadのデメリットは？動かない!効かない
Lazy Loadのデメリットはクローラーに画像を認識してもらえない可能性があることです。
クローラーはページ情報を収集する際、人間のようにスクロールという動作をおこなわないため、遅延読み込みさせた画像を認識できません。
また、WordPress 5.5から標準機能となっています。従いましてプラグインの競合によりページ速度が遅くなる可能性もあります。
WordPressのCacooｎにも下記の記載があります。
WordPress 5.5からLazy Loadが標準機能になりました。この機能を有効化すると標準Lazy Loadではカバーしていないエリアの画像の対応をします。例：新着・人気・カルーセル・おすすめカード・ナビカードのNO IMAGEサムネイル等
今後のWordPressの動向次第では、CocoonのLazy Load機能は廃止するかもしれません。
動かないや効かない
lazyloadのバージョン1はjQuery利用仕様です。バージョン2（2018年段階の最新版）は、非jQueryと全く違う仕様になっています
lazyloadの作者の方は、脱jQueryに転向して、ネイティブのjsのみで作動する仕様に変更しました。lazyloadバージョンの違いに注意して、設定していけばうまくいくはずです！
ここは段落ブロックです。文章をここに入力してください。
- jQuery読み込み
- jQuery.lazyload.js の読み込み
- jQuery実行コード
- <img class=”lazy” data-original=”” alt=”” />
[ad2]
まとめ
よってデメリットとしてはプラグインの競合がありますのでご注意ください。
コメント