スクロールごとに画像表示で速度UP/WPプラグイン「BJ Lazy Load」

bj


WordPressプラグイン「BJ Lazy Load」とは

スクロール時に表示される画像の読み込み、ページの表示速度をアップさせるプラグン。(スクロールで現れていない画像は読み込んでいない)

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

 いろんなサイトを見ていると、下にスクロールすると、画像がふわっと現れるサイトありますね。ピンタレストのようなやつ。なんかかっこいいとともに、高速化に貢献するようですので導入してみました。
「jQuery Image Lazy Load WP」というのも有名なのですが、こちらも評価が高そうな「BJ Lazy Load」にしました。

 (注意)この「Lazy Load」系のプラグインは、他のjQueryのプラグインがあるとコンフリクトを起こし不具合でます。自分のギャラリーサイトにいれてみましたが、表示がすべて出なかったりと影響出まくりでした。サイトの環境によって対応する必要があります。

有効化後の設定、使い方

特にすることはないのですが、お好みによって設定を変えてください。

BJ Lazy Loadの設定その1

  • Apply to content(投稿コンテンツ→yes)
  • Apply to post thumbnails(アイキャッチのサムネイル画像→使ってればyes)
  • Apply to gravatars(Gravaterの画像→使っていればyes)
  • Lazy load imagesy(画像ファイル(jpeg,png)の遅延→yes)
  • Lazy load iFrame(Youtube埋め込みなどインフレームの画像→多用してればyes)
  • Theme loader function(どこにコードを埋めるか→自分はfootter)
  • Placeholder Image URL(遅延読み込みまでの画像を指定→特に必要なし)
  • Skip images with classes(特定のclassの読み込みを除外→デフォルトのまま)
  • Infinite scroll(無限スクロール→無限でないのでno)
  • Load hiDPI (retina) images(retina mac向け→特に必要ないからno)
  • Load responsive images(レスポンシブな画像を遅延→レスポンシブな画像を使っていないのでno)
  • Disable on WPTouch(WPTouchの無効化→使っているのでyes)

これで設定は終了です。

特定のクラスを除外したい場合

BJ Lazy Loadの設定その2(除外方法)

「BJ Lazy Load」まとめ

 他はともかく、このサイトでは比較的スムーズにいけました。たしかにふわっと感でなんとなく速い気がします。
 ちなみにこのサイトも使っていますが、画像がふわっと出現します。やはり画像を多用しているサイトはいいかもしれませんね。
 きっと高速化に繋がっているはず。
 ただ、サイトの作りによっては不具合がでそうなのでその点は注意が必要です。

参考


WordPress高速化に必須!スクロールに応じて画像を読み込むプラグインBJ Lazy Load

LINEで送る
Pocket

タグ:,

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す