画像遅延読込で高速化!『a3 Lazy Load』の設定方法と使い方

 

悩んでいる人悩んでいる人

サイト表示速度が最近めちゃくちゃ遅いけど、画像のせいなのかな?サイトを高速化させる方法を知りたい。

 

こんなお悩みを解決します。

 

 

✔本記事の信頼性

 

プロフィール・ueha-su(@sedorisuta)

当ブログ管理人の僕は、ブログ歴6年目の40代パパさんです。
ブログ・インスタ・Twitterなど各種媒体を展開中。

 

なぜサイト表示速度が遅くなるのか?ですが、結論からお伝えすると画像の読み込み方法に問題があります。

 

通常、読者がサイトに訪問した瞬間に、テキストや画像を同時にしかも一気に読み込み表示しようとします。

 

これがサイト表示速度を遅らせている原因です。

 

そこで画像遅延読込ができるa3 Lazy Loadプラグインを利用します。

 

a3 Lazy Loadプラグインは、読者が画像の手前までスクロールさせた時に画像を表示させる仕組みになっているので、ページを開く際に非常に重たいという状態を回避することができます。

 

そこで今回は『a3 Lazy Load』の設定方法と使い方について解説します。

 

 

画像遅延読込で高速化!『a3 Lazy Load』の設定方法と使い方

 

まずは管理画面の左メニュから『プラグイン』⇒『新規追加』をクリックしてください。

 

 

次に右上の検索窓に『a3 Lazy Load』と入力しましょう。

 

 

有効化まで完了しましたら、左メニューの『設定』から『a3 Lazy Load』をクリックしてください。

 

『a3 Lazy Load』の設定項目

a3 Lazy Loadの設画面に切り替わったらここで各種設定を行います。

 

Plugin Framework Global Settingsの設定

 

一番トップの設定項目『Plugin Framework Global Settings』ですが、基本的にはデフォルト設定のままでOKです。

 

デフォルト設定の場合はOFFになっていると思います。もしONになっていたらOFFに切り替えてください。

Lazy Load Activationの設定

 

『Lazy Load Activation』は画像のロードを遅らせるための設定です。

 

『a3 Lazy Load』ではメインの設定になります。デフォルト設定では初めからONになっているのでそのままでOKです。

 

OFFになっていた場合はONにしましょう。OFFで設定した場合は遅延読み込みが行われず通常表示されます。

Lazy Load Imagesの設定

 

Lazy Load Imagesの設定ですが、デフォルト設定ではすべてONになっています。

 

ここはデフォルト設定のままで問題ありません。

 

英語表記になっていてわかりずらいと思うので、下記に各種設定内容をまとめてみました。

Enable Lazy Load for Images:画像の遅延読み込みを有効にします

Images in Content:コンテンツ内の画像のロードを遅らせます

Images in Widgets:ウィジェットの画像のロードを遅らせます

Post Thumbnails:サムネイルを投稿の画像のロードを遅らせます

Gravatars:グラバターの画像のロードを遅らせます

Noscript Support:ONにするとJavaScriptが使えないブラウザーを利用しているユーザー用に「Noscript」タグを有効化します。

 

Lazy Load Videos and iframes

 

  • Video and iframes:オンにすると、WordPress埋め込み、HTML5ビデオ、すべてのソースからiframeによって読み込まれたコンテンツのレイジーロードがアクティブになります
  • In Content:コンテンツ内
  • In Widgets:ウィジェット
  • Noscript Support:Noscriptのサポート

 

この設定は画像ではなく動画の設定になります。

 

a3 Lazy Loadでは画像だけでなく実は動画のロードも遅らせることができます。

 

ただ、基本的にはすべて『ON』になっていますので、特に設定を調整する必要はありません。

Exclude by URI’s and Page Types

 

 

・Home Page
・Front Page
・Posts
・Post Categories
・Post Tags
・Search Page
・Author Pages
・Archive Pages
この設定は遅延除外したいページを選択できます。
遅延目的でa3 Lazy Loadを導入していると思いますので、この項目はデフォルト設定のまま『OFF』で問題ありません。

Script Load Optimization

Script Load Optimizationの設定ですが、avaScriptの読み込みをどのタイミングで行うのかの設定になります。

 

デフォルト設定では『FOOTER』になっていますので、そのままで問題ありません。

WordPress Mobile Template Plugins

どのタイミングでJavaScriptの読み込みを行うかの設定になります。デフォルトでは「FOOTER」になっているので、このままでOKです。

WordPress Mobile Template Plugins

モバイル用テンプレートプラグインを使用している場合は、ロードの遅らせを無効にすることができます。

●Disable On WPTouch

●Disable On MobilePress

 

上記の2つのプラグインを導入していなければ【ON】で問題ありません。

Effect & Style

  • Loading Effect⇒ロード中のエフェクトのことです。
  • Loading Background Colour⇒画像をロードしている際の背景色を選択できます。

Image Load Threshold

 

「Threshold」は、画像をロードし始めるタイミングのことです。

 

記事中の画面上に表示されているポイントから何ピクセル先までロードするかを設定することができます。

 

デフォルト設定では400pxで設定されています。

 

僕は400pxで十分だと思っているので、デフォルト設定のままで良いと思います。

画像遅延読込で高速化!『a3 Lazy Load』の設定方法と使い方|まとめ

今回は画像遅延読み込みで高速化するプラグインを紹介しました。

 

サイト表示速度が遅くなる主な原因は【画像】にあります。

 

サイト表示速度が遅くなると、わずか3秒で離脱すると言われています。

 

良い記事をしっかり訪問者に見て頂くためにストレスのない環境をできるだけ作るようにしましょう。