プラグイン

[ワードプレス入門-21]Page Speed Insightsで表示される速度アップ対策「オフスクリーン画像の遅延読み込み」プラグイン BJ Lazy Loadの設定方法

 

記事をある程度アップロードすると気になってくるのがサイトの表示スピードです。

Google Page Speed Insightsというページの表示速度を計測するサイトで速度を計測すると、遅い原因を改善する方法として、「オフスクリーン画像の遅延読み込み」というのが示されます。

で、Lazy Load(遅延読み込み)というプラグインを探すことになります。

私の場合は、Lazy Loadという名のつくプラグインを片っ端から試しました。

Lazy Load、a3 Lazy Load、Lazy Loader、Lazy Load Optimizer …。

a3 Lazy Loadは当初、使いやすくて良かったのですが、最近になって不具合が生じてしまい、他のは最初から全滅で、結局今は「BJ Lazy Load」を使用しています。

ワードプレス・サイトのページスピードはどこまで上げられる? 検索トップのサイトを比べてみたあなたのサイトのページスピードは? ひととおりWPの設定が終わると、サイトの重さが気になって来ました。 なぜ重くてはいけないのか...
重くなったサイトの速度アップと将来に備えたセキュリティ対策プラグイン結局25種ページ速度を測ったらひどい数字。いつの間にか重くなったサイトの速度をアップさせる方法 「オフスクリーン画像の遅延読み込み」で速度アップ...

そこで、この「BJ Lazy Load」の設定方法を紹介します。

私は「JIN」というテーマを利用していますが、「JIN」が奨めるLazy Loadも「BJ Lazy Load」です。

1.今までと同様にインストールし有効化

今までのプラグインのインストールと同様に「プラグイン追加」→「BJ Lazy Loadを検索」→「今すぐインストール」→「有効化」と進みます。

2.サイドバーの「設定」→「BJ Lazy Load」

サイドバーの「設定」→「BJ Lazy Load」へ進み、次の設定をします。

では、上から順番に説明していきましょう。

Apply to content

コンテンツの画像に適用させるか否かの設定です。「Yes」にチェックします。

Apply to text widgets

テキストウィジェットの適用させるか否かの設定。「Yes」です。

Apply to post thumbnails

サムネイルに適用させるか否かの設定です。「Yes」にします。

Apply to gravatars

主にコメント欄などで使用するアバター画像に適用。「Yes」にします。

Lazy load images

記事内の画像。必ず「「Yes」にします。

Lazy load iframes

FacebookやTwitter等ソーシャルメディアやアフィリエイトなどのiframeで表示させているコンテンツを遅延ロードさせるかどうかの設定です。「Yes」にチェックです。

Placeholder Image URL

遅延ロードで画像を読み込むまでの間に表示させたい仮の画像がある場合はその画像のURLを入力します。

Skip images with classes

読み込みを遅らせたくない画像があれば、そのURLを入力。ご自由に。

Threshold

Thresholdとは「しきい値」という意味です。スクロールがどこまで来たら画像を表示させるかをピクセルで指定します。200〜400の間で指定します。「400」をしておくと、遅延なく画像が表示されます。

Use low-res preview image

画像を表示させるまでの間に、仮で表示したい画像があれば設定します。「Threshold」で、200〜400を設定しておけば、画像がなくても違和感なく表示されます。

左下の「変更を保存」して終了です。

 

Page Speed Insightsのサイト速度測定は、ブログ&サイト作成初期には無意味!〜初心者向け〜Google Page Speed Insightsで計測した、サイトの表示速度がなかなか改善されないのは、写真を多用していて重いからだ...