2020/02/28 情報を更新いたしました。

ウェブサイトを閲覧していて、サイトの表示速度が遅いと煩わしいですよね。むろん、表示速度が遅いとユーザーは早い段階で離脱します。SEO的にも良くないです。長くサイトに滞在してもらい、サイト内回遊率を向上させるためのまず最初の施策として、読み込み速度の高速化は非常に重要な項目なわけです。サクサク見られるサイトって見ていて気持ちがいいですよね。

中でも、読み込みに時間がかかる原因は、画像や動画データに多くあります。多くの画像や容量の大きな動画が、大幅に読み込みを遅れさせる原因となるのです。当記事では、その原因を改善しサイトの読み込み速度を高速化するプラグインをご紹介いたします。

以前、弊社の記事で、「BJ Lazy Load」というプラグインを紹介しておりましたが、2020年2月現在はWordPressのページに以下のように表示されています。

このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。引用元：「BJ Lazy Load」（WordPress公式サイト）

さらにプラグインの最終更新が2年前のままのようですので、別のプラグインである「Lazy Load – Optimize Images」について最新情報をご紹介したいと思います。なお、「Lazy Load by WP Rocket」とは本プラグインの旧名称でいつの間にか名前が変わったようです。

プラグイン「Lazy Load – Optimize Images」とは

このプラグインを導入することで、サイト内の画像の読み込み速度を遅くします。一見、「遅くしてはダメじゃないか」と思うかもしれませんが、ご安心ください。

そもそも一般的には、ユーザーがサイトをクリックするとにそのページに含まれる画像が一気に読み込まれます。ということは、画像が多いページや縦に長いランディングページなどでは、ブラウザがすべての画像を同時に読み込もうとするので、表示するまでに時間がかかってしまうわけです。

つまり、このプラグインの機能は単に画像の読み込みを遅くするのではなく、ブラウザのウィンドウ内に表示されている画像のみを段階的に読み込む機能です。スクロールしなければ表示されない箇所にある画像は読み込まないので、結果的にページが表示される速度が早くなります。

また画像の読み込みを遅延させるプラグインは多数ありますが、その多くが画像のみを遅延させる機能のみになります。「Lazy Load – Optimize Images」では、画像だけでなく、埋め込んだYouTube動画なども適用できることが特徴的です。

実際に高速化するか？

実際にサイトが高速化するかどうかは、サイトのコンテンツ容量などにもよりますが、たいていの場合、「Lighthouse」などの計測ツールで表示速度が上がっているという数値が出ます。体感レベルで高速化されるかというとそうではないので、大きな期待は持たないようにしましょう。

なお、「Lazy Load」は「FORCE」や「HEAL」などの最近のTCDテーマではデフォルトで実装されています。

「Lazy Load – Optimize Images」のインストール

管理画面から「Lazy Load – Optimize Images」を検索してインストールするか、下記のボタンからもダウンロード可能です。wp-content/pluginsディレクトリにインストールした後、管理画面から有効化してください。

Lazy Load

「Lazy Load – Optimize Images」の基本設定

有効化した後に管理画面の「設定」より「Lazy Load」を選択し、下記の画面にて、それぞれのチェックボックスにチェックを入れます。

以下2種類の遅延読み込み設定と、動画をサムネイル画像に置き換えて読み込む設定が可能です。サムネイルをクリックするまでは画像として読み込むので、表示スピードを向上できます。

  • Images（画像）
  • Iframes & Videos（Iframeや動画）
  • Replace YouTube videos by thumbnail（YouTube動画をサムネイルへ置き換え）

任意の項目にチェックを入れた後に、「SAVE CHANGES」をクリックし保存します。これだけの操作で、スクロールしなければ見えない画像を遅延読み込みし、ファーストビューのページ表示速度を高速化することができます。

「Lazy Load – Optimize Images」のカスタマイズ方法

「Lazy Load – Optimize Images」は、上記の基本設定でシンプルに活用するだけでなく、細かくカスタマイズが可能な点も実用的です。またそのカスタマイズ方法についても、特段難しいわけではないので、下記を参考にお試しください。

一部のページの遅延読み込みを無効にする方法

functions.phpにdo_rocket_lazyload filterを追加します。下記は投稿ページにて遅延読み込みを無効化する場合の例です。

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

一部の画像の遅延読み込みを無効にする方法

遅延読み込みを無効化したい画像タグもしくは、iframeタグにdata-no-lazy=”1″と追記します。下記は画像タグに追加した例です。

<img src="image.jpg" alt="" data-no-lazy="1">

画像を読み込むタイミングを変更する方法

読み込むタイミングによって、スクロールした際に画像が表示されなかったりするのを防ぐための調整です。デフォルトでは、ブラウザウィンドウから300px以内の画像を読み込む仕様ですが、下記コードは100px以内の画像を読み込む場合の例です。functions.phpに下記を追記します。

function rocket_lazyload_custom_threshold( $threshold ) {
    return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

なお紹介した方法以外にも下記のページに多数カスタマイズ方法が記載されています。
→WP Rocketのページ

動画解説

本プラグインの動画解説も用意しております。テイストでの解説で不明点が残った方はご視聴ください。

まとめ

ページの読み込み速度はユーザビリティにおいても、SEO的にも非常に重要な要素の一つです。中でも画像や動画が与える大きな影響を、プラグインを導入するだけで手っ取り早く改善できるのでおススメです。

また、ケースバイケースのカスタマイズ方法が公開されているのも親切ですね。ただし、テーマとの相性によって、不具合が生じることもあるのでプラグインのレビューをチェックしたり、有効化した後にしっかりと動作を確認することを推奨いたします。