WordPressで画像・動画を遅延読み込みする方法とは?【a3 Lazy Load】

どもども!元ニートPCゲーマーのヨッチです。( miraiyotch

サイトを高速化すると言えば、あなたはどんな方法が思いつくでしょうか?
その方法の1つとして、Lazy Load(遅延読み込み)があります。

この記事では、WordPressで画像・動画を遅延読み込みできる「a3 Lazy Load」を紹介します。

画像・動画は、テキストに比べてずっと容量が大きいです。
なので、あえて後から読み込むことで、ページの表示速度を高速化するというわけです。

プラグインを使って、サクッとLazy Loadを導入してみましょう!

a3 Lazy Loadの使い方【画像・動画の遅延読み込み】

何はともあれ、まずは「a3 Lazy Load」のインストールです。
「WordPressの管理画面」→「プラグイン」→「新規追加」→「a3 Lazy Load」で検索しましょう。

a3 Lazy Load

特に設定はしなくても、すぐに画像・動画の遅延読み込みが始まります。
細かい設定もできますが、とりあえず動かしたい場合にはそのままでもOKです。

a3 Lazy Loadのメリットとは?

a3 Lazy Loadの良いところは、デフォルトで動画にも対応していることです。
YouTubeにも使える、数少ないプラグインなのです。

YouTubeの動画って、画像よりもずっとロードが遅いですよね。
このプラグインは動画も遅延読み込みできるので、サイト表示がグッと速くなります。

特に速度が変わるのは、スマホなどの低速通信です。
明らかに表示速度が違うので、快適さも段違いですよ。

設定を変えれば、「画像はそのまま、動画だけ遅延読み込み」という使い方もできます。

a3 Lazy Loadの設定【覚えておきたい項目7選】

ここから先は、覚えておきたい7つの設定項目をお伝えしていきますね!

  1. Lazy Load Activation
  2. Lazy Load Images
  3. Lazy Load Videos and iframes
  4. Exclude by URI's and Page Types
  5. Script Load Optimization
  6. Effect & Style
  7. Image Load Threshold

ちなみに設定画面は、「設定」→「a3 Lazy Load」から開くことができます。

「設定」→「a3 Lazy Load」をクリック

【1】Lazy Load Activation

Lazy Load Activation

「Lazy Load Activation」では、遅延読み込み(レイジーロード)の有効化を設定できます。
基本的には、常に「ON」にしておきましょう。

Enable Lazy Load
「Lazy Load」の有効化
オフにすると遅延読み込みしなくなる

【2】Lazy Load Images

Lazy Load Images

「Lazy Load Images」では、画像の遅延読み込みについての設定ができます。

Enable Lazy Load for Images
画像の遅延読み込みを有効化(全体設定)
Images in Content
記事内の画像に適用
Images in Widgets
ウィジェットの画像に適用
Post Thumbnails
サムネイル画像に適用
Gravatars
Gravatarの画像に適用
Noscript Support
Javascriptが無効でも、「Noscript」タグを有効化

【3】Lazy Load Videos and iframes

Lazy Load Videos and iframes

「Lazy Load Videos and iframes」では、動画の遅延読み込みについての設定ができます。
この設定は、動画だけでなく「iframe」という外部読み込みのタグにも適用されます。

Video and iframes
動画の遅延読み込みを有効化(全体設定)
In Content
記事内の動画に適用
In Widgets
ウィジェットの動画に適用
Noscript Support
Javascriptが無効でも、「Noscript」タグを有効化

【4】Exclude by URI's and Page Types

Exclude by URI's and Page Types

「Exclude by URI's and Page Types」では、遅延読み込みを除外するページを設定できます。

URIs
除外するURI・URLを入力する

Page Type Exclusions

「Page Type Exclusions」では、ページのタイプ別にまとめて設定できます。

Home Page
ホームページで除外
Front Page
フロントページで除外
Posts
投稿ページで除外
Pages
固定ページで除外
Post Categories
カテゴリーページで除外
Post Tags
タグページで除外
Search Page
検索結果で除外
Author Pages
著者ページで除外
Archive Pages
アーカイブページで除外

【5】Script Load Optimization

Script Load Optimization

「Script Load Optimization」では、スクリプトを読み込む場所を選択できます。
何か理由がない限りは、「FOOTER」のままで大丈夫です。

Theme Loader Function
「HEADER」HTMLのヘッダーで読み込み
「FOOTER」HTMLのフッターで読み込み

【6】Effect & Style

Effect & Style

「Effect & Style」では、読み込み中のエフェクトを選べます。

Loading Effect
「SPINNER」読み込み中に回転アイコンが表示
「FADE IN」フェードインで画像が表示
Loading Background Colour
ロード中の背景色を設定できる

【7】Image Load Threshold

Image Load Threshold

「Image Load Threshold」では、画像が読み込まれるまでの距離をピクセルで指定できます。
距離が長ければ長いほど、より早く画像が先読みされます。

Threshold (px)
0=画像の位置で読み込み開始
300=画像より300px手前で読み込み開始

【まとめ】遅延読み込みでサイト表示を高速化しよう!

a3 Lazy Load

僕はいくつかプラグインを使ってみて、最終的に「a3 Lazy Load」に落ち着きました。
遅延読み込みできるプラグインの中でもすごく使いやすいですよ。

画像・動画のオンオフ、ページの除外など、設定も細かく変えることができます。
もちろん初期設定のまま使うのもOKです。

カスタマイズに幅があるので、それだけ自由度の高いプラグインなのです。

スマホとかだと、明らかに動画は表示が遅くなります。
なので、読者さんに不快な思いをさせていたかもしれません。

僕もあれこれ考えた結果、レイジーロードを導入しました。
平日のお昼とかにスマホでチェックするとわかるのですが、明らかに表示速度は変わりますよ。

もしサイトの高速化を考えていたら、「a3 Lazy Load」を検討してみてはどうでしょうか?