「Lazy Load」で画像リッチな投稿も高速表示!使い方を画像付きでわかりやすく解説!

  • 2018年4月27日
  • Plugin
  • 6view

ブログサイトをより魅力的にするには画像が欠かせません。

よりリッチに魅せるためにも画像を数多く配置したいところですが、ユーザー側の読み込み速度が遅くなる可能性も……。

今回紹介するプラグイン「Lazy Load」を導入して、ページ自体の読み込み速度を改善してみましょう。

画像表示を「遅延」させてページを高速表示する「Lazy Load」

今回紹介する「Lazy Load」というプラグインは画像の読み込みを“遅延”させるプラグインです。

「遅延したのでは読み込みが遅くなるのでは?」

と思うかもしれませんが、このプラグインは重たいデータである「画像」の読み込みを制御してページ全体の読み込みを速くさせる、というタイプのプラグインです。

設定するためのインタフェース(ボタンやプルダウンメニューなど)はなく、直接jsファイルを修正する必要がある点に敷居の高さを感じてしまいますが、それほど難しいわけではありません。

ぜひチャレンジしてみましょう。

まずは、インストールとプラグインの有効化です。



ダッシュボード→プラグイン→新規追加→「Lazy Load」で検索します。

画像のようなアイコンのプラグインを選択してインストールし、有効化します。

jsファイルを直接指定して修正を実行→更新

「Lazy Load」は設定のためのインタフェースがありませんので、jsファイル自体を操作する必要があります。

「Lazy Load」が導入されていることを確認して、「プラグイン編集」をクリックします。

画像のような画面が表示した場合は「理解しました」をクリックして進めましょう!

※WordPressのバージョンによっては出現しない場合もあります。

数値を200→400にして設定完了

表示した画面の右側にあるプルダウンメニュー「編集するプラグインを選択」から「Lazy Load」を選び、「選択」ボタンをクリックします。

「プラグインファイル」の中で、「js」→「lazy-load.js」を選択します。

すると「選択したファイルの内容」(プログラムが記述されている部分)が切り替わります。

この中の画像の赤い囲みの部分「distance:200」と書かれたところの数値を「400」に変更します。

数字の変更ができたら、下部の「ファイルの更新」をクリックして完了です。

まとめ

以上、画像の読み込みを遅延させ、ページ表示スピードを早くするワードプレスプラグイン「Lazy Load」の使い方についてご紹介しました。

ちょっと難しそうな「Lazy Load」の設定ですが、作業自体はとても簡単。

読者がスマホで閲覧することを想定すると、読み込み速度の改善はユーザービリティ向上にとても有効なので、積極的に導入しましょう。

 





只今期間限定で記事作成が面倒な僕がブログアフィリエイトで月収50万円、累計2000万円稼いだ手法をギュッとまとめたブログアフィリエイト教材「Affiliate Sunday」をプレゼント中!

※iCloud、hotmail、outlookは届きませんのでご注意ください。

興味がありましたら今すぐ僕のメールマガジンに登録してプレゼントを受け取って下さい!

*メールマガジンは完全無料で登録出来ます。
*気に入らなければいつでもワンクリックで解除できますのでご安心下さい。

最新情報をチェックしよう!
>アフィリエイトで毎日を最高の日曜日へ

アフィリエイトで毎日を最高の日曜日へ

「有料教材より詳しい!」 「内容の充実さとわかりやすさに驚きました!」 などと絶賛された須賀ともひろ独自アフィリエイト教材であなたを非常識な世界へ誘います。 この教材を手にすることによって 、初心者でも簡単にパソコン一つで「稼ぐ」実感を手にすることが出来ます!(実績あり) 無料公開している今のうちにダウンロードして下さい!(残りわずか)

CTR IMG