プラグイン

【WordPressプラグイン】WordPressで構築したウェブサイト・ブログの読み込み遅延ができる「Lazy Load」の設定方法

2020年4月18日

【WordPressプラグイン】WordPressで構築したウェブサイト・ブログの読み込み遅延ができる「Lazy Load」の設定方法

Lazy Loadとは

【WordPressプラグイン】WordPressで構築したウェブサイト・ブログの読み込み遅延ができる「Lazy Load」の設定方法

Lazy Loadの概要

Lazy Loadは、WordPressで構築したウェブサイトの画像の読み込み遅延を実装してくれるプラグインです。

ウェブサイトに多くの画像を掲載していると、ウェブサイト全体の読み込み速度が遅くなってしまうことがあります。

Lazy Loadをインストールすることで、画像読み込みを制限するため、ウェブサイトの表示速度の改善に繋がります。

Lazy Loadの特徴

  • 基本的に初期設定が不要
  • 画像の読み込み遅延が設定できる
  • SEO対策として画像の読み込み遅延で表示速度の改善

Lazy Loadのダウンロード先

【WordPress公式ページ】Lazy Load
https://wordpress.org/plugins/lazy-load/

Lazy Loadの設定

Lazy Loadのファイルアップロード

Lazy Loadはダウンロードして有効化をしても、専用のプラグイン管理画面はありません。左メニューの「設定」>「メディア」の中の項目の一つとして表示されます。「レイジーローダーオプション」という見出し以降が設定できる項目になります。

Lazy Loadの除外するCSSクラス、追加のフィルター設定画面

除外するCSSクラスと追加のフィルターを設定することができます。読み込み遅延しないCSSクラスがある場合は、基本的にデフォルトのままで問題ありません。

Lazy Loadのiframe、画像、動画、音声の遅延読み込みの設定

上記の項目では、音声や動画インラインの背景画像など、読み込み遅延に含む対象を設定することができます。

特にYoutubeにアップロードした動画をウェブサイトに埋め込んでいる場合、「ビデオの遅延読み込みを有効にする」にチェックを付けることで、読み込み速度の改善に繋がるかと思います。

Lazy Loadのスピナーの設定画面

読み込み中にスピナーを表示させるか、個別の投稿ページで読み込み遅延の有無を設定できるようにするかを選択することができます。

読み込み中にスピナー表示を選択すると、下記のようにウェブサイトの読み込みを行ったいる最中には読み込んでいるアイコンがユーザーが見えるようになります。

Lazy Loadのスピナー表示

Lazy Loadの使い方

Lazy Loadのプレビュー

Lazy Loadは読み込む対象などを設定するだけで、ウェブサイトに読み込み遅延機能を反映させることができます。

当サイトの場合など、上記のように複数の画像の読み込み遅延が反映されていることを確認できています。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-プラグイン
-

© 2021 nukoblog