シェアする

画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる

シェアする

画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみるtop

 

画像を沢山使用していると、ちょっとした演出も加えたくなります。

今回はスクロールしてディスプレイに入った段階で画像がフェードインして表示されるプラグインを搭載しようと思います。

実は現在使用しているテーマ「Simplicity」にデフォルトで備わっているのですが、違うテーマを使用している方の為にも気をとりなおして紹介です。

ちなみに「Simplicity」に入っている「Lazy Load」をオンにした状態で、新たにインストールした「Lazy Load」も有効化すると画像が表示されなくなりました。
どちらか一方の「Lazy Load」機能はオフにしておきましょう。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる00

 

スポンサーリンク

「Lazy Load」をインストール

おなじみ「プラグイン」→「新規追加」で、「EWWW Image Optimizer」を検索して恐れずインストールします。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる01

 

インストールが完了したら「プラグインの有効化」。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる02

 

「Lazy Load」設定画面

有効化したらもうそれでほぼOKなのですが、どうしてもフェードインのスピードを変更したい!という場合は、ちょっと突っ込んだ設定が必要になります。

「プラグイン」→「プラグイン編集」で、先ほどインストールした「Lazy Load」の「編集」をクリックします。

プラグイン編集画面の右側、「lazy-load/js/lazy-load.js」をクリックして表示されるプログラム分から「scrollin」の文字を検索。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる03

 

二ヶ所検索に引っかかりますが、後ろに「{ distance: 200 },」と続く方です。
この200の数字を変更することでフェードインするスピードを変更できます。

「Lazy Load」を有効化した場合のサイトスピードをチェック

「Lazy Load」機能でディスプレイに映る出番が来てから画像が表示されるようになり、全体ページの表示スピードの上昇に繋がる。

…ということなのでさっそくGoogleの「PageSpeed Insights」で表示スピードを測ってみました。

こちらがインストールした「Lazy Load」を停止している場合。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる04

 

こちらが「Lazy Load」を有効化した場合。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる05

 

ついでにインストールした「Lazy Load」を停止して、「Simplicity」にデフォルトで備わっている「Lazy Load」を有効化した場合。
画像の読み込みをスクロールに合わせてくれる「Lazy Load」を組み込んでみる06

 

も、モバイルだと変化が見られませんでしたが、パソコンだと少しだけ快適になっているようです。
また「Simplicity」に入っている「Lazy Load」があれば、改めて「Lazy Load」をインストールする必要もあまりないようですね。

スポンサーリンク

シェアする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)