LozyLoadの仕様について

[BECOS]

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

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

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

よろしくお願いします。

[Jizo_Inagaki]

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

検索で出てくる記事には各自実装というものが目につき、以下のように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の記述が見つからなかっため、おそらく使っていないバージョンのはずです。

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

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

[junichiokamura · Accepted solution]

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

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