画像を遅延表示するWordPressプラグイン「BJ LazyLoad」をインストールしてみた

シェアする

  • このエントリーをはてなブックマークに追加
  • 35

lazy_load
このブログではスクリーンショットを多用したり、Youtubeの動画を張ったりと、記事によっては非常に重たくなってしまう場合があるので、画像を遅延表示させたいと考えていた所、プラグインで対応可能という事だったので早速導入してみました。

画像の遅延表示によるメリットですが、これはひとえにサイトの表示速度の向上という部分に大きく貢献してくれます。

通常、サイトのHTMLを読み込む場合はページ内の上から下までソースコードを読み取って、さらに画像も読み込んで、それがすべて完了した時点で描画されるわけですが、画像の多いコンテンツなんかは、画像の読み込み部分がネックになり、表示速度が非常に遅くなってしまいます。

そこを改善させるのがこの画像の遅延表示。

ページのスクロールに合わせて画像を読み込むことにより、表示に必要な分だけデータを取ってくるようになるので、通信の負荷が抑えられサイトの表示速度が向上します。

それをWordpressで実現できるプラグインが「BJ LazyLoad」。

他にも同様のプラグインはあるようですが、比較的評価が高かったコチラを導入してみました。

ダウンロードとインストール


プラグインのサイトはこちらから
WordPress › BJ Lazy Load « WordPress Plugins
http://wordpress.org/plugins/bj-lazy-load/

ワードプレスの管理画面から「BJ LazyLoad」を検索するだけでインストールは簡単に行えます。

導入


プラグインの一覧から有効化するだけで基本的には完了です。
コンテンツを開いてみると画像が遅延表示されているのがわかります。

設定画面


設定画面の各種項目は下記の通り。
BJ Lazy Load Options
基本はデフォルトの設定のままで問題はないかと思われます。

Apply to content記事コンテンツを遅延読み込みに対応させるか
Apply to post thumbnailsサムネイル画像を遅延に対応させるか。記事一覧などでサムネイル表示をさせている場合は、この画像が遅延表示されます。
Apply to gravatars「Gravater」アイコンを遅延に対応させるかどうか。
Lazy load images画像ファイルを遅延読み込みさせるかどうか。これはONにしておきましょう
Lazy load iFrame埋め込まれたYoutubeのタグや広告などでiFrameで読み込まれているものを遅延させます。
Theme loader functionLazyLoadのコードをどこに書くか。どちらでも問題なく動作するようですが、先に読み込ませたい場合はwp_headにしておけばいいでしょう。基本的にはwp_footerでも動くようです
Placeholder Image URL画像が表示されるまでに表示される画像。よくある読み込みのグリグリ回るアレとかを入れればいいんですが、何でもかんでもその画像が出てしまうので、空欄のままが良いかと思われます。
グリグリはこんなやつですね。
img_loading
Skip images with classes遅延表示対象外とするクラス名を設定します。「class=”no-lazy”」などと画像タグにクラス名をつけ、ここにno-lazyを入れておけば、遅延表示の対象外となります。
Thresholdしきい値(なんですが、なんだろうこれ。viewportタグがある場合のしきい値のようですが、この設定によってどのように変化するのかが謎
Infinite scroll自動的に続きのコンテンツを読み込んでくれる「無限スクロール」に対応させるかどうか。
Load hiDPI (retina) images高解像度の画像がサーバーにあり、さらにディスプレイとブラウザが対応している場合はそちらを表示してくれる機能のようです。CDNを使用している場合はOFFにするなとの事。
Load responsive imagesテーマによって画像が縮小されている場合は、縮小版の画像を自動的に取得してくれるという事のようです。CDNを使用している場合はOFFにするなとの事。

というわけで、導入してみた「BJ LazyLoad」。
現在、埋め込みが多い記事にてウェブマスターツールのコンテンツ表示速度の警告がでているんですが、これが改善されれば効果が出たという事になります。この辺はもう少し様子を見てみようと思います。

ちなみに画像は「フワっ」と遅延表示されていますか?他の記事なんかも見てお試し下さい。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする