画像・動画・iframe表示が早くなる遅延ロード(lazyload)とは?おすすめプラグインは?

遅延ロード(lazyload)
この記事は約3分で読めます。

遅延ロード(lazyload)とは?

ブラウザイメージ

高速化対策を施していないウェブサイトの場合、画像等ページ上の要素は最初にブラウザに読み込まれます。画像が多いページや大きな画像を掲載しているページは読込時間が長くなり、その分遅くなります。

例えばブラウザではページ上部しか表示されていないのに、ページ下部の画像等も最初に読み込まれるという事です。イメージできたでしょうか?

遅延ロード(英語でlazyload)とは段階的にページ内の要素を読み込むことで、表示速度を早める仕組みです。

ブラウザでページ上部しか表示されていないのであれば、表示されているページ上部だけの範囲を読み込みます。

その結果、ページ表示速度が早くなりユーザー離脱を防ぐことができます。

遅延ロード(lazyload)は画像・動画・iframeに対応

画像への対応

遅延ロードはWordPressへアップロードされた画像やimgタグで表示される広告画像にも適用されます。javascriptで読み込まれるアドセンスの広告画像には適用されません。

動画への対応

YouTube等を貼り付けると、ウェブページを開いた際に動画データもYouTubeから都度読み込まれます。遅延ロードプラグインを利用するとYouTube動画から自動的にサムネイル画像を生成し貼付け動画と置き換わります。

動画はサムネイル画像をクリックするとそこで初めてYouTubeから動画データが読み込まれるようになります。

iframeへの対応

YouTube、Googleマップ、Facebookウィジェット等をウェブページに埋め込む場合に使われています。iframeを利用するという事は、自分のサイトページに加えて他ページからもデータを読み込むという事なので遅延ロードを活用しないと表示速度は更に遅くなります。

遅延ロード(lazyload)のおすすめプラグインは?

Lazyload by WP Rocket

AFFINGERユーザーにはLazyload SEOという専用プラグインが5,000円で販売されています。

ただ実際の所、AFFINGERユーザーでも他テーマユーザーでも無料で公開されているWordPressプラグインを使えば大丈夫です。

wordpress.org上にはいくつかlazyloadプラグインがありますが、Lazy Load by WP RocketがWordPress最新バージョンにも対応しておりお勧めできます。

Lazy Load by WP Rocket
Lazy Load your images and iframes, replace Youtube videos by a preview thumbnail.

Lazy Load by WP Rocketの設定方法

下記画像の通りチェックボックスを3つともチェックしてからSAVE CHANGESボタンを押して保存してください。

Lazyload設定

以上の設定で画像、動画、iframe表示は高速化されます。

画像については圧縮したり、場合によってはwebp形式への変換を行ってください。

コメント

タイトルとURLをコピーしました