vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

      2017/01/31

LINEで送る
Pocket

wp-lazy-load
こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書くときに、画像を記事に使っていますか?画像を多めにして記事を書けば、見やすくて分かりやすい記事になります。

ここで気をつけなればいけないことは、「画像をたくさん使うとサイトの読み込み時間が遅くなる」ということです。

WordPressではページにアクセスした時点で、記事内の画像が一気に読み込まれてしまうので、ページの表示速度が落ちてしまいます。

そこで、画像の読み込みのタイミングを「スクロールされたときに読み込む」設定にできる「Lazy Load」プラグインを導入して、ページ表示速度を向上させましょう。

スポンサーリンク

Lazy Loadの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「Lazy Load」と入力して検索、「いますぐインストール」をクリックします。

wp-lazy-load

インストールが完了したら「プラグインを有効化」をクリック。

wp-lazy-load2

これでLazy Loadの導入が完了しました。

導入しただけですぐ利用できるのですが、読み込みタイミングの設定だけ行っていきます。

lazy-load.jsに設定を記述

画像読み込みのタイミングは、デフォルトで「画像の200px上にスクロールが来たら読み込む」と設定されています。そのため、速くスクロールすると画像がチラついてしまうので、その調整をおこないましょう。

設定をおこなうファイルは

/wordpress/wp-content/plugins/lazy-load/js/lazy-load.js

にあります。

下記の行のdistanceの隣が200になっていると思いますので、これを400に変更しましょう。

$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 400 }, function() {

以上で設定は終了です。速くスクロールしても画像のチラつきがなくなったかと思います。

これでたくさんの画像を使って記事を書いても安心ですね。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
Lazy Loadは設定することもほとんどなく、ページの表示速度をあげることができて便利です。まだ導入していない方は是非この機会にどうぞ。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

WordPress全バックアップを「BackWPup+Dropbox」で行う

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

[WordPress]外部リンクに自動でアイコンをつける「External Links」プラグイン

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法

WordPressのプラグイン「Table of Contents Plus」を …

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

[WordPress]お問い合わせフォームを「Contact Form 7」で作成する

こんにちは、okutani(@okutani_t)です。サイトを運営していて必要 …

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

こんにちは、okutani(@okutani_t)です。WordPressで画像 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

[WordPress]『Better Delete Revision』で不要なリビジョンを削除しよう

こんにちは、okutani(@okutani_t)です。WordPressで記事 …

[WordPress] ソースコードを綺麗に表示!SyntaxHighlighter Evolvedプラグイン導入

こんにちは、okutani(@okutani_t)です。WordPressにソー …

WordPressのSEO対策定番プラグイン「All in One SEO Pack」導入手順

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。