HTML

Chrome v76よりnative lazy loadingサポート開始!

native-lazy-loading

こんにちは、フロントエンドエンジニアのワタです。

ついに、Chrome v76よりnative lazy loadingのサポートが開始しました!!!そこで、Native lazy loadingの実装方法、おすすめwordpressプラグイン、ブラウザ対応方法をまとめます。

そもそもlazy loadingとは何か?

簡単にいえば、Webページの読み込みパフォーマンスをあげるための手法です。

例えば、Webで1ページに100種類の商品を写真と共にリスト形式で表示しているページがあったとします。アマゾンのような。この100種類の商品の写真を一度に読み込むと、無駄にメモリー、ストーレージに負荷を与えます。無駄にというのは、ユーザーは、ページをスクロールしないで、最初に表示された製品5つだけし見ないで、他のページにいってしまったかもしれません。

ここで、lazy loadingというのは、まずは最初の商品5つのみロードし、ユーザーが下にスクロールしたら初めて次の5個の製品をロードするといった手法です。これにより、無駄なリクエストを減らすことができます。

 

それでは、このブログに実装したlazy loadingのデモを紹介します。

 

Chrome dev toolのネットワークタブをみましょう。スクロールするたびに、画像が読み込まれているのが確認できます。

これまでは、Javascriptもしくは誰かの作ったパッケージを使用しlazy loadingを実装していた

これまでは、lazy-loadingを実装するために、ゴリゴリJavascriptを書くか、誰かの開発したパッケージをインストールしていました。そのため、実装することによるいくつかのマイナス点がありました。

  1. コードが複雑になる
  2. 余分なパッケージをインストールする必要がある

今後は<img>や<iframe>タグにloading属性を指定するだけでOK

Chrome v76からは、imgタグや、 iframeタグに、loading属性を指定するだけで、lazy loadingが実装できてしまうのです!これは、フロントエンドエンジニアとしては、最高すぎます。ありがとう、グーグル。早く他のブラウザも対応してください。

実装方法を詳しくみてみましょう。と言っても、loading属性を指定するだけなので、簡単です。

<img loading="lazy" src="pretty_image.png" alt="…" width="300" height="300">

3種類の値をloading属性に指定することができます。

  • loading="auto"
    • ブラウザのデフォルトのlazy-loadingの振る舞いとなります。つまり、loading属性を指定していないのと同じです。
  • loading="lazy"
    • リソース(画像など)がViewport(スクリーンに見えている範囲)に近づくと、そのリソースを読み込みます。
  • loading="eager"
    • Viewport(スクリーンに見えている範囲)に関係なく、一度にリソース(画像など)の読み込みを開始します。

ブラウザ対応状況

loading属性ブラウザ対応状況loading属性ブラウザ対応状況

出典:https://caniuse.com/#search=loading

というように、2019年9月現在、グーグルさんのブラウザのみとなっています。

が、特にloading属性をしたからといって、他のブラウザで不具合が起きるわけでもありませんし、大多数のユーザーがクロムを使っていると思うので、実装しないてはないでしょう。

WordPressのサイトには、グーグル作成のプラグインがおすすめ

WorpressのNative Lazyloadプラグイン

WordPressにも、様々なlazy-loading関連のプラグインがありますが、一押しは、グーグル作成のこちらです。

このプラグインはnative-lazy-loading対応のクロムでは、それを実行し、対応していないブラウザでは、グーグル推奨の方法でSEOフレンドリーなlazy-loadingを提供してくれるという、優れものです。

なぜか、ユーザーレビューは低いですが、気にしなくて大丈夫だと思います。

設定方法

簡単です。プラグインをインストールして、有効化するだけです。

確認方法は

  1. 先ほどの動画のようにdev toolでnetworkタブを開き、スクロールしてみる。
  2. インスペクターでimg タグに、loading="lazy" が追加されているか確認する。

Lazy-loadさせたくない時

class=”skip-lazy” を、<img>または、<iframe>タグに付け加えるだけです。

上手く動作しないとき

他のlazy-loading関連のプラグインが有効化されていないか確認してください。あれば、無効化してください。もしくは、カスタムで加えたJavaScriptが邪魔しているかもしれません。

ABOUT ME
Wata
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です