ネイティブLazy-Loadを実装するWordPressプラグイン

こんにちは、masakiです。

Native Lazy Loadingを実装するWordPressプラグインがGoogleから公開されました。

WordPressの管理画面から、このプラグインをインストールするだけで、設定不要で利用可能です。

Lazy Loadとは、ブラウザ上の可視部分のみデータ(画像)を読み込んで表示し、他の部分は遅延読み込みして画面の描写を高速化する方法です。

いままでコンテンツでLazy Loadを実装する場合は、Javascriptに頼らざるをえませんでした。

しかし、今回リリースされたChrome76から、ネイティブLazy Loadに対応しJavascriptに頼ること無くLazy Loadが実現できます。

実装方法はimgタグやiframeタグにloading属性を付けるだけ。

<img src="image.png" loading="lazy" alt="…" width="200" height="200" />
<iframe src="https://example.com" loading="lazy"></iframe>

loading属性には3種類設定できる。

  • auto –  ブラウザのデフォルトの遅延読み込み
  • lazy –  lazy loading
  • eager – ページ上の場所に関係なく、リソースを即ロード

ただし、現状loading属性に対応しているのはChrome76のみです。

このWordPressプラグインは、HTML内のimgタグとiframeタグにloading属性を自動付加してくれます。

Chrome76以外のブラウザではIntersection Observer APIを利用したJavascriptでのLazy Loadを提供してくれる模様。

つまりこのプラグインをインストールすれば、全てのブラウザでLazy Loadを自動で実装してくれます。

Chrome76より前のバージョンでNative Lazy Loadingを使いたい場合は、以下を設定すると使えるようです。

chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

おそらくデファクトスタンダードになるので、是非使ってみましょう。

エンジニアがおすすめするプログラミングスクール3社

スポンサーリンク