こんにちは、フロントエンドエンジニアのワタです。
ついに、Chrome v76よりnative lazy loadingのサポートが開始しました！！！そこで、Native lazy loadingの実装方法、おすすめwordpressプラグイン、ブラウザ対応方法をまとめます。
Contents
そもそもlazy loadingとは何か？
簡単にいえば、Webページの読み込みパフォーマンスをあげるための手法です。
例えば、Webで１ページに100種類の商品を写真と共にリスト形式で表示しているページがあったとします。アマゾンのような。この100種類の商品の写真を一度に読み込むと、無駄にメモリー、ストーレージに負荷を与えます。無駄にというのは、ユーザーは、ページをスクロールしないで、最初に表示された製品５つだけし見ないで、他のページにいってしまったかもしれません。
ここで、lazy loadingというのは、まずは最初の商品５つのみロードし、ユーザーが下にスクロールしたら初めて次の５個の製品をロードするといった手法です。これにより、無駄なリクエストを減らすことができます。
それでは、このブログに実装したlazy loadingのデモを紹介します。
Chrome dev toolのネットワークタブをみましょう。スクロールするたびに、画像が読み込まれているのが確認できます。
これまでは、Javascriptもしくは誰かの作ったパッケージを使用しlazy loadingを実装していた
これまでは、lazy-loadingを実装するために、ゴリゴリJavascriptを書くか、誰かの開発したパッケージをインストールしていました。そのため、実装することによるいくつかのマイナス点がありました。
- コードが複雑になる
- 余分なパッケージをインストールする必要がある
今後は<img>や<iframe>タグにloading属性を指定するだけでOK
Chrome v76からは、imgタグや、 iframeタグに、loading属性を指定するだけで、lazy loadingが実装できてしまうのです！これは、フロントエンドエンジニアとしては、最高すぎます。ありがとう、グーグル。早く他のブラウザも対応してください。
実装方法を詳しくみてみましょう。と言っても、loading属性を指定するだけなので、簡単です。
<img loading="lazy" src="pretty_image.png" alt="…" width="300" height="300">３種類の値をloading属性に指定することができます。
loading="auto"- ブラウザのデフォルトのlazy-loadingの振る舞いとなります。つまり、loading属性を指定していないのと同じです。
loading="lazy"- リソース（画像など）がViewport（スクリーンに見えている範囲）に近づくと、そのリソースを読み込みます。
loading="eager"- Viewport（スクリーンに見えている範囲）に関係なく、一度にリソース（画像など）の読み込みを開始します。
- Viewport（スクリーンに見えている範囲）に関係なく、一度にリソース（画像など）の読み込みを開始します。
ブラウザ対応状況
loading属性ブラウザ対応状況
というように、２０１９年９月現在、グーグルさんのブラウザのみとなっています。
が、特にloading属性をしたからといって、他のブラウザで不具合が起きるわけでもありませんし、大多数のユーザーがクロムを使っていると思うので、実装しないてはないでしょう。
WordPressのサイトには、グーグル作成のプラグインがおすすめ
WordPressにも、様々なlazy-loading関連のプラグインがありますが、一押しは、グーグル作成のこちらです。
このプラグインはnative-lazy-loading対応のクロムでは、それを実行し、対応していないブラウザでは、グーグル推奨の方法でSEOフレンドリーなlazy-loadingを提供してくれるという、優れものです。
なぜか、ユーザーレビューは低いですが、気にしなくて大丈夫だと思います。
設定方法
簡単です。プラグインをインストールして、有効化するだけです。
確認方法は
- 先ほどの動画のようにdev toolでnetworkタブを開き、スクロールしてみる。
- インスペクターでimg タグに、
loading="lazy"が追加されているか確認する。
Lazy-loadさせたくない時
class=”skip-lazy” を、<img>または、<iframe>タグに付け加えるだけです。
上手く動作しないとき
他のlazy-loading関連のプラグインが有効化されていないか確認してください。あれば、無効化してください。もしくは、カスタムで加えたJavaScriptが邪魔しているかもしれません。
