プラグイン

遅延ロードでウェブの表示速度をアップ『lazyload』プラグインの使い方

将軍
将軍
こんにちは!将軍です!

ウェブサイトの表示速度が遅いだけでちょっとイライラしますよね。その原因にはネット回線が悪かったり、そのウェブサイトに使われている画像や動画ファイルが多かったりと様々な原因があると思います。表示速度が遅くなった結果、せっかく訪問してくれたのに違うサイトに行ってしまうようなことがあるかもしれません。

1つの記事に1枚くらいの画像であればあまり気にしなくても良いと思いますが、画像を多く使用する私のようなブログは、そのファイルを表示させるのにデータを使って表示速度が遅くなってしまいます。



そこで、画像をたくさん使用しているというサイトやブログにおすすめなのがlazyloadというプラグインです。このプラグインの機能を簡単に説明をしますと遅延ロードというものをしてくれます。

ワン太郎
ワン太郎
遅延ロード!?

聞きなれない言葉ですが、この遅延ロードという言葉も含めて解説をしていきたいと思います。

遅延ロードって?

遅延ロードは、画面に映し出されている画像だけを表示させるというものになります。

一つの記事に5枚の画像が使用されているとします。通常であればそのウェブサイトに訪れたときにその使用されている画像5枚を一気に読み込んで表示させるわけなのですが、遅延ロードはスクロールしたときに表示されている画像だけを表示させるというものになります。

ワン太郎
ワン太郎
なるほど!

その結果として、画像がたくさんあってもスクロールをして表示されている画像だけを表示するので、サイトの表示速度が上がるというわけになります。なんだか表示、表示ばっかり言ってすみません。

『lazyload』のインストール・有効化

次は早速『lazyload』のインストール・有効化作業を行いましょう。プラグインは下の画像のものになります。

WordPress管理画面→プラグイン→新規追加→右上にlazyloadを入力→今すぐインストール→有効化

この『lazyload』ですが、この記事を書いている時点(2018年10月現在)で新規追加から検索をしても検索結果の一番上には表示されていませんでした。なので、ある程度下にスクロールをして探してみてください。

または公式サイトからインストールをしてみるのも良いかもしれません。

『lazyload』の設定・使い方

lazyloadは特に設定をしなくてもしっかりと機能をしてくれるのですが、初期設定のままだと若干遅いようですのでプラグインの編集を行って、画像の表示速度を早くさせます。このままでも大丈夫だよ!という方はここで終了になります。もう少し速度をあげたい場合は次の作業に進みましょう。



次はプラグインの編集作業を行います。編集作業はほんの少しだけ数字をいじるだけなので不安な方も大丈夫だと思います。

WordPress管理画面→プラグイン→プラグイン編集の順に進みます。編集するプラグイン選択画面で『lazyload』を選択して、『lazyload.js』に合わせます。下の画像を参考にしてみてください。

編集画面で「distance: 200」の部分を「distance: 400」に変更をします。変更が終わったら『ファイルを更新』で終了になります。

この変更した設定の数値が「200」の場合は、画像ファイルの200px手前までスクロールされた段階で読み込みが開始されるという設定になっており、「400」の場合は、画像ファイルの400px手前までスクロールされた段階で読み込みが開始されるという設定になります。

ここから自分好みに設定をするのもアリだと思いますので、検証して行ってみてください。

まとめ

画像って自然と結構使っちゃいますよね。私なんか段落ごとに使っているので、記事が長くなってしまうと必然的に使ってしまうのでこういったプラグインは本当に助かります。

また、文章で説明をするよりも画像を使った説明の方が伝わりやすいと行った場面もあると思いますので、そういった際にも重宝しますね。



画像をたくさん使用するというかたはぜひ設定をしてみてください。もし、うまく機能しないようであれば使うのは控えて削除をした方が良いかもしれません。