サイトの表示速度を上げるLazyLoadを設定しよう！【プラグイン】

今回はサイト表示速度を速めるためにできる簡単な方法としてプラグイン「LazyLoad」について書きたいと思います。

関連記事　

ページ表示速度とSEOの関係性。表示速度を確認する方法

ブログの画像ファイルを圧縮するプラグイン導入方法解説

LazyLoadとは

ウェブページのスクロースに応じて画像データを遅延読み込みされることで、すべての画像を読み込んでからページを表示するより、ページの表示速度が速くなります。

通常の状態だと、ページを表示する際、すべての画像の読み込みが終了した時点で画像が表示されます。

しかし「LazyLoad」を使用することで動画の読み込みにかかっていた時間を短縮することが出来ます。

ページの表示速度があがることによりユーザビリティがあがります。

LazyLoad導入方法

WordPressでのLazyLoadの導入は非常に簡単です。

検索窓に「LazyLoad」と入力し検索をかけると表示されます。

プラグインを「今すぐインストール」します。

インストール画面に移り、完了すると一番下に「プラグインを有効化」と出てきますので有効化にします。

これで、WordPressでの「LazyLoad」の導入が完了します。

読み込み設定の調整

画像の読み込みはデフォルトで「200px以上はスクロールされてから読み込み」という設定になっています。

200pxだとスマホの横幅より小さいサイズなのでスマホでスクロールしてページを見ているときなど、画像がちらついてしまいます。

その為プラグインの調整を行います。

インストール済みプラグインの中から「LazyLoad」を選び、編集からコードを表示します。

※修正・変更の前に必ずバックアップを取りましょう。

ファイルは【/wordpress/wp-content/plugins/lazy-load/js/lazy-load.js】にあります。

$( ‘img[data-lazy-src]’ ).bind( ‘scrollin’, { distance: 200 }, function() {

という表記があります。この200を400に変更します。

$( ‘img[data-lazy-src]’ ).bind( ‘scrollin’, { distance: 400 }, function() {

これでちらつきが収まります。

まとめ

いかがでしたか。
今回は「LazyLoad」をご紹介しました。簡単なプラグインの導入で表示速度が結構速くなりオススメです。

最後まで読んでいただき、ありがとうございます。