遅延読み込みを実装し、サイトを高速化する【Lazy Loader】の使い方

サイトの表示速度は、速い方がいいものです。

いつまでもページの読み込みが終わらないサイトだと『もういいや』となって、見るのをやめてしまうことだってあるでしょう。

サイトの表示速度を高速化させるためには『遅延読み込み』が有効です。

遅延読み込みとは、画像などを遅れて読み込ませる方法のこと。

通常サイトの読み込み時には、ページ内の全ての画像を読み込んだ上でページを表示します。
ですが、遅延読み込みを実行すると、ページをスクロールして画像が表示される領域に入ったときにはじめて画像の読み込みが行われます。

一度にすべての画像を読み込まなくなるので、結果としてページの表示速度が速くなります。

Lazy Loader】は、遅延読み込みを実装することのできるプラグイン。

画像やiframe、動画などを遅延読み込みさせることができます。

こんな場合におススメ

  • サイトの表示速度を高速化したい
  • 遅延読み込みを実装したい
プラグインを使ってできること

  • 画像やiframe、動画などを遅延読み込みすることで、サイトを高速化することができる
  • 指定した投稿・固定ページ・カスタム投稿で遅延読み込みを無効化することができる
スポンサーリンク

インストール

Lazy Loader インストール
Lazy Loader インストール
  1. 管理画面 > プラグイン > 新規追加 とクリックする
  2. Lazy Loaderで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

Lazy Loader

手動でインストールする方法はコチラ

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

WordPressのプラグインをインストールする方法

【Lazy Loader】の設定と使用方法

プラグインを有効化すると、自動的に画像が遅延読み込みされるようになります。
iframeや動画などを遅延読み込みさせたい場合は、設定を変更します。

  • STEP1
    メディアを開く
    プラグインを有効化すると、管理画面 > 設定 > メディア内に『Lazy Loader options』の設定項目が追加されるので、そこから設定を行います。

    Lazy Loader 使用方法

  • STEP2
    項目の設定
    Lazy Loader 使用方法
    Lazy Loader 使用方法
    CSS classes to exclude遅延読み込みから除外するCSSのクラス名を指定(複数指定する場合はカンマで区切る)
    Enable lazy loading for iframesiframeを遅延読み込みするかの選択
    Include lazysizes native loading pluginブラウザが遅延読み込み機能を実装している場合に、ブラウザ側の機能を使用するかの選択
    Include lazysizes unveilhooks plugin背景画像、スクリプト、スタイル、ビデオの遅延読み込みのサポートを追加するかの選択(手動でマークアップする必要あり)
    Enable lazy loading for inline background imagesインライン背景画像を遅延読み込みするかの選択
    Enable lazy loading for videos動画を遅延読み込みするかの選択
    Enable lazy loading for audios音声を遅延読み込みするかの選択
    Include lazysizes aspectratio plugin画像のアスペクト比を維持しながら遅延読み込みするかの選択
    Display a loading spinnerスピナー(ロード中のアニメーション)を表示するかの選択
    Color of the spinnerスピナーの色を選択
    Enable option to disable plugin per page/post指定した投稿の遅延読み込みを無効化できるようにするかの選択
    選択した場合、投稿画面の公開ボックス内に、遅延読み込みを無効にするチェックボックスが表示される
    Modify the default configデフォルトの設定を変更したい場合に記述
    lazysizesスクリプトの構成にカスタム値を追加できる
  • STEP3
    保存
    項目を設定したら変更を保存します。

    保存後、選択した項目が遅延読み込みされるようになります。

スポンサーリンク

動作確認環境

  • バージョン 5.1.2
  • WordPress 5.3.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Lazy Loader】は、遅延読み込みを実装することのできるプラグイン。
  • 画像やiframe、動画などを遅延読み込みさせることで、サイトの表示速度を高速化します。

他に遅延読み込みを実装するプラグイン

遅延読み込みを実装し、サイトを高速化する【Lazy Loader】の使い方
最新情報をチェックしよう!
スポンサーリンク