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

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

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

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

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

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

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

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

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

こんな場合におススメ

  • サイトの表示速度を高速化したい
  • 遅延読み込みを実装したい
プラグインを使ってできること
  • 画像やiframe、動画などを遅延読み込みすることで、サイトを高速化することができる
  • 指定した投稿・固定ページ・カスタム投稿で遅延読み込みを無効化することができる
目次

インストール

Lazy Loader インストール
Lazy Loader インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Lazy Loaderで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

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

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

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

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

STEP
メディアを開く

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

Lazy Loader 使用方法
STEP
項目の設定
Lazy Loader 使用方法
Lazy Loader 使用方法
CSS classes to exclude遅延読み込みから除外するCSSのクラス名を指定(複数指定する場合はカンマで区切る)
Additional filters追加処理したいWordPressフィルターを1行ずつ指定
Enable lazy loading for iframesiframeを遅延読み込みするかの選択
PHP関数名の正規表現に一致しないものはすべて削除される
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指定した投稿の遅延読み込みを無効化できるようにするかの選択 選択した場合、投稿画面の公開ボックス内に、遅延読み込みを無効にするチェックボックスが表示される
Process the complete markupすべての画像・メディアを遅延読み込みさせるかの選択
Modify the default configデフォルトの設定を変更したい場合に記述 lazysizesスクリプトの構成にカスタム値を追加できる
STEP
保存

項目を設定したら変更を保存します。

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

動作確認環境

  • バージョン 6.0.1
  • WordPress 5.4.1

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

まとめ

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