プラグイン「Lazy Load」を解説！高速化して読みやすいWebサイトに！

たくさんの記事を真剣に書いたにもかかわらず、そのwebサイトの閲覧数（集客）が伸びない場合は、「チューニング」をする必要があるかもしれません。

Google検索で表示される順位は、たくさんの要素で決められていると言われていますが、webサイトの「表示速度」その検索順位に特に大きく影響を与える要素だと言われています。

今回は、webサイトのスピードアップには欠かせない「画像の遅延読み込み」を実現するプラグイン「Lazy Load」をご紹介したいと思います。

1. webサイトの表示を高速化するには

Webサイトの表示を高速化するにはさまざまな方法がありますが、ざっくり分けると以下の４つが高速化の対策です。

「画像の遅延読み込み（画像の読み込みを遅らせる機能）」の導入は、特にスマートフォンを使ってwebサイトを閲覧するユーザーには超重要です。

1-1. SEOを意識するならモバイルファーストは外せない

モバイルファーストを簡単に言い換えると「スマホを使っているお客様が重要」というすごく当たり前のことを言っています。

実際にGoogleの検索順位で上位に入っているサイトは、スマホでの閲覧に配慮しているサイトばかり、いかにスマホへの配慮が重要なのかわかります。

1-2. 画像の遅延読み込みはスマホ閲覧には超重要

スマホで何かを調べるとき、読み込みの遅いサイトにイライラした経験はありませんか？

表示されるまでの時間が長いwebサイトは、まず読まれません。読み込み中のクルクルが10秒も続けば、戻って別のwebサイトを見ると思います。

特に画像は、webサイトのデータの中でも容量が大きく、読み込むデータの8割を占めているとも言われます。つまり、表示されるまでの時間が長くなる大きな要因で、ここをしっかり対応すれば、ある程度の高速化が望めるわけです。

 

「画像の遅延読み込み」と聞くと「遅延」という言葉から良い印象を持たない方もいるかもしれません。

簡単に言えば、スクロールすると表示される画像、つまり「まだまだ表示されない画像」の読み込みを後回しにして、そのページの先頭部分のデータや画像を優先して表示して、閲覧者に素早く提供する（読んでもらう）仕組みのことです。

2. 「画像の遅延読み込み」をwebサイトに取り入れるには？

今回紹介するWordPressプラグインは「Lazy Load」という名前ですが、「画像の遅延読み込み」を表す技術の総称として呼ばれることもあります。

「画像の遅延読み込み」を実現するには、

1. J-Queryと呼ばれるJavaScriptライブラリをwebサイトに導入する方法
2. 「画像の遅延読み込み」機能のあるWordPressテーマを導入する方法
3. 「Lazy Load」のようなWordPressプラグインを使う方法

の3つがあります。今回は『 3.「Lazy Load」のようなWordPressプラグインを使う方法 』ですが、機会があれば１や２も解説しますね。

3. Lazy Loadの導入方法

「Lazy Load」はWordPress公式プラグインなので、WordPress管理画面>プラグイン>新規追加から簡単に導入できます。

 

検索ボックスに「Lazy Load」と入力すると、似たようなプラグインがたくさん表示されてしまいます。

肝心な「Lazy Load」はかなり下のほうに埋もれていて探しづらいので、製作者名「Dave Artz」で検索するのが効率的です。

「今すぐインストール」→「有効化」をクリックすれば完了です

4. Lazy Loadの使い方

Lazy Loadの使い方はとてもシンプル。初期設定や操作画面などはなくインストールが終わればすでに機能しています。

あまりにもあっけないので心配になるかもしれませんが、問題ありませんので安心してください！

4-1. Lazy Loadの注意点

「Lazy Load」を導入して、逆にサイトの表示スピードが遅くなることがあります。これは、webサイトに遅延読み込みの機能が重複して入っている可能性がありますので、下記のような項目をチェックしてください。

重複して「画像の遅延読み込み」が機能している場合はテーマやJ-Queryを無効にするか「Lazy Load」プラグインを削除する必要があります。

4-2. Lazy Loadをカスタマイズ

Lazy Loadは構造がシンプルなのでカスタマイズが簡単にできますが、リスクを伴う作業なのでカスタマイズ作業を行う前にはサイトのバックアップを行うことを強くお勧めします。

プラグインをカスタマイズする場合は、プラグイン一覧から「Lazy Load」を停止してから行ってください。

Lazy Loadのカスタマイズは、WordPress管理画面 > プラグイン > プラグインエディタからLazy Loadを選択します。

4-2-1. 画像の表示読み込みを大きくする

画像の読み込み範囲を修正することで、スマホの画面を早くスクロールするユーザーにも対応できます。

修正する箇所は、js > lazy-load.js の6行目の「200」と記載されている箇所で、この値を大きくすると画像を読み込む範囲を広くできます。

変更前

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

変更後

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

4-2-2. Googlebotに対応させる

「Lazy Load」を導入すると人間には効果的ですが、Googlebotというサイトを巡回しているプログラムには認識されないためSEO的に不利なので、これを改善します。

Lazy-load.php の49行目から51行目を下記のように変更します。

変更前

		// Don't lazyload for feeds, previews, mobile
		if( is_feed() || is_preview() )
			return $content;

変更後

		// Don't lazyload for feeds, previews, mobile
		if( is_feed() || is_preview() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot') )
			return $content;

5. 「Lazy Load」のメリット・デメリット

5-1.「Lazy Load」のメリット

WordPressプラグイン「Lazy Load」のメリットは下記のとおりです。

5-2. 「Lazy Load」のデメリット

良いことをいくつか書きましたが、「Lazy Load」にはデメリットもあります。

WordPressは日々、進化し続けています。それに合わせてプラグインもアップデートされて欲しいところですが、現時点で最終更新が2019年です。プラグインがアップデートされないと不具合を起こす可能性もあり、半年以内にアップデートされなければ、別のプラグインに置き換えようかなと思っているところです。

6. まとめ

スマートフォンからの表示スピードを上げることは、Googleの検索順位を上げるための重要な要素です。

そのための方法の１つとして「画像の遅延読み込み」のプラグイン「Lazy Load」を徹底解説しました！

結構メジャーな対応策なので、「画像の遅延読み込み」機能を持つテーマもたくさんあります。いつの間にか重複していないように気を付けてくださいね！