サイトが表示されるまで時間がかかる･･･
サイトを華やかにしたり、説明を分かりやすくするのに画像をいっぱい使うと、どうしてもサイトの表示が遅くなっちゃいますよね。
そんな悩みを解消してくれるのが、今回紹介する「BJ Lazy Load」です。
画面のスクロールに合わせて画像を読み込んでくれるプラグインで、ユーザーに見えない部分の画像の読み込みを遅延させることで、サイトの表示速度を上げることが出来ます。
サイト表示が速くなれば見に来てくれた人のストレスも軽減して、全部表示される前にブラウザの戻るボタンをクリックされるなんてことも無くなるかも。
これだけでサイト表示が爆速になるわけではないですが、速くなって悪い事は無いので、WordPressをお使いの方はぜひ導入しましょう。
※ インストール前にWordPressのバックアップを取ろう。
新しいプラグインをインストールすると、たまに不具合が起こる可能性がありますので、いつでも復元できるようにしましょう。
「BJ Lazy Load」のインストールと有効化
それでは「BJ Lazy Load」の導入方法をご説明して行きます。
まずはWordPressの管理画面、左側メニューの「プラグイン」から「新規追加」をクリックし、③の検索窓に「BJ Lazy Load」と入力します。
すると「BJ Lazy Load」が表示されるので「今すぐインストール」をクリック。
インストールが終わったら「有効化」をクリック。
これで「BJ Lazy Load」のインストールと有効は完了です。
「BJ Lazy Load」の設定
次に「BJ Lazy Load」の設定をしていきます。
まずはWordPressの管理画面、左側メニューの「設定」から「BJ Lazy Load」をクリック。
そうすると「BJ Lazy Load」の設定画面が表示されます。ほとんどデフォルトでOKなのですが、念のため各項目を説明していきます。
①「Apply to content」
記事コンテンツに遅延ロードを適用するか。「Yes」にしないとこのプラグインが作動しません。
②「Apply to text widgets」
サイドバーにある新着記事や人気記事の画像などのウィジェットに遅延ロードを適用するか。
③「Apply to post thumbnails」
記事のサムネイル画像(アイキャッチ画像)に遅延ロードを適用するか。
④「Apply to gravatars」
主にコメント欄のアバター画像を遅延ロードを適用するか。
⑤「Lazy load images」
画像ファイルに遅延ロードを適用するか。ここは必ず「Yes」。
⑥「Lazy load iframes」
主にFacebookページやTwitterのタイムライン、YouTube動画の埋め込み、アフィリエイトなどで使用されているiframeで表示させているコンテンツを遅延ロードを適用するか。
⑦「Placeholder Image URL」
遅延ロードで画像を読み込むまでの間、仮の画像を表示させる場合は画像のURLを入力。無くても特に違和感は無いので当サイトでは未入力です。
⑧「Skip images with classes」
遅延ロードさせたくない画像があれば、そのURLを入力します。
⑨「Threshold」
どれくらいスクロールしたら遅延した画像の読み込みを開始するかという設定。
200～400くらいにしておくと違和感がないと思います。当サイトでは400に設定。
⑩「Use low-res preview image」
遅延ロードで画像を読み込むまでの間、仮の画像を表示させる場合は「Yes」で。⑦でURLを入力していなければ「No」で。
設定が終わったら「変更を保存」をクリックして「BJ Lazy Load」の設定は完了です。
画像をGoogle botが認識できるようにする
サイトの表示速度が速くなり、設定もラクな「BJ Lazy Load」ですが、ちょっとだけ欠点があります。
画像を遅延させて表示させると、Googleのサイトを巡回するGoogle bot(クローラー)に画像を認識されなくなってしまうようで、Googleの画像検索に表示されない可能性があるということです。
普通の検索結果には影響はないのでSEO的に問題は無いですが、画像からの検索流入のあるサイトはちょっともったいないですよね。
なのでここからはGoogle botにしっかりと画像を認識させる設定を行っていきます。
Google botに画像を認識させる設定
まずはWordPressの管理画面、左側メニューの「プラグイン」から「プラグインエディター」をクリックします。
次に、①をプルダウンして「BJ Lazy Load」を選んで②の「選択」をクリック。
下に表示された「inc」→「class-bill.php」とクリック。
表示されたコードの上から46行目の部分を書き換えます。
if ( is_feed() ) {↑これを以下のように書き換えます↓
if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) {
変更後はこうなります。
変更したら「ファイルを更新」をクリックして完了です。
これでGoogle botに認識されるようになりました。
「BJ Lazy Load」の使い方【まとめ】
サイトの高速化はやっておいて悪い事は無く、むしろメリットの大きい作業です。
その一端を担ってくれるのこの「BJ Lazy Load」というプラグインです。
「BJ Lazy Load」だけでサイト表示がめちゃくちゃ早くなるわけではありませんが、導入しておいて損はありません。
あなたのサイトを見に来てくれた人が、快適に閲覧できるよう心がけるのもユーザビリティ向上のひとつと言えるでしょう。
コメント