Insightsでは画像の遅延読み込みを推奨されますが、いまいち対応方法や情報がまとまっていなかったのでまとめました。WordPress向け対応も記載しています。Googleはなぜページ表示速度を重視するのか?そもそもなぜGoogleが、特にモバイルで画像の遅延読み込みを推奨しているかというと、世界中の回線環境の悪いユーザーを意識しているという理由が大きいと思われます。そのような回線環境が悪いユーザーは、大きな画像をダウンロードすると、全然ページが表示されず、イライラします。グローバル展開しているGoogleとしてはモバイル向けの表示速度を無視できません。Insightsのアドバイスでも、特にモバイルで「画像の遅延読み込み」を推奨されます。上記のような回線環境が悪いユーザーへの対策として。ファイルサイズの小さいダミー画像(下記のような画像)をダウンロードさせます。すれば、すぐにページが表示されるのでユーザーがイライラしなくてすみます。ユーザーはダミー画像を見たいわけではないので、ユーザーがスクロールして該当の画像を見た時に、JavaScriptを用いて本当の画像を表示させる。画像を遅延読み込みさせることで、表示速度UPとユーザーの満足度UPを狙おうというのが「画像の遅延読み込み処理」になります。画像の遅延読み込みを実現するには、2つの対応が必要です。サイズの小さいダミー画像を用意するJavaScriptプログラムを用意する1に関しては、サイズが小さければどんな画像でもよいです。悩むのは2の部分でしょう。JavaScriptプログラムの用意の仕方は、だいたい以下のパターンにわかれるかと思います。自分で簡単なJavaScriptプログラムを書くJSの画像遅延ライブラリを探して自分で書くプログラムが組めないので、ネットでプログラムを探してコピペするプログラムが組めないので、WordPressのPluginを使う今回は、主に自分でプログラムを組む人に向けて情報を記載します。WordPressも対象にして書きます。プログラムが組めない人は、WordPressを使っているならPluginを使うのが最も良いと思います。どのPluginがいいの?ということで悩まれると思いますが、「最新にメンテナンスされていそうなもの」がオススメです。いうと、後述するのですが、Googleの推奨方式が時々かわるからです。ライブラリは使わない方がよい!?実装方法の比較JSのプログラムを組もうという人であれば、まず自分で1から書くより、ライブラリを探す人が多いと思います。画像の遅延読み込みで実現したいのは下記ですよね。Googleに強いユーザーに対して一番早く軽く画像を表示できる実装(プログラム)が簡単これらを考えると、ライブラリが唯一の選択肢ではありません。Googleが推奨する画像遅延の手法はどれ?Googleが推奨する方法は、ちゃんと公式ページに出ています。Observerを使うことを推奨しています。Observerは、まさに「要素が表示されたら」といった状態をコントロールするためのブラウザAPIで、画像の遅延読み込みに適しています。Observerの使用を推奨しています。Googleのクローラーはユーザーではないので、スクロールして画像をちゃんと取得するというのはちょっと辛いですよね。Observerを読み込めるようになった、とアナウンスするわけです。※今後変わる可能性はありますので、上記リンク先は一度みておいてください。JSの画像遅延ライブラリの比較Googleの推奨を考慮するならば、ほとんどのJSのライブラリは、スクロールイベントを監視しているため、危険です。有名なLazyLoadでもGoogleが認識できないことがあると指摘されています。私もスクロールイベントを使って少し影響があったサイトを知っています。Observerを採用するかも知れませんが、やはり未来は誰にもわかりません。Observerを採用し、自分でJavaScriptを組む」ということです。そもそも、とても簡単なんです。画像の遅延表示はなんら難しい処理ではありません。下記の順番で処理するだけです。全てのimgタグを変更する。srcにダミー画像を指定し、data-src属性などに本当の画像を指定する。Observerを使う)2.で表示されたら、data-src属性をsrc属性と入れ替えて本当の画像を表示させるGogole公式サイトにもコードサンプルあるのですが、ちょっとエラー処理が緩いので、実働するコードのサンプルを貼っておきます。1の対応imgタグを下記のようにします。dummy.jpgがダミー画像。realimage.jpgが本当に表示したい画像です。class="lazy">2と3の対応をするJavaScriptをいれる下記のスクリプトを<head>の中に書くだけです。画像の遅延処理自体は簡単なのですが、2つの問題点があります。IntersectionObserverのサポート外ブラウザの対応と、WordPressの問題です。IntersectionObserverサポート外のブラウザ対応IntersectionObserverは比較的新しいブラウザでしかサポートされていないAPIです。従って、古いブラウザのために対策を考えなくてはいけません。here”と記載があります。簡単なのは「polyfill(ポリフィル)」を活用することです。polyfill(ポリフィル)とは?polyfillとは、「サポート対象外のブラウザ用に、自分で同等機能を供給する方法」のことです。polyfillとは、海外にある「壁の隙間を埋めるペースト」の商品名(Polyfillaというらしい)から来た造語だそうで。IntersectionObserverのサポート対象外のブラウザでも、IntersectionObserverが使えるようなライブラリを、有志が作ってくれているのですね。「polyfillを活用しよう!」という場合、そのライブラリを活用しよう、という意味になります。ライブラリは下記からダウンロードできます。github.com/w3c/IntersectionObserver/tree/master/polyfill上記のpolyfillを活用する場合、冒頭に読み込みを一行いれて下記のようになります。メリットはもちろん、そのライブラリを読み込めば、サポート対象外のブラウザであっても、普通にIntersectionObserverを使えるということです。ポリフィルのライブラリを最初に読み込んだコードを下記に示します。パスはあたなの環境にあわせて書き換えてください。}});</script>WordPressの問題WordPressで画像遅延読み込みを実装しようとすると一つ問題が生じます。それはimgタグが自動で吐き出されてしまうので簡単には置き換えられないという問題です。WordPressでは画像挿入時に勝手にimgタグが作成されてしまう。プラグインなどを入れると、それが勝手にimgタグを書き換える時がある従って、上記問題を解決する必要があります。※プログラムを避けたい人は、先ほどもお伝えしましたが「メンテナンスされている画像遅延系のプラグイン」を試してみるのがオススメです。今までもお伝えしましたが、画像の遅延読み込みをするためには、imgタグを書き換える必要があります。WordPressでは下記3つを実行するとよいですheader.phpなどに、上記で示したJavaScriptプログラムを貼り付けるテンプレートでimgを読み込んでいる箇所を変更する(これは簡単)functions.phpにimgタグの変更プログラムを登録しておく各imgタグは下記のように変更します。class="lazy">dummy.jpgがダミー画像。realimage.jpgが本当に表示したい画像です。functions.php内preg_replace(正規表現)でimgタグを置換するWordPressが自動的に書き出す<img>タグを置換するには、functions.php内で処理を登録します。下記3つの手順で置換を順番に行えば、求めているimgタグに置換できます。classの中にはlazyを必ず入れる(遅延読み込み対象にする目印)classを持っていないimgタグにはclass=”lazy”を付与するsrcとdata-src、srcsetとdata-srcsetを入れ替えてセットし、src、srcsetにはダミー画像を指定するfunctions.phpに登録する内容functions.phpに記述すると、contentsの中身の置換処理などを行えます。以下にfunction.phpに掲載するコードサンプルを出しますので、ぜひ参考にしてみてください。※dummy.jpgはご自身で用意したものに書き換えてください。$re_content;}add_filter('the_content','customize_img_lazy');上記では、正規表現を使っています。一般的にうまくいくように記述していますが、場合によっては、あなたの環境ではうまく動かないかも知れません。事前に正規表現チェックサイトなどを使って、置換がうまくいくかチェックされると良いと思います。okumocchi.jp/php/re.phpまとめ本日は、画像の遅延読み込みについてご説明しました。ライブラリを使わなくても、自分で簡単に実装できますし、そちらの方がGoogleから評価もされやすくなりますので、ぜひチャレンジしてみてください。「ムダな情報で頭脳を消耗することなく考える時間を確保する」ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。怪しい実態を専門家に聞いてみた。必要?戦略と戦術のわかりやすい根本的な違い。正攻法アフィリエイトについて専門家に聞いてみた。