年齢なんか関係ない！ 人生史上今が一番！ Webのパフォーマンスもブチ上げていきたい、フロントエンドエンジニアのザワです。
lazyload（レイジーロード）、Web業界では耳慣れたワードになってきたのではないでしょうか。
Webページの表示を高速化するために、ページロード初期時には画像は読み込まず、表示したいタイミングでロードを開始するアレです。「lazyload」だの「遅延読み込み」だのいってますが同じことを指しています。気分と話し相手によって変えていきましょう。
今回は2つの方法を2回に分けて実践していきます。
- Intersection observerを使用する方法
- loading属性にlazyを適用する方法
Intersection observerが一般的になる以前は、scrollイベントで随時要素の位置を取得して、みたいなことをやっていたと思いますが、そんなオールドスクールな方法は割愛させていただきます。
今ナウい方法だけを今回はチョイスします。ここであらためて注意しておきたいのは、今はこれがナウい方法ですが、1年後の激ナウい方法は変わってる可能性があるということです。随時、チェックしていきましょう！
Intersection Observerを使用した遅延読み込みのメリット
まずは、なぜこの方法が良いのかについて説明します。
- SEO的に良さそうだから
- パフォーマンス的に良さそうだから
- scrollイベントのように絶えず要素の位置を確認することを避けられる
以上！
自前で実装してみる
Intersection Observerを使用して実装したデモがこちらです。
See the Pen
lazyload intersection observer by Zawa (@sowork)
on CodePen.
まず、遅延読み込みしたいimg要素に対してlazyloadクラスを指定します。
JSの処理についてざっくり話すと、遅延読み込みしたい要素をIntersection Observerで監視するよう設定し、ビューポートに少しでも要素が交差したら、data-src属性に指定している画像をロード、ロードが完了した時点でis-lazyloadedクラスを追加する。といった処理になっています。
フワっとした出現エフェクトはCSSのtransitionによるものです。
Intersection ObserverはIE11に対応してませんので、必要な場合はpolyfillを使用します。
ライブラリで実装してみる
先ほどの自前実装では、img要素のsrc属性に対して試してみました。しかし、picture要素も遅延読み込みしたい！ background-imageでも遅延読み込みしたい！ など要求と欲求はどとまることを知りませんので、自前で随時対応していくのはメンテンスも考えると大変です。
というわけで、今回はlazysizesというライブラリに頼ってみたいと思います。
See the Pen
lazyload lazysizes by Zawa (@sowork)
on CodePen.
HTMLは自前実装のときと同じく、lazyloadクラスを指定しているものが遅延読み込み対象です。
画像がロードされると、lazyloadedクラスが付与されるので、出現エフェクトを指定したい場合は、CSSで指定しておきます。
自前実装と同じようにimg要素の遅延読み込みをしたい場合は、JSはライブラリのスクリプトを読み込むだけで、別に処理を書くことなく完了してしまいました。
picture要素やbackground-imageの対応についてもGitHubのREADME.mdに記載があります。
終わりに
Intersection Observerのブラウザ実装が普及したこと、GooglebotがIntersection Observerをサポートしたことにより、遅延読み込みを積極的に取り入れていこうという気になりました。
スクロールイベントにより頻繁にDOMの位置情報を取得するなどという気が重かった処理も書く必要がなくなり、非常に清々しい最近です。
Web制作に関わるものとして、サクサク動くサイトを産み続けるべく良いインプット、アウトプットを繰り返していきたいですね。
それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
