株式会社グリーゼのサービス紹介資料
株式会社グリーゼのサービス紹介資料です。企業のWebマーケティング全般を支援するグリーゼの、サービス概要、選ばれる理由、実績、設計資料などを掲載しています。「グリーゼってどんな会社」と思ったからは、ぜひ資料をダウンロードしてください。
2019年09月19日
Google Chromeが、ネイティブLazy Loadを正式にサポート
SEOコンサルタントの長濱佳子です。
Google Chromeが、ネイティブLazy Loadを正式にサポートするようになりました。Lazy Loadとは何か？ Lazy Loadを正式にサポートしたことでどんな効果があるのか？ について、ご紹介します。
■Lazy Loadとは？
Lazy LoadはWebページのスクロールに応じて、画像データを遅延読込させる方法。本来、画像のある「Webページ」を表示する際、ページをロードする時には全ての画像をWebサーバーからダウンロードします。
そのため、多数の画像が配置されているページでは、ロードに時間がかかりページがなかなか表示しませんでした。それが「Lazy Load」を利用することで、可視領域の画像だけがロードされるようになるため、ページ表示を高速化できるのです。
■ネイティブLazy Loadを利用するには？
ネイティブLazy Loadを利用するには、 <img> タグに loading属性を追加するだけ。<iframe> タグでも loading 属性は機能します。loading属性には3種類の値を設定できますが、画像であれば値に"lazy"を指定すればOKです。
■WordPress用のプラグインも公開！
また、GoogleはネイティブLazy Loadを簡単に実装するWordPress用のプラグインも公開しました。こちらもインストールして有効にするだけで、設定は不要です。有効にすると、<img> タグと<iframe> タグにloading="lazy"属性をプラグインが自動的に追加します。
■まとめ
「Lazy Load」を利用することでページ表示を高速化できるため、UX（ユーザーエクスペリエンス）の改善に期待ができます。現時点でサポートしているのはGoogle Chromeだけですが、JavaScriptの知識がなくても実装できるのは注目です。
今後、Google以外のブラウザがサポートすることを期待しましょう。
この記事は2019年9月19日現在の情報を元にしています。
外部サイトへのリンクが切れている場合があります。ご了承ください。
