「BJ Lazy Load」:スクロールして画像が表示されるときに遅延読み込みをしてくれる詳細設定が可能なプラグイン

公式ページ「WordPress › BJ Lazy Load « WordPress Plugins」

WordPress › BJ Lazy Load « WordPress Plugins

スクロールに合わせて画像を遅延読み込みしてくれる

このプラグインを使えば、スクロールに合わせて画像の読み込みを遅延ロードしてくれます。

たとえばサイト訪問者が閲覧するとき、ページ全体を一気に見るのではなく、ブラウザで表示された部分だけが見えています。とくにモバイル端末からのアクセスでは、かなり限定的にしか見えないでしょう。

ということは、サイト内の画像ファイルを読み込むタイミングを、閲覧するときに合わせおけば、ブラウザへの負担を減らせるというわけです。

多くのブログで紹介されている「Lazy Load」は2年以上も更新がないので、「BJ Lazy Load」を利用することにしました。

インストール手順

いつものように「プラグイン」→「新規追加」で、「BJ Lazy Load」と検索すればすぐに出てきます。

BJ Lazy Load プラグインを追加する

または公式ページ「BJ Lazy Load」からダウンロードしてください。

インストールしたら有効化します。

BJ Lazy Load Options での設定

管理画面の「設定」→「BJ Lazy Load」で設定画面に行きます。

BJ Lazy Load Options の画面

基本的にはデフォルトのままでいいと思います。

もし不具合が出るようでしたら、チェックをひとつずつ外したり入れたりして、検証しながらやっていけばいいでしょう。

以下、全項目を説明しています。

Apply to content

これはコンテンツへの遅延読み込みの適用設定です。「Yes」にしておかないと、プラグインを入れた意味がありません。かならず「Yes」にしておきます

Apply to text widgets

ウィジェットで使用する画像に適用するかどうかです。プロフィール画像や、人気記事ランキングで出力している画像などは多いはずです。

Apply to post thumbnails

サムネイル画像は、ブログのトップページにある記事一覧や、記事下の関連記事リストの画像に使われています。

Apply to gravatars

これはコメント欄に表示されるアバター画像を表示させるか。

Lazy load images

記事内の画像(jpg, png など)に遅延ロードを適用させるかを設定します。たとえば写真を中心としたギャラリー系サイトや、画像を多用するブログであれば、必須項目になるでしょう。ここもかならず「Yes」にしておきます

Lazy load iframes

HTML の <iframe> 要素で、外部から画像を埋め込む場合があります。有名どころではflickr など。ほかにもSNS の埋め込みコードやアフィリエイト広告の画像で使われているときがあります。そういうものに適用させる設定です。

Theme loader function

プラグインのスクリプトコードをどこに挿入するをきいています。最近ではサイト高速化の理由から、ファーストビューで必要のないJavaScript はできるだけ後方に持っていくことが推奨されていますので、フッター部へ挿入される「wp_footer」のままにします。

問題が出るようであれば、まずは他のプラグインとの競合をチェックして、それでもだめなら「wp_head」への挿入に変更してください。

非同期読み込み・ ファイル遅延ロード系のプラグインはもちろんですが、意外と忘れやすいのがキャッシュ系プラグインです。「BJ Lazy Load」を有効化したら、いちどキャッシュを削除しておきましょう。

Placeholder Image URL

画像を遅延読み込みするまえに表示しておく代替画像があれば、画像URL を指定しておきます。これも何も指定しなくていいでしょう。

Skip images with classes

HTMLで特定のclass 名で表示させている画像だけは、プラグインを適用させたくない場合に使用します。特別な理由のないかぎり、何もする必要はありません。

Threshold

スクロールして表示される画像の、読み込みを開始するタイミングを数値(px 単位)で指定します。遅れて表示させないために「400」(これで画像が表示される400px 前になると読み込みを開始する)を指定しているサイトが多いそうです。

Infinite scroll

無限スクロールを実装しているテーマであれば「Yes」にしておきます。

Load hiDPI (retina) images

Apple 社の「Retina ディスプレイ」のように、高解像度で表示できるディスプレイに対応させたい場合には使用します。iPhone やiPad、MacBook Air などApple 社製品からのアクセスにはおすすめです。

ただし、コンテンツデリバリーネットワーク(CDN)を利用している場合には利用できません

Load responsive images

レスポンシブWebデザインに対応したWordPress テーマを利用しているサイト向けです。

ブレイクポイントによってサイトのデザインが切り替わり、表示されている画像のサイズが縮小するのであれば、小さい表示で読み込んでくれるそうです(当ブログで使用していないので未確認)。

こちらもコンテンツデリバリーネットワーク(CDN)を利用している場合には利用できません

個別ページでの設定

プラグインを有効化すると投稿画面や固定ページに以下の項目が追加されています。

新規投稿で「BJ Lazy Load」を適用するか選択できる

もし、特定の記事やページで遅延読み込みを避けたい理由があれば、こちらにチェックを入れておきます。

画像の遅延読み込みでサイト表示を高速化

Web ページの中でファイルサイズが大きくなるのはたいてい画像です。

これをできるだけ軽くするには、画像サイズを小さくしたり、ファイルを圧縮するなど、いろいろ方法がありますが、サイトにアップロードした後にできる方法として遅延ロードが一般的です。

WordPress のテーマや他に使っているプラグインの影響によって利用できないかもしれませんが、もし問題なく動くのであれば、サイト表示の高速化に期待できますし、閲覧するサイト訪問者のデバイスへの負担も減らすことができます。

関連記事

「Autoptimize」:HTML・JavaScript・CSS の複数ファイルを連結・圧縮して最適化してくれるプラグイン

「Autoptimize」は簡単に複数のファイルをまとめて圧縮してくれるプラグインです。キャッシュ機能もついています。似たような機能を持つプラグインもありますが、それらでデザインが崩れたり、JavaScript がうまく働かないようでしたら、このプラグインを利用するとよいでしょう。