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”を試してみてください。
関連記事
-
【2023年】SEO対策とは? - SEOの基本から最新の上位表示の施策を解説!
SEO対策とはGoogleなどでユーザーが特定のキーワードで検索した時にホームページやWebサイトを上位表示させやすくする検索エンジン最適化のことです。今回は基本的なSEOの知識から初心者でもできる対策方法について解説した記事です。正しい知識をつけ、集客に結びつけましょう。
2023/03/22
-
【必見】整骨院の集客方法!最新の集客方法まとめ!
整骨院の集客方法について、ホームページやポータルサイト、チラシ、SNS、MEO、動画撮影などの特徴やメリット、デメリットを踏まえ、紹介しております。整骨院の集客・経営でうまくいかずお悩みの方に向けて解説しておりますので是非参考にしてみてください!
2022/06/28
-
モバイルフレンドリーとは? - SEOへの影響や確認方法、テストツールを解説!
モバイルフレンドリーとはモバイル端末(スマホ)の閲覧増加に伴い、Googleが対応しているWebサイトの順位を引き上げ、対応していないサイトの順位を下げるSEO対策のアップデートです。今回はサイト・ページのチェックツールや対応方法について紹介、解説していきます。
2022/08/29
-
鍼灸院のSEO対策の方法|ホームページを上位表示させ、安定した集客を実現!
鍼灸院のSEO対策の必要性や狙うべきキーワード、対策方法、事例をまとめましたので紹介!ホームページ・Webサイトは制作しただけでは集客に結びつきません。GoogleやYahoo!の検索結果に上位表示をさせ、アクセスしてもらうことで集客につながります。
2023/01/16