kamenokoki.com

【357日目】画像にLazy loadingを適用してみた

Posted:  Last Update:

前回の作業から5日。今日はLazy loadingというものをページに摘要していきたいと思います!ページ全体の読み込みを早くできる「Lazy loading」、どのようにして入れ込んでいくかも検討しつつ、対応していきます!

前回作業の振り返り

さてさて、前回の作業から5日経っているので、何をしていたのか、今日何をやればいいのかもわかりません。

とりあえず前回のブログを呼んでみると…。前回は「CLS に関する問題: 0.1 超(モバイル)」というGoogle Search Consoleに指摘された問題に取り組んでいました。取り組んだ、というより、検討した結果なにもしなかったんですよね。

で、今回は「loading="lazy"」を利用した画像の読み込みを後回しにできる機能を付けてみよう、と書いてありました。

よし、今日はこれをやってます。

Lazy loading?

「loading="lazy"」は、画像につけるタグです。次のように使います。

<img src="src.jpg" alt="画像の説明" loading="lazy">

このように「loading="lazy"」を入れておくと、画像が可視範囲に入ってから読み込みが始まるんだとか。URLに接続があった時点で、ページの一番下にいれている画像を読み込むと、ページ全体の読み込み速度が遅くなります。「loading="lazy"」を入れることで、ページ下部の画像は必要な時のみ読み込まれるようになり、ページ全体の表示速度が早くなる利点があるんです!

すべての画像にLazy loadingを入れる方法…

理想としては、すべての画像にLazy loadingを入れてしまえばいいんですよね…。

幸いにもVisual Studio Codeで画像のタグに入れ込むことはできそうですが…。一括でやると事故を起こしそう…。

熟考した結果、共通パーツにだけ入れてみることにしました!

作業完了です。よし、ちょっと本番環境でテストしてみましょう。うまく動いたので、完成!ちなみに、ページスピードインサイトは61→68になりました。Lazy loadingのおかげなのか、誤差なのかまだ分かりませんが…。

Lazy loadingの結果、PSIが改善

今日はここまで

時間がきたので、今日はここまでにしたいと思います。

次に作業をするときには、やることの洗い出しを改めてしないと!だいぶためている課題があるので、優先順位などを検討したいです。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告