【357日目】画像にLazy loadingを適用してみた
Posted: Last Update:
前回の作業から5日。今日はLazy loadingというものをページに摘要していきたいと思います!ページ全体の読み込みを早くできる「Lazy loading」、どのようにして入れ込んでいくかも検討しつつ、対応していきます!
前回作業の振り返り
さてさて、前回の作業から5日経っているので、何をしていたのか、今日何をやればいいのかもわかりません。
とりあえず前回のブログを呼んでみると…。前回は「CLS に関する問題: 0.1 超(モバイル)」というGoogle Search Consoleに指摘された問題に取り組んでいました。取り組んだ、というより、検討した結果なにもしなかったんですよね。
で、今回は「loading="lazy"」を利用した画像の読み込みを後回しにできる機能を付けてみよう、と書いてありました。
よし、今日はこれをやってます。
Lazy loading?
「loading="lazy"」は、画像につけるタグです。次のように使います。
このように「loading="lazy"」を入れておくと、画像が可視範囲に入ってから読み込みが始まるんだとか。URLに接続があった時点で、ページの一番下にいれている画像を読み込むと、ページ全体の読み込み速度が遅くなります。「loading="lazy"」を入れることで、ページ下部の画像は必要な時のみ読み込まれるようになり、ページ全体の表示速度が早くなる利点があるんです!
すべての画像にLazy loadingを入れる方法…
理想としては、すべての画像にLazy loadingを入れてしまえばいいんですよね…。
幸いにもVisual Studio Codeで画像のタグに入れ込むことはできそうですが…。一括でやると事故を起こしそう…。
熟考した結果、共通パーツにだけ入れてみることにしました!
作業完了です。よし、ちょっと本番環境でテストしてみましょう。うまく動いたので、完成!ちなみに、ページスピードインサイトは61→68になりました。Lazy loadingのおかげなのか、誤差なのかまだ分かりませんが…。
今日はここまで
時間がきたので、今日はここまでにしたいと思います。
次に作業をするときには、やることの洗い出しを改めてしないと!だいぶためている課題があるので、優先順位などを検討したいです。