サイトを訪れた際、画像が読み込まれるのに時間がかかりイライラした経験はありませんか？
画像を多用しているとどうしても読み込みに時間がかかってしまい、ユーザーの使いづらさに繋がります。かといって文字だけというのも味気ないし画像を使った方が説明もしやすい…そんなジレンマを解決してくれるのが「LazyLoad」プラグインです。
画面に映っていない画像の読み込みを遅延させる=スクロールしてエリアが画面内に入ったタイミングで画像を読み込む事で、サイトの初期表示速度を大きく改善する事ができます。
今回はそんな画像の遅延読み込みプラグイン「LazyLoad」の使い方と設定時のちょっとしたコツをお伝えしていきます。
そもそも遅延読み込みって？
ウェブサイトはユーザーがアクセスしてくると画像やテキストをページに表示させるのですが、画像が多いサイトだと一つ一つ画像を読み込まなくてはいけないので時間がかかってしまいます。
しかし、実際には全ての画像を一度に読み込もうが一部の画像だけを先に読み込もうが、ユーザーが最初に見える範囲は一緒です。
ですので、見えていない範囲を最初から表示しておく必要は無く、ユーザーがその画像の表示されるエリアに到達する「少し前」に画像が読み込まれていれば問題ないわけです。
これが画像の遅延読み込みで、こうする事によってページの初期表示速度をあげる事が可能になります。
LazyLoadをインストールする
前置きが長くなりましたのでさっそくインストールの手順に入りましょう。
とはいえ手順はいつも通り、
管理画面の左メニューから「プラグイン」→「新規追加」の順に進み、Lazy Loadと検索します。
すると
このようにプラグインがヒットしますので、「今すぐインストール」→「有効化」で準備は完了です。
＼プラグインのインストール方法をもう少し詳しく見たい方はこちら／
LazyLoadの使い方
それでは次にLazyLoadプラグインの使い方を、と行きたいところですが、このプラグインは有効化した時点で既にサイト内で画像が遅延読み込みされる状態になっています。
使い方を覚えたり小難しい設定をせずに使えるので絶対に入れておくべきプラグインです。
ちょっとしたコツ
とはいえ一点だけちょっと気になる点もあります。
このLazyLoadですが、初期設定では「画像の上200pxの位置までスクロールしてきた時」に画像を読み込む仕様になっています。
ユーザーのネット環境にもよりますが、200pxだとスクロールから表示までのタイミングが早すぎるせいで画像の読み込みが間に合わない場合があります。
その為、プラグインの記述を少し変更して画像読み込みが始まるタイミングを調整しておくとより使いやすくなります。
lazy-load.jsの記述を変更する
管理画面左メニューの「プラグイン」→「プラグイン編集」でプラグインの記述を編集する画面に映ります。
初めてこの画面を開く時は注意書きが表示されますが、「理解しました」を押して次に進みましょう。
まずは「編集するプラグインを選択」のエリアでLazy Loadを選択します。
jsという項目の▶マークをクリックするとファイルがいくつか表示されますので、その中の「lazy-load.js」を選択します。
編集画面に「distance：200」という部分がありますので、こちらを400に変更します。
こうする事で、画像の上400pxの位置から画像の読み込みが開始されますので表示に少し猶予が生まれます。
なおこちらの数値はあくまで一例ですので、色々と設定をしながらサイトに合うタイミングに調整してみてください。
変更が完了したら「ファイルを更新」を押して保存しましょう。
まとめ
ということでLazy Loadプラグインの使い方（といっていいのか分からないぐらい簡単でしたが…）でした。
サイトの表示速度を速めることはユーザーの使い勝手に大きく影響を与えるだけでなく、SEOの観点からも推奨される内容です。
プラグインをインストールするだけでユーザーがサイトを見やすくなるなら入れておいて損はないですよね。
まだ使っていないという方は是非入れてみてください。
