WordPress講座(個別相談)

画像が多いページはどうしても読み込み時間がかかるので、表示速度が遅く感じたりPageSpeedのスコアが低くなったりと、悪い影響が出る場合があります。

画像が多いページでPageSpeedのスコアが低くなる

画像が多いページでPageSpeedのスコアが低くなる

SEOばかり気にする必要はありませんが、あまりにもスコアが低いと実際のビジネスでも損しているような気がして、気になりますよね。とはいえ、アップロードする画像を圧縮するのも限界があるので、画像の読み込みを後回しにすると良いかもしれません。そんなときに役立つBJ Lazy Loadプラグインを紹介します。

スポンサーリンク

画像を後で読み込むBJ Lazy Loadプラグイン

BJ Lazy Loadのような画像遅延読み込み系のプラグインを使うと、画面を下にスクロールして表示が必要になったタイミングで画像を読み込むことができます。

ページの表示時点で全画像を読み込むのに比べてパフォーマンスの向上が期待できます。また、表示速度が改善すればPageSpeedのスコアや実際のビジネスの成果にも良い影響を与えるでしょう。

BJ Lazy Loadプラグインのインストール

BJ Lazy Loadプラグインのインストール

BJ Lazy Loadプラグインは「設定」‐「BJ Lazy Load」メニューで動作設定できますが、初期設定のままでも大丈夫です。

BJ Lazy Loadプラグインの設定

BJ Lazy Loadプラグインの設定画面

インストールしただけでスコアが改善することも

インストールが完了したらもう一度PageSpeedを実行してみます。ページによってはウソのようにスコアが改善することもあります。この記事で検証したページでは30点から80点にアップしました。

BJ Lazy Loadプラグインをインストールしただけでスコアが改善

BJ Lazy Loadをインストールしただけでスコアが改善

90点までもう一歩ですが、これくらいに改善すれば問題ないと思います。プラグインをインストールしただけなので。あとは、他の改善も検討すればよいでしょう。

BJ Lazy Loadプラグインのインストール後にページのデザインが崩れるなどの問題が起きた場合はプラグインを停止してください。

BJ Lazy Loadの設定

設定項目をいくつか紹介します。

遅延読み込みから除外したい画像

Lazy Loadの対象から除外したい画像は設定メニューで指定できます。具体的には画像に付加されたクラス名をカンマ区切りで指定します。

Lazy Loadから除外したい画像

Lazy Loadから除外したい画像

読み込むタイミング

画像を読み込むタイミングは「Threshold」で設定できます。初期設定では「200」になっており、画面に表示される200px手前で読み込まれます。

画像を読み込むタイミング(200px手前)

画像を読み込むタイミング(200px手前)

読み込み中の画像

画像読み込み中の「ロード中…」の画像は「Placeholder Image URL」から登録できます。メディアライブラリにアップロードした画像のURLなどを入力します。初期設定は未入力で、読み込み中は何も表示されません。

ロード中画像の登録

ロード中画像の登録

まとめ

以上、画像遅延読み込みのBJ Lazy Loadプラグインを紹介しました。画像が多すぎて読み込みに時間がかかっているページにお悩みの方はお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク