どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ブログやサイトの表示速度(読み込み速度)は、どれだけデータを表示・読み込むかによって大きく異なります。
データ量が少なければそれだけ早く表示させることができますし、データ量が多くなるとその分読み込みに時間がかかり表示も遅れてしまいます。
データとして最も重たいのは「動画」、次に「画像」ですが、１記事内にいくつも動画を入れることはそうそうないのでそこまで心配することもありませんが、画像は記事の内容によっては数枚から十数枚は使用することもあります。
使用する画像枚数が多くなればそれだけ読み込みに時間が必要になる為、表示速度が遅くなり記事の閲覧に支障をきたす原因となります。
そこで今回の「Lazy Load」プラグインを導入すれば、画像を遅延ロードしてくれるので表示速度を劇的にアップしてくれます。
画像の遅延ロードとは
「遅延ロード」とは一体何なのかというと、通常の場合は記事やページにアクセスした時は記事内の画像データを全て読み込んでから表示しますが、それを見える範囲だけ読み込みを行うようにすることです。
例えば記事内に10枚の画像データがあった場合、アクセスした段階で10枚全ての画像を一度に読み込みを行ってから表示するので、画像の枚数分表示速度が遅くなります。
しかし、「Lazy Load」は10枚の画像データを一度に読み込むのではなく、画面の表示範囲だけの画像を読み込んでスクロールされた時に次の画像を読み込み、表示することができるようになります。
これによって一度に読み込むデータ量が少なくて済むので、結果的に見ると記事の表示速度がアップすることになります。
「Lazy Load」の遅延ロードは、データ量が多いワードプレスブログやサイトに対して非常にメリットがあるプラグインです。
それでは「Lazy Load」プラグインの導入から設定と使い方などをご紹介していきます。
「Lazy Load」のインストールと有効化
まずはワードプレスに「Lazy Load」プラグインをインストールする為、管理画面メニューから「プラグイン」⇒『新規追加』をクリックします。
画面右上にある検索ボックス内に「Lazy Load」と入力して、検索で表示された対象のプラグインの「今すぐインストール」をクリックし、完了したら「有効化」をクリックして下さい。
「Lazy Load」のプラグインは、検索結果の３列目付近に表示されていると思います。
これでワードプレスにプラグインのインストール＆有効化が完了です。
「Lazy Load」の設定と使い方
「Lazy Load」はインストール＆有効化するだけで、設定しなくても画像の遅延ロードを行ってくれる便利なプラグインです。
ただ、デフォルト設定のままだと画像の読み込みをしてから表示するまでの速度が少し遅いので、これを早める設定をしておくことをオススメします。
そのままでも大丈夫という方は、ここで「Lazy Load」に関しては以上となりますが、遅延ロードの速度アップを希望される方はここから先の設定も行いましょう。
「遅延ロード」速度アップの設定
「Lazy Load」の遅延ロード速度をアップさせるには、ワードプレスの管理画面メニューにある「プラグイン」⇒『プラグイン編集』をクリックします。
編集画面が表示されるので右上の「」で、「Lazy Load」を選んで『選択』をクリックします。
プラグインファイルの一覧に、『lazy-load/js/lazy-load.js』の項目があるのでクリックします。
表示されているコードの中から、以下の赤枠で囲った「distance: 200」の部分を探して下さい。
この「distance: 200」の数字の部分を「200」⇒「400」に変更しましょう。
数値が「200」の場合は、画像ファイルの200px手前までスクロールされた段階で読み込みが開始される設定となっています。
これを400pxに範囲を広げることによって、遅延ロードのタイミングを早めることができます。
内容を変更したら下にある『ファイルを更新』をクリックします。
「Lazy Load」プラグインの設定と使い方はこれで以上となりますので、最後に遅延ロードが正常に反映されているか確認しておきましょう。
「Lazy Load」まとめ
ワードプレスブログを運営していくうちに、データ量は必然的に増加していくものなので「Lazy Load」を導入して表示速度の対策を行っておく方がいいでしょう。
コンテンツの内容も重要ですが、質の高い記事であってもユーザーが閲覧する際に表示速度が遅ければ、それがストレスになりブログを離脱してしまうかもしれません。
そうならない為にも「Lazy Load」の遅延ロードを活用して、閲覧をストレスなくスムーズにできるよう環境を整えていきましょう。
ただ、お使いのワードプレステンプレートによっては遅延ロードが上手く機能しない場合もあるので、その時はプラグインの使用は控えるようにして下さい。
