FROM CACHE - jp_header
解決済

LozyLoadの仕様について

BECOS
遊覧客
22 0 5

shopifyのLozyLoadの仕様について、下記条件を満たしていますでしょうか。

・intersectionObsever APIで実装しているか
・polyfillを実装しているか
・<noscript>タグを実装しているか
・LozyLoadコンテンツに構造化データをマークアップしているか

ご存知の方いましたら、教えていただければと思います。

よろしくお願いします。

1 件の受理された解決策
junichiokamura
Community Manager
1200 280 506

成功

jizoさんのおっしゃる通り、テーマはliquidの振る舞いや基本ファイルの構成などのルール以外は、Shipify本体と分離されたファイルの集合なので、JSに関する挙動はテーマで独立しています。ですので、ShopifyとしてのLazyLoadへの対応の仕様は基本的にはありません。テーマ次第ということになりますし、ご質問の条件を満たしたテーマを自作されることも可能です。

わずかですが、以下の日本語翻訳されたブログでも、初歩的なLazyLoadについて実際にShopifyチームがどのようにテーマに応用したか記載しているので、ご参考にしてください。
https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve

Senior Partner Solutions Engineer

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
992 373 690

公式的なものがあるのかはわかりませんが、テーマごとにそれぞれ用意していると考えています。

検索で出てくる記事には各自実装というものが目につき、以下のようにshopify partners内の2019年の記事(Slateに特化した内容ですが)にも同種の記事がありましたので、公式的なものはないという可能性が高いと思われるためです。

https://www.shopify.com/partners/blog/lazy-loading

もっとも、Slateに入っていたのなら lazysizes.js が公式に近いといえるのかもしれませんが。

 

Debutであれば、上記記事に記載されているのと同じ lazysizes.jsやriasが使われています。

lazysizes.jsのChangelogをみますと、v4.1.4にてIntersectionObserver APIを使ったバージョンが作成されたようですが、Debutテーマ内を検索してもIntersectionObserverの記述が見つからなかっため、おそらく使っていないバージョンのはずです。

 

他のテーマはわかりませんので、お使いのテーマのドキュメントかテーマ内のコード検索で特定するしかないかもしれません。

 

以上ですが、「公式のものはない」という根拠を見つけられておらず、推測にすぎない点をご理解ただれればと思います。
間違っていましたらどなたか訂正いただければ助かります。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
junichiokamura
Community Manager
1200 280 506

成功

jizoさんのおっしゃる通り、テーマはliquidの振る舞いや基本ファイルの構成などのルール以外は、Shipify本体と分離されたファイルの集合なので、JSに関する挙動はテーマで独立しています。ですので、ShopifyとしてのLazyLoadへの対応の仕様は基本的にはありません。テーマ次第ということになりますし、ご質問の条件を満たしたテーマを自作されることも可能です。

わずかですが、以下の日本語翻訳されたブログでも、初歩的なLazyLoadについて実際にShopifyチームがどのようにテーマに応用したか記載しているので、ご参考にしてください。
https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve

Senior Partner Solutions Engineer