Wordpress

【2018年】Lazy Load 設定徹底解説

ここではWordpressのプラグイン Lazy Load の機能と説明を紹介させて頂きます。


プラグインの名称と主な機能

名称:Lazy Load

機能:スクロールにより画像を遅延読み込みする初期描画時間を短縮する。

効果:画像ファイルは容量が大きいためWeb ページのデータ転送量に直接影響を与えます。転送データの8~9割が画像データーというWebサイトも珍しくないと思います。画面のスクロールに応じて、表示に必要な画像だけを後追いで読み込み表示することで、以下の利点があります。

  • 初期描画のページ読み込み速度が高速化される
  • 無駄な転送を抑えることができる

インストール

左メニューから「プラグイン」→「新規追加」→キーワードに「Lazy Load」と入力します。

Lazy Loadを見つけて[今すぐインストール]ボタンをクリックでインストールは終了です。

設定徹底解説

2018年6月調べ(Ver.6.0.1)

有効化するだけで運用は開始できます。

少しカスタマイズを入れますが、ファイルに直接編集を加えますので処理に不安がある人は手を加えない方が良いかと思います。記事を読んでやることがイメージができる方のみ自己責任でお願い致します。

左メニューから「プラグイン」→「プラグイン編集」、編集するプラグインを選択のプルダウンから「Lazy Load」を選び[選択]ボタンをクリックします。

どこまで画像が近づいたら読み込むかの設定

lazy-load.js から、画面をスクロールした時、どの程度画像が近づいたら画像を読み込むかという設定を変更します。

6行目 ‘scrollin’, { distance: の値ですが、デフォルトの200設定だと画面を早くスクロールさせたときに画像の読み込みが遅れてしまうため、ちょっと余裕を持たせて300~600に変更した方が良さそうです。ブログ系で文字中心の場合は300、画像が多く縦幅が500程度のものが多数あるという場合は読み始めを早くしたいので600をおすすめしています。

変更箇所は lazy-load.js の6行目です。5~8行目で説明します。

変更前:

 

変更後:

 

変更したら忘れず「ファイルを更新」をクリックします。

 

Googlebotに画像を認識させる設定

Lazy Load を導入すると、Googlebot は画面下部の画像を認識してくれません。画像SEOを重視するWebサイトには死活問題ですよね。

Googlebotが巡回してきたらLazy Loadを起動しないと言う設定に lazy-load.php 変更します。「もし HTTP_USER_AGENT が ‘Googlebot’ だったら戻る。」という処理です。

lazy-load.php を開き50行目のif文に || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Googlebot’) を追加します。49~51行目で説明します。

変更前:

 

変更後:

 

変更したら忘れず「ファイルを更新」をクリックします。

これでユーザーエージェントが Googlebot だった場合、Lazy Load が動かない様になります。

ピックアップ記事

  1. サイトマップをグーグルに登録してクローラーを呼び込む
  2. 低価格レンタルサーバー比較:JETBOY vs ロリポップ
  3. Windows10でHDD不具合、SSDに交換でアクティベーションは必要か?

関連記事

  1. Wordpress

    「インデックスカバレッジ」の問題が新たに検出されました

    Google Search Console から「インデックスカバレッ…

  2. Wordpress

    【備忘録】WordPressでプラグインを使わずに過去リビジョンを削除する方法

    Wordpressを長い間運用しているとよく更新している記事のリビジョ…

  3. Wordpress

    アフィリエイトに最適なWordPressのテーマを紹介

    WebサイトをWordpressで作っていくと、見た目も少し凝りたくな…

  4. Wordpress

    WordPressの高速化を考える

    実際にWordPressでブログを運営していると「ブログが重い!」とい…

  5. Wordpress

    WordPressをインストールした直後に実施する3つの設定

    Wordpressはインストールしたままだと非常に使いづらいです。ここ…

  6. Wordpress

    アフィリエイトにWordPressが向く理由

    私がアフィリエイトにWordpressをおすすめするのには理由がありま…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. GoogleAdSense

    【まとめ】GoogleAdSense収益計算と最重要7用語について
  2. SEO

    サイトマップをグーグルに登録してクローラーを呼び込む
  3. Wordpress

    【備忘録】TinyMCE Advancedで作成した表にwidthとheight…
  4. Wordpress

    【2018年】Lazy Load 設定徹底解説
  5. 雑記帳

    【備忘録】JETBOYメール設定、Beckey! 2.0 編
PAGE TOP