37web

Webの知識やMac・iPhoneなどApple製品の便利なアプリなどを紹介

画像を後から読み込むWordPressプラグインLazyLoadを導入。読み込み速度を改善してページ速度を高速にする

2017/02/22

Webページの表示速度に大きく影響するものの1つとして画像の読み込み速度があります。

LazyLoad系のプラグインはいくつか有ります。
何個か試してみたのですが、最終的に普通のLazyLoadに戻ってきたので、ご紹介。

画像をあとから読み込むLazyLoadとは

LazyLoadは簡単に言うと、スクロールして画像がユーザーの画面内にきたら表示を開始するというjQueryプラグインです。
前は「jQuery Image Lazy Load WP」を使っていたこともあるのですが、結論として開発ストップしている可能性が高いから「Lazy Load」をオススメするいう記事を見てから、僕も「Lazy Load」に切り替えることにした。

「Lazy Load」の使い方は有効化後、プラグインの編集画面から「Lazy-load/js/lazy-load.js」選択し、「distance: 200」と書かれているところを「distance: 400」に変更する!これだけ!
lazy01

200や400は画面下部のピクセル数を指定しているようだ。400ぐらいにしておけば少し早めにスクロールしても読み込みがスムーズに行われる、ということだ。

-Web制作, WordPress