ブログ軽量化のためにLazy Loadで画像を遅延読込させる方法

ブログ軽量化

ブログの表示速度を上げるには、画像データを最適化(圧縮)させるのが一番簡単で効果が高い方法になる。

その方法に関してはこちらの記事で紹介している。

↓  ↓  ↓

ワードプレスを高速化させる画像の最適化方法

今回は、画像データの最適化ではなく、画像の読み込みを遅延させてブログを軽量化させる方法を紹介する。

ちなみに、SimplicityならLazy Loadが最初から入っている。

Simplicityでの設定と注意点も紹介したいと思う。

Lazy Load

まずはLazy Loadの設定方法から

ダッシュボード左メニューから「プラグイン」→「新規追加」を選択

右上の検索窓に「Lazy Load」と入力してインストールする。

ブログ軽量化

Lazy Loadは有効化するだけで効果を発揮するんだけど、最適なブログ軽量化を行うために、一箇所だけ設定をする必要がある。

有効化をさせずに

左メニューから「プラグイン」→「インストールする済みプラグイン」を選択。

ブログ軽量化

Lazy Loadの「編集」をクリック。

ブログ軽量化

右側の「プラグインファイル」から「lazy-load/js/lazy-load.js」を選択。

赤枠の箇所がデフォルトだと「distance: 200」になっていると思うので、ここを「distance: 400」に変更しよう。

ブログ軽量化

最後に「ファイルを更新」をクリックしよう。

あとはLazy Loadを「有効化」すれば完了だ。

Simplicityの設定

次はSimplicityに入っているLazy Loadを使う方法だ。

左メニューから「外観」→「カスタマイズ」を選択。

ブログ軽量化

メニューから画像を選択。

ブログ軽量化

「Lazy Loadを有効」にチェックを入れる。

その下の設定はお好みでチェックを入れて頂きたい。

よくわからなかったら私と同じ設定で問題ない。

ブログ軽量化

最後に「保存して公開」をクリック。

これでSimplicityのLazy Loadgが有効化される。

注意点

Simplicityの設定で

「Lazy Loadを有効」

とあったけど

これはプラグインの「Lazy Loadを有効」にするのではなく、Simplicityの「Lazy Loadを有効」にするという意味なんだ。

プラグインを有効にして、Simplicityも有効にすると、二つのLazy Loadが有効化されている状態になる。

2つのLazy Loadで効果が倍になるかといえば、その逆で、画像が表示されないなどの不具合報告が出ている。

実際、私も最初の頃は両方有効化していて、特に不具合はなかったのだが、現在はSimplicityのLazy Loadのみ有効化している。

二つのLazy Loadを有効化してもメリットはないので、どちらか一つだけ利用するようにしよう。

最後に

画像が多いブログでは、前回紹介したプラグイン

EWWW Image Optimizer

↓  ↓  ↓

ワードプレスを高速化させる画像の最適化方法

それと今回紹介した

Lazy Load

ブログ軽量化と高速化には必須のプラグインとなる。

どちらも最初に設定するだけなので、必ずインストールさせ有効化して頂きたい。

画像の最適化ほどの効果は見込めないかもしれないけど、メタキーワードとメタディスクリプションの設定も忘れずに行うようにしよう。

↓  ↓  ↓

メタキーワードとメタディスクリプションとは?

この記事が気に入ったら
いいね ! しよう

Twitter で

シェアする

フォローする