インストールするだけでWEBサイトの表示速度を高速化!Lazy Loadの設定方法

気合いを入れて長い記事を書いていると、自然と記事に使う画像の数も増えていきますよね。
画像を用いて記事を書けばユーザーに分かりやすい記事を提供することができますし、書いている側からしても画像を使った方が記事の内容を説明しやすくなります。

しかし、あまり多く記事に画像を使ってしまうと、その分サイトの表示速度も遅くなってしまうという問題が発生します。

そんな問題を解消するためにも、WordPressプラグイン「Lazy Load」をインストールしましょう。

Lazy Loadは、ページのスクロールに応じて、視野に入らない画像の読み込みを後回しにすることで、サイトの表示速度を上げるプラグインです。

今回は、この便利プラグイン「Lazy Load」のインストールと設定方法を解説しますので、ぜひインストールしてみてください。
 
 

スポンサーリンク

Lazy Loadのインストール

まず、Lazy Loadをインストールします。

WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「Lazy Load」と検索します。

するとLazy Loadのプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

Lazy Loadの設定

基本的に、プラグインをインストールし有効化すれば、特に設定をしなくても大丈夫なのですが、
デフォルトの設定だと少しだけ画像の読み込みが遅いです。

別に気にならないという方はそのままで全然大丈夫ですが、少し気になるなという方は一緒に設定作業を進めてみてください。
 
 

  1. まず、管理画面左メニューから『プラグインインストール済みプラグイン』という順にクリックして進み、Lazy Loadの『編集』をクリックします。
  2.  
    『プラグイン→インストール済みプラグイン』という順にクリック
     
     

  3. 画面右の『lazy-load/js/lazy-load.js』をクリックします。
  4.  
    『lazy-load/js/lazy-load.js』をクリック
     
     

  5. 表示されたソースコードの中から「distance: 200」という部分を探し、
    ここを「distance: 400」に変更します。
  6.  
    ソースコード

    「画像の200px上にスクロールが来たら読み込む」と設定されていたのが、「画像の400px上にスクロールが来たら読み込む」という設定に変更されました。
    これで、デフォルト設定よりも早めに画像が読み込まれるようになります。

     
     

  7. 最後に、ページ下部の『ファイルを更新』ボタンをクリックして、設定を反映させましょう。

 
『ファイルを更新』ボタンをクリック
 
 
作業は以上となります。
お疲れ様でした。
 
 

まとめ

今回は、WordPressプラグイン「Lazy Load」のインストールと設定方法について解説しました。

Lazy Loadは、ページのスクロールに応じて、視野に入らない画像の読み込みを後回しにすることで、サイトの表示速度を上げてくれる便利プラグインです。

たくさん画像を使った記事でも、Lazy Loadをインストールしていれば、記事がサクサク表示されユーザーにもストレスを与えることがなくなります。

離脱率を下げるためにも非常に重要な役割を持ったプラグインですので、まだ使っていない方はぜひ導入を検討してみてください。
 
 

スポンサーリンク