あなたのブログ、開くまでに5秒や10秒もかかっていませんか？
表示が遅いと、せっかく訪れた読者がページを閉じてしまうだけでなく、
その原因の多くは、画像の読み込みの重さにあります。
記事内の画像がすべて一度に読み込まれることで、ページ全体の表示が遅くなっているのです。
この記事では、ワードプレスのブログに「Lazy Load」を簡単に導入する方法を紹介します。
「Lazy Load」とは？
「Lazy Load」とは、記事に掲載されている画像や動画を最初から全部は読み込まず、見えるタイミングで少しずつ読み込む仕組みのことです。
例えば、あなたがブログの記事を開いたとき。
開いた直後はページの上部にあるサムネイルといった画像はすぐに見れますが、ページ下部の画像は画面に映っていませんよね。
通常、ページを開いた瞬間に全部の画像を読み込むので、ページ全体が重くなって表示に時間がかかります。
でも「Lazy Load」を使うと…
- まずは「今の見えている部分」だけの画像を読み込む
- 画面を下にスクロールしたとき、その位置の画像を初めて読み込む
という表示方法に切り替わるのです。
つまり…
- ページがすぐ開く（表示速度アップ）
- 通信量を減らせる
- ユーザーの体験が快適になる
といったメリットがあるのです！
これが「Lazy Load」の基本的な考え方です。
「Lazy Load」の実装方法はプラグインが簡単！
「表示速度を早くするために “Lazy Load” を導入したい…」
そう思っても、コードを編集したりJavaScriptを設定したりするとなると、ハードルが高く感じてしまうかもしれません。
専用プラグインで簡単に導入できるからです。
色々な種類があるプラグインのなかで、初心者でもすぐに導入できておすすめなのは「LazyLoad Plugin」。
難しい設定がなくても、画像を自動的に読込を遅延してくれます。
「LazyLoad Plugin」の導入手順
- STEP 1プラグインの新規追加を開く
ワードプレスの管理画面にログインし、左メニューから「プラグイン → 新規追加」をクリックします。
ここで、新しいプラグインを検索やインストールする画面が開きます。 - STEP 2「LazyLoad Plugin」と検索する
画面右上の検索窓に「LazyLoad Plugin」と入力します。
検索結果の一覧に「LazyLoad Plugin – Lazy Load Images, Videos, and Iframes」が表示されるはずです。同じような名前のプラグインが出てきますので、作者が「WP Media」と書かれたものを選んでください。
- STEP 3インストールして有効化する
プラグインの右上にある「今すぐインストール」をクリックし、インストールが終わったら「有効化」ボタンを押します。
これで、プラグインがワードプレスに適用されます。
「LazyLoad Plugin」の設定手順
- STEP 1設定画面を開く
ワードプレスの管理画面から「設定 → LazyLoad」をクリックします。
- STEP 2各設定項目の内容を理解しよう
設定画面を開くと、3つのチェック項目があります。
全てにチェックを入れて「SAVE CHANGES」を押してください。これで「Lazy Load」の設定が有効化され、あなたのサイト全体で自動的に反映されます。
- Images
- 画像の読み込みを遅延する。
- Iframes & Videos
- YouTube動画やGoogleマップなど、iframeで表示されるコンテンツの読み込みを遅延する。
- Replace YouTube videos by thumbnail
- YouTube動画をサムネイル画像に置き換え、再生時だけ動画を読み込む。
「Cocoon」は「LazyLoad Plugin」のプラグインが不要
ワードプレステーマ「
そのため、プラグインの導入が不要なのです。
Cocoonを使っているなら、プラグインは入れずにテーマ側の設定を有効化するだけで十分です。
- STEP 1Cocoon設定を開く
ワードプレスの管理画面より「Cocoon設定 → 高速化」をクリックします。
- STEP 2「Lazy Loadを有効にする」にチェック
スクロールすると「Lazy Load設定」という項目があります。
「Lazy Loadを有効にする」にチェックを入れます。
- STEP 3変更を保存する
ページの最下部までスクロールして「変更を保存」ボタンをクリック。
これで設定が反映され、Cocoonの「Lazy Load」が動作するようになります。
「Lazy Load」の実装におけるデメリット
ページの表示速度を高速化させるには欠かせない「Lazy Load」。
SEO対策の効果が期待できるので導入すべきと思うものの、ちょっとした問題があります。
それは「”Lazy Load”で表示する画像をGooglebotが認識しない」ということ。
こうした方法が正しく実装されていないと、対象のコンテンツをGoogleが認識できなくなるおそれがあります。
補足しておくと、必ずしも遅延の読込がSEOにとって悪という訳ではありません。
あくまでも「正しく設定されていない」というケースであって「Lazy Load」はGoogleが推奨しています。
重要でないコンテンツや非表示のコンテンツの読み込みを後回しにすることは、一般に「遅延読み込み」とも呼ばれ、パフォーマンスおよびユーザーエクスペリエンスに関する一般的なおすすめの方法としてよく行われます。
Googlebotは人間みたいにページを動かさない
Googlebotは、人間のようにマウスを動かしたり、スクロールしたりしません。
ページを開いたときに「その瞬間に見える部分」だけをまとめて読み取り、そこにある文字や画像を記録していきます。
でも「Lazy Load」という仕組みは、ユーザーが下にスクロールしたときに画像を出すという動きを前提に作られています。
つまり、動かないGooglebotには、その画像を見せるチャンスがないのです。
Googlebotが「画像がある」と気づけない
通常、画像はこんな感じでHTMLに書かれています。
<img src="dog.jpg" alt="犬の写真">Googlebotは、この「src=”dog.jpg”」を見て「ここに画像があるんだな」と理解します。
でも「Lazy Load」は最初に読み込む量を減らすため、こんな書き方になります。
<img data-src="dog.jpg" alt="犬の写真">「src」ではなく「data-src」という別の場所に、本物のURLが入っています。
この状態では、Googlebotがページを見たときに「srcが空欄だから画像は無いな」と勘違いしてしまうのです。
画像は、ユーザーがスクロールしたときに、JavaScriptが「data-srcをsrcに差し替える」ことでようやく表示されます。
しかし、Googlebotは、その「スクロールの瞬間」を再現しないため、差し替えも起きません。
結果、画像が存在しないページだと認識されてしまうのです。
GooglebotはJavaScriptも動かせるけど完璧ではない
最近のGooglebotは、
でも、ページ内の全ての動きを人間のように体験している訳ではありません。
特に「スクロールをきっかけに読み込む」ような動きは、Googlebotが実行しないこともあります。
そのため…
- JavaScriptを使ったLazy Load
- スクロールをトリガーにした表示
この2つを組み合わせると、Googlebotには見えない画像が出てきます。
Googlebotが確認できるようにするための対策
Googleが推奨している「Lazy Load」の対策とは…
Googlebotは操作しないので「スクロールしたら読み込む」という仕組みはNGです。
代わりに「
- 「loading=”lazy”」を使う
- 「IntersectionObserver」というAPIを使う
- 上記を用いる外部ライブラリを使う
実装が簡単な1番がおすすめです。
どれも共通しているは「ユーザーの操作を待たない」という点です。
ページを開いた直後に出る大事な画像は、遅延させると逆に遅く感じることがあります。
だから「最初に見える部分」は普通に読み込ませて、それより下の画像だけを「Lazy Load」に設定するのが理想です。
Googleは「Lazy Load」の導入後に「Search Console」のURL検査ツールで確認するように言っています。
- 「レンダリングされたHTML」を見る
- imgタグのsrcに本物の画像URLがあるか確認する
もしも、srcが空だったり画像が見えなかったりする場合は、Googlebotに認識されていません。
「Lazy Load」で表示速度を改善しよう！
Lazy Loadは、ページの表示速度を大幅に向上させる効果的な仕組みです。
ユーザーが実際に見るタイミングで画像や動画を読み込むため、無駄なデータ通信が減り、表示がスムーズになります。
ワードプレスでは「LazyLoad Plugin」を使えば初心者でも簡単に導入でき、設定も数クリックで完了します。
また、Cocoonテーマを利用している場合は、テーマ自体に「Lazy Load」の機能が備わっているため、プラグインを追加せずに設定画面から有効化するだけでOKです！
どちらの方法でも目的は同じ。
ユーザーにとって快適で、SEOにも好影響を与える高速なサイトを実現できます。
この機会に「Lazy Load」を取り入れて、ページ表示のストレスを減らしましょう。
コメント