WordPressにもイマドキのlazyloadを\(^O^)/

筆者には珍しく、WordPressプラグインのお話です。

Intersection observerというAPIを使って画像の遅延読み込みができるという記事を見つけ、WordPressのサイトでもやってみよーっと思って実装しようとしたら、エディタ内の画像やカスタムフィールドの画像にきちんと実装するのはしんどそうだったので、プラグインを探したら、まさに使おうと思っていたライブラリを組み込んだプラグインがありました。結構出来が良さそうですが、まだダウンロード数は少ないようなので紹介記事を書いてみました。
目次

lazyloadとは

今更説明も要らないと思いますが、画像がブラウザの表示領域に入ったら画像の読み込みを開始することで、パフォーマンスの最適化を図る手法のことですね。

画像はレンダリングブロックリソースではありませんが、要素の数が多かったり、ファイルサイズが大きかったりすると、リクエスト数が増えるので、ページ全体の読み込みに時間がかかります。表示領域外の画像の読み込みを初期読み込み時には行わないことにすれば、その分のネットワーク帯域を他のリソースのために使うことができます。するとWebページがきちんと機能するまでにかかる時間(First CPU Idle)が短縮される、すなわち「高速化」が実現できることになります。

Chrome75以降は、画像タグ内にloading=”lazy”という属性を付与すれば遅延読み込みがネイティブサポートされるようですが、他のブラウザは対応していないので、これだけでは不十分です。

といいつつ、自サイトには何も施していなかったアタシ…

去年、某CMSの組み込みに関わらせていただいたことがあって、そのCMSには画像の遅延読み込みが標準実装されそうな雲行きだったので、あああ、そろそろ世間はそんなカンジで動いているのだな、案件でも対応していかねば、と思いつつ、腰を重くしていただけなのでした。ヤレヤレ。

ちなみに、「表示領域に入ったら要素(画像に限らない)をふわっと表示させる」カンジの依頼がたまにありますが、アレは高速化とは別物です。画像の読み込みはしてあるが、不透明度をゼロにして非表示にしているだけ、という対応が多いんじゃないかなーと思います。

イマドキの遅延読み込みライブラリ"lazysizes"

さまざまな遅延読み込みのライブラリがありますが、今回筆者が使用したlazysizesには、以下のメリットがあるそうです。

  • Responsive imageに対応している(srcset属性、picture要素にも使用できる)
  • 背景画像にも対応している
  • ie11に対応している
  • jQueryに依存していない
  • scrollイベントを監視しているわけではないので、パフォーマンスが良い
  • オプションが用意してあって、みんなが好きそうな(必ずしも必要ではない)エフェクトも適用できるっぽい
  • ボタンをクリックすると、非表示要素がニュルっと出てくる機能が実装できるっぽい
  • Googlebotが「IntersectionObserver による遅延読み込み」をサポートしているので、SEO的に問題がない

具体的には、スクリプト(lazysizes.min.js)を読み込んであるページに以下のように画像タグを書けば良いようです。

<img data-src="image.jpg" class="lazyload">

lazyloadというclassを付けておくと、その要素は遅延読み込みの対象となります。img要素内にはsrc属性の代わりにdata-src属性が書かれていますが、要素が表示領域に入ったら、data-src属性がsrc属性に置き換わります。

"lazysizes"をまんま使ったWordPressプラグインがあった(゚д゚)!

WordPressのサイトにこのライブラリを取り込もうとすると、エディタ内の要素にすべてclassを付与しなければならないし、カスタムフィールド等で読み込んである画像についてもテーマファイルの書き換えを行わなければならず、めんどくさそうでした。

カスタムフィールドで画像を挿入するときは、画像IDとしてデータを取得し、wp_get_attachment_imageというテンプレートタグの引数にその画像IDや、画像サイズ、属性などを指定して、関数でimg要素を吐き出していることが多いのですが、「src属性の代わりにdata-src属性を書く」というところでまず躓きました。wp_get_attachment_image_srcで画像パスを出力すればいっかーと思ったのですが、イロイロうまく行かず…

WordPressでは、使わずに済むならばなるべくプラグインを使わない方針でいるのですが、あコレはプラグイン案件だな、と悟り、わりとあっさり諦めてプラグインを探しに行きました。するとあるではありませんか、そのものズバリ、このライブラリを使用したプラグインが(゚д゚)!

プラグイン開発者の方が元のライブラリをよほど気に入っているらしく、プラグイン名もそのまんまですw

嬉しいことに、以下のテンプレートタグで出力されたコンテンツ内の画像要素には、自動的にclassが付与され、data-src属性への書き換えも行われるようです。

  • the_content
  • post_thumbnail_html
  • widget_text
  • get_avatar

カスタムフィールドのwysiwygエディタ内にソースコードとして挿入された画像については、対応していないようです。
カスタムフィールドのwysiwygエディタ内にソースコードとして挿入された画像については動作していなかったのですが、プラグイン開発者の方に、その旨を伝えたら、速攻対処してくださいました\(^O^)/

Advanced Custom FieldsでWYSIWYGエディタを使用している場合のオプション

wp_get_attachment_imageで画像を出力している箇所については次のように書き換えるよう、ドキュメントには書いてあるのですが、

echo wp_get_attachment_image($id);

echo get_lazysizes_html( wp_get_attachment_image($id) )

設定画面に次の図のようなオプションがあり、ココにチェックを入れることによってテーマファイルの書き換えを行わなくても済むようになっていました。

まだ改善の余地はありますが、WordPressに画像の遅延読み込みを実装するなら、さしあたりこのプラグインでいいのではないかと思います。

wp_get_attachment_imageで出力している箇所についてのオプション