【簡単】loading=”lazy”の実装方法
- ホームページの表示速度が遅い
- SEO対策を強化したい
今までJavaScriptを用いて画像の遅延をおこなっていましたが、Google Chromeより「loading=”lazy”」が実装された為、loading=”lazy”の使い方に関して解説していきます。
目次
- 1.実装方法
- 2.SEOとの関係性は?
実装方法
<img src="○○.jp" alt="○○" loading="lazy" width="100" height="100">
loading=”lazy”をimgタグ内に記載するだけで、遅延をおこなうことができます。
imgタグだけではなく、iframeタグにも反応するので、YouTubeやGoogle Mapsにもloading=”lazy”を記載することで遅延することができます。
loading属性にはその他にも
- loading=”eager” 遅延を設定せず、従来通りの読み込み方法
- loading=”auto” ブラウザによって遅延するかどうかを判断
があり、用途次第で設定を変更することが可能です。
SEOとの関係性は?
Core Web Vitals(コア ウェブ バイタル)が2021年5月に控えている中で、ページの表示速度は大きく関係してきます。
PageSpeed Insightsの項目でも「オフスクリーン画像の遅延読み込み」という項目があり、loading=”lazy”をおこなうことで改善され、表示速度も上がってきます。
PageSpeed Insightsで自社サイト、自社ページを調べ、「オフスクリーン画像の遅延読み込み」の項目に該当する画像があれば、loading=”lazy”を試してみてください。
関連記事
-
税理士・会計事務所の集客方法|ホームページで成功する方法を徹底解説!
2022.05.27
税理士・会計事務所がホームページを用いて集客する方法とは?ホームページは制作しただけでは集客ができません。今回はホームページから集客、成功する為のノウハウを徹底解説します。無料で今すぐおこなえるものから、有料まで幅広く解説していきます。
-
ハウスクリーニングの集客方法を徹底解説|独立・起業をする方におすすめ!
2022.07.07
ハウスクリーニング・清掃業の集客方法についてまとめましたので紹介、解説します!チラシ・ポスティング、ポータルサイト、ホームページ、SNS、MEOなど時代にあった集客の手法をメリット・デメリットを交えて解説しています!これから独立・企業する方にも参考になります!
-
造園業・植木屋・庭師の集客方法について徹底解説!|メリット・デメリットを紹介!
2022.06.30
造園業・植木屋・庭師のホームページや見積もりサイト、SNS、動画等のネット集客からチラシ、口コミまで集客方法について徹底解説。仕事の依頼を増やしたいけど、集客方法が分からないとお悩みの会社や担当者はぜひ参考にしてみてください!
-
税理士事務所のSEO対策|集客につながるキーワードの選定方法を紹介!
2022.06.30
税理士事務所・会計事務所のSEO対策の必要性や集客につながるキーワードの選定方法、対策内容について紹介します。ホームページは制作しただけでは集客に結びつくことがありません。税理士事務所を検索している方に上位表示させることが大切なポイントです。