平素よりmakeshopをご利用いただき、誠にありがとうございます。
この度、クリエイターモードのデザインセット「Complete」において、ページ表示速度の向上を目的とした画像の遅延読込（lazy属性の追加）の対応をおこないました。
画像の遅延読込（lazy属性）について
■「画像の遅延読込」とは
画像の遅延読込（lazy loading）とは、ページを開いた際、「画面内」に表示される画像のみを先に読み込み、スクロールして表示されるタイミングで他の画像を読み込む手法です。
■lazy属性の効果
・ページ全体の表示速度が向上し、閲覧者の利便性が向上します。
・商品画像の多いショップ様では特に効果が高く、ページ離脱率の低下にもつながります。
「Complete」の対応内容
「Complete」 初期値デザインにおいて、下記の画像がlazy属性の記述に対応しました。
※ショップロゴやトップページイメージなどの画像などにつきましては本件の対象外としております。
■TOPページ
・新商品
・おすすめ商品
・スペシャル商品
・ランキング
・新着レビュー
・最近チェックしたアイテム
■カテゴリページ・検索結果・まとめ買い一覧
・一覧画像
■商品詳細ページ
・サブ画像
・商品グループの関連商品
・最近チェックしたアイテム
・バリエーション画像
lazy属性への対応方法
オリジナルのデザインをご利用中のショップ様は、imgタグの中に”loading=”lazy”の記述をおこなうことで対応が可能です。
記述例）
<img src=”example.jpg” loading=”lazy”>
くわしい修正方法については、下記のよくある質問をご参考ください。
遅延読み込み（レイジーローディング）対応したいです。方法を教えてください。
デザインのカスタマイズをおこなっていないショップ様は、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / デザインセット一覧
より「Complete」のデザインセットを新規追加し、適用することで即時に対応できます。
■注意事項
・本件の記述をふくめ、HTML/CSS等のデザインに関するご不明点は『デザイン質問掲示板』 へお問い合わせください。
今後も、ショップオーナー様のご要望を実現してまいります。
引き続き、makeshopをどうぞよろしくお願いいたします。
