Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?
@RYO_nami

【Lazy Loading】画面表示を速くする簡単な方法

はじめに

フロントエンド強化月間の参加記事です。

概要

画像をたくさん使用するWebサイトでは画面の読込に時間がかかってしまうというパフォーマンスの課題を常に抱えています。

その課題の簡単な解消方法として「Lazy Loading」があります。

Lazy Loading とは

Lazy Loading(遅延読込)はリソースを事前に読み込むのではなく、必要になった時にリソースを読み込む手法のことです。
要は、画像を表示するタイミングになった時に初めて画像を読み込みます。

Lazy Loading の効果

通常の画面読込ではブラウザの表示領域外の画像も事前に読み込んでいます。
これでは画面が表示されるまで時間がかかります。

before.PNG

Lazy Loading ではブラウザの表示領域外にある画像(破線の部分)を読み込まないことで画面の表示速度を向上させることができます。

after.PNG

実装

では、実際に実装してみましょう。

1. lazysizes.min.jsをダウンロードする

lazysizes をGitHubから取得します。
2021/05現在の最新バージョンは5.3.1です。

2. lazysizes.min.jsをscriptタグで読み込む

bodyの閉じタグの直前辺りでlazysizes.min.jsを読み込みます。

index.html
    <script src="lazysizes.min.js" async></script>
</body>

3. imgタグのclass属性に"lazyload"を指定する

class="lazyload" とすることで、lazysizes.min.jsに遅延読込の対象であると判断させます。

index.html
<img class="lazyload" src="image.jpg">

4. imgタグのsrc属性をdata-src属性に変更する

data-src="image.jpg" とすると、画像が表示領域に差し掛かったタイミングでlazysizes.min.jsが画像を読み込みます。

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

以上でLazy Loading(遅延読込)の実装は完了です。

検証

Lazy Loadingによってどれくらいの変化があるか検証してみます。

検証方法

Lazy Loadingを(a)実装していないページと(b)実装しているページの2種類を用意し、
キャッシュを利用しないでページを読み込んだ際の読込完了時間の差異を計測します。
両方のページでは15枚ほど画像を読み込みます。

実装内容

index.html
<body>
    <div>
        <img class="lazyload" data-src="img-001.jpg">
    </div>
    <div>
        <img class="lazyload" data-src="img-002.jpg">
    </div>
    <div>
        <img class="lazyload" data-src="img-003.jpg">
    </div>
    <!-- 省略 -->
    <div>
        <img class="lazyload" data-src="img-013.jpg">
    </div>
    <div>
        <img class="lazyload" data-src="img-014.jpg">
    </div>
    <div>
        <img class="lazyload" data-src="img-015.jpg">
    </div>
    <script src="lazysizes.min.js" async></script>
</body>

検証結果

(a)実装していないページ

before2.PNG

すべて読み込み終えるのに1.47秒かかっています。
15枚近くある画像をすべて読み込んでいるせいか17回もリクエストが発生しており、6.1MBのリソースを取得しています。

before3.PNG

LightHouseのスコア判定でも「Avoid enormous network payloads」が警告として現れています。

(b)実装しているページ

after2.PNG

すべて読み込み終えるのに0.584秒かかっています。
表示領域内の4つの画像のみを取得しているため、リソースが1.2MBに抑えられています。
ブラウザをスクロールして画像が表示領域に差し掛かった時、残りの画像が随時読み込まれます。

after3.PNG

LightHouseのスコア判定でも「Avoid enormous network payloads」が現れていません。
つまり、パフォーマンスが改善していることがわかります。

結果

Lazy Loading は比較的、簡単に実装・導入できる上、画像をたくさん利用するWebサイトにおいてはパフォーマンスが改善されることが見込めます。

参考

35
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
RYO_nami
現在は主にフロントエンドエンジニアとして仕事しています。 社会人歴が長くなるにつれ仕事では徐々に管理系の業務が増え、 プライベートでは子育てに追われ、 最近はプログラミングしてないなぁ…技術から離れてるなぁ… としみじみ思ったので、2020年はQiitaにアップする習慣を身に付けることにしました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
35
Help us understand the problem. What is going on with this article?