ワンピクめも

日常のいろんなこと・気になったことの「めもログ」

オフスクリーン画像の遅延読み込み[めも:01]

ウェブサイトのページ表示速度は1秒でも早く!
分かってはいるんです。

今回は、PageSpeed Insightsの結果、「オフスクリーン画像の遅延読み込み」の部分を何とかしたいと調べてみました。

developers.google.com

「オフスクリーン画像の遅延読み込み」って、そもそも何?

 さっくり言ってしまうと、今の表示領域以外の画像はスクロールした時などに、読み込ませなさいっていうことですね!

Wordpressプラグイン「a3 Lazy Load」!

 jQueryのLazyLoadとか、他のプラグインも数多くありますが、あまりプラグインを増やしたくないなぁとは思いつつ、手っ取り早くお試しするならということで、このプラグインを利用することになりました。

今回はこちらの記事を参照させて頂きました。

d-desing.com

まずはインストール 

a3 Lazy Load

いつもの手順で「インストール」→「有効化」します。

a3 Lazy Loadの設定

Wordpress管理画面のSettingsのa3 Lazy Loadをクリックします。
こんな画面になりましたか?

a3 Lazy Load

この中の、Lazy Load Activationが有効化されていれば基本的にはデフォルトでも問題ないかと思います。

a3 Lazy Load

それからこのImage Load Thresholdという項目。
これは今表示されている場所からどこまで読み込ませるかの設定で、決まりはありませんが使った感覚で400pxにしています。

a3 Lazy Load

以上で設定完了です。

ウェブサイトの表示で、特に画像が多い場合に時間がかかってしまうのは、離脱率の原因にもなるので、そういった部分にもぜひ気を使っていきたいですね!

 

www.one-pixel.net