WordPress サイトの速度を速くする画像遅延ロード（Lazy Load）プラグイン

画像が多い場合やYouTubeなどの動画が多くのサイトの場合、サイトの読み込み速度が遅くなることがあります。 この場合、画像や動画の読み込みを遅延させてサイトの速度を向上させることができます。

この記事では、イメージ遅延ロード機能を提供するプラグインについて説明します。

この記事を書いた後 WordPress 5.4バージョン以降、イメージレイジロード機能 WordPressに基本的に搭載されています。下の「画像遅延機能を使ってもいいですか？」セクションを参照してください。画像をWEBP形式に変換すると、画像のサイズが小さくなり、ページの読み込み速度が向上します（「画像最適化 WebP 変換プラグイン Converter for Media"参照）。

画像遅延ロード機能を提供する WordPress テーマ

有料テーマでは、画像遅延ロード（レイジロード）機能をテーマオプションを介して提供する場合があります。 このブログの現在使用されている Newspaper (Newspaper）テーマでも画像遅延ロード機能を提供します。

Newspaper テーマの画像遅延ロード機能を有効にするには、 WordPress 伝言板> Newspaper > Theme panel > Template Settingsに移動し、 Use Loading Animation Image オプションをオンにして [設定の保存]をクリックします。

ベストセラーのテーマである Avada (Avada)も画像遅延ロードオプションが搭載されています。 Avada テーマは WordPress 伝言板> Avada > Theme Options > Performanceをクリックして、 遅延読み込みを有効にする オプションを Onに設定すると、レイジロード機能が有効になります。

使用中のテーマからイメージ遅延ローディング機能を提供していない場合は、プラグインを使用してイメージを遅延ロードすることができます。

WordPress サイトの速度を速くする画像遅延ロードプラグイン

a3 Lazy Loadプラグイン

a3遅延ロードサイトページの読み込み速度を速くするモバイル中心（Mobile Oriented）の使用が非常に便利なプラグインです。 サイトのコンテンツが多いほど、このプラグインの効果がより大きく表示されます。

このプラグインは、画像遅延ロードだけでなく、動画の遅延ローディング機能も提供してYouTube、Vimeo、HTML5動画などすべての WordPress ビデオ埋め込み（Video Embed）をサポートします。

画像レイジロード：

次の項目について画像遅延ロード機能を使用するかどうかを設定（ON / OFF）することができます：

• 文、ページ、カスタムポストタイプ（すべてのコンテンツ領域）
• ウィジェット（サイドバー、ヘッダ、フッター）
• 記事サムネイルの適用
• はいバタ（Gravatar）に適用

動画レイジロード：

次の項目について動画遅延ロード機能を有効にするかどうかを設定（ON / OFF）することができます：

• 文とページのURLに埋め込まれた動画（すべてのコンテンツ領域）
• ウィジェットタイプ、テキストウィジェットおよびHTMLウィジェットの動画
• 유튜브
• 動画（Video）
• 人気YouTubeの挿入プラグインとの互換性

プラグインを使用してイメージを遅延ロードする場合、テーマオプション内の画像遅延（提供される場合）は、無効にしてください。

Lazy Load - Optimize Imagesプラグイン

WP Rocketで作成された Lazy Loadプラグインは、ページ内の画像や子供フレーム（iframe）がユーザーに表示される場合にのみ表示されます。 これにより、HTTPリクエストの数を減らしてロード時間を短縮します。

このプラグインは、サムネイル、ポストコンテンツ内のすべての画像は、ウィジェットのテキスト、アバター、スマイル絵文字、子供フレームに対して動作します。 ジェイクエリ（jQuery）のようなJavaScriptライブラリが使用されていないため、スクリプトのサイズが10KB未満です。

YouTubeの子供フレームをプレビューサムネイルに置き換えて、サイトの読み込み時間をさらに短縮することもできます。

Lazy Load for Videosプラグイン

動画の遅延読み込みページの読み込み時間を改善し、Googleのスピードスコア（Google PageSpeed Score）を向上させます。 このプラグインは、埋め込まれたYouTubeの（YouTube）の動画と非メオ（Vimeo）動画をクリック可能なプレビュー画像に置き換えられます。

ユーザーがプレビュー画像をクリックするときにのみ、ビデオがロードされるため、不必要なJavaScriptをロードできません。 特にURLで動画を多く挿入されたサイトで良い効果を得ることができます。

2024年1月追加：画像遅延機能を使用できますか？

WordPress 5.4バージョン以降、イメージレイジローディング機能が基本的に搭載されています。そして クラウドウェイズのBreezeなど、一部のキャッシュプラグインでイメージ遅延ロードオプションを提供することもあります。

ただし、画像遅延読み込み機能を有効にすると、ページスピードインサイトに「最大コンテンツレンダリング時間画像が遅延読み込まれました」という警告が表示されることがあります。

このサイトの場合、Breezeで画像遅延読み込みオプションを有効にすると、サイトが異常に動作し、このオプションをオフにしました。

参考までに クリアフィ などサイト速度最適化プラグインでは、画像遅延の読み込みだけでなく、iframe、YouTubeの遅延読み込みオプションも提供しています。

私 レイジーロード オプションで iframes & Videos アイテムのみをアクティブにして使用しています。

WordPressで基本的にイメージ遅延ロード機能を搭載しているので、テーマやキャッシュプラグインなどで提供するイメージ遅延ロードオプションは有効にする必要がないようです。むしろ、有効にすると問題が発生する可能性があります。そして、この記事で紹介するイメージ遅延ロード専用プラグインも必要ないようです。

最後に、

サイトに写真や動画が多くのサイトの読み込み速度が遅い場合は、この記事で紹介した遅延ロードのプラグインを利用してみることができます。 もしテーマが提供する画像の遅延読み込み機能が気に入らなければテーマで提供される遅延ロード機能を無効にして、プラグインを有効にして速度を比較することができます。

メモ：

• WordPress SEOと速度の最適化プラグインClearfy
• 無料のWebP変換プログラム - ハニービュー画像ビューア