このブログではスクリーンショットを多用したり、Youtubeの動画を張ったりと、記事によっては非常に重たくなってしまう場合があるので、画像を遅延表示させたいと考えていた所、プラグインで対応可能という事だったので早速導入してみました。
画像の遅延表示によるメリットですが、これはひとえにサイトの表示速度の向上という部分に大きく貢献してくれます。
通常、サイトのHTMLを読み込む場合はページ内の上から下までソースコードを読み取って、さらに画像も読み込んで、それがすべて完了した時点で描画されるわけですが、画像の多いコンテンツなんかは、画像の読み込み部分がネックになり、表示速度が非常に遅くなってしまいます。
そこを改善させるのがこの画像の遅延表示。
ページのスクロールに合わせて画像を読み込むことにより、表示に必要な分だけデータを取ってくるようになるので、通信の負荷が抑えられサイトの表示速度が向上します。
それをWordpressで実現できるプラグインが「BJ LazyLoad」。
他にも同様のプラグインはあるようですが、比較的評価が高かったコチラを導入してみました。
ダウンロードとインストール
プラグインのサイトはこちらから
http://wordpress.org/plugins/bj-lazy-load/
ワードプレスの管理画面から「BJ LazyLoad」を検索するだけでインストールは簡単に行えます。
導入
プラグインの一覧から有効化するだけで基本的には完了です。
コンテンツを開いてみると画像が遅延表示されているのがわかります。
設定画面
設定画面の各種項目は下記の通り。
基本はデフォルトの設定のままで問題はないかと思われます。
| Apply to content | 記事コンテンツを遅延読み込みに対応させるか |
|---|---|
| Apply to post thumbnails | サムネイル画像を遅延に対応させるか。記事一覧などでサムネイル表示をさせている場合は、この画像が遅延表示されます。 |
| Apply to gravatars | 「Gravater」アイコンを遅延に対応させるかどうか。 |
| Lazy load images | 画像ファイルを遅延読み込みさせるかどうか。これはＯＮにしておきましょう |
| Lazy load iFrame | 埋め込まれたYoutubeのタグや広告などでiFrameで読み込まれているものを遅延させます。 |
| Theme loader function | LazyLoadのコードをどこに書くか。どちらでも問題なく動作するようですが、先に読み込ませたい場合はwp_headにしておけばいいでしょう。基本的にはwp_footerでも動くようです |
| Placeholder Image URL | 画像が表示されるまでに表示される画像。よくある読み込みのグリグリ回るアレとかを入れればいいんですが、何でもかんでもその画像が出てしまうので、空欄のままが良いかと思われます。 グリグリはこんなやつですね。  |
| 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」。
現在、埋め込みが多い記事にてウェブマスターツールのコンテンツ表示速度の警告がでているんですが、これが改善されれば効果が出たという事になります。この辺はもう少し様子を見てみようと思います。
ちなみに画像は「フワっ」と遅延表示されていますか？他の記事なんかも見てお試し下さい。
コメント