lazyloadの実装

[heyuuuuu]

お世話になります。

ページスピードアップのためlazyloadを実装したいと思っています。

色々調べた結果、

1.GitHubからファイルダウンロード

https://github.com/aFarkas/lazysizes

2.theme liquidにコード埋め込み

{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>

が大まかな流れなのでやってみたところ、

かご横画像(フリック画像)が添付した画像のように表示されなくなってしまいます。

＊商品ページ内の他の画像はLazyloadが適用されているようです。

・テンプレートはDebutを使用（Narrativeに変更はしたくない）

・フロントの知識はほぼ初心者

です。

どなたか原因がわかるかたいたら、お教えいただけると大変たすかります。

どうぞよろしくおねがいいたします。

[株式会社フルバランス]

はられているコード以外は何もされていないでしょうか？

同ライブラリは、

data-src="image2.jpg"

の様に、srcをdata-srcに書き換える必要がありそうですが・・

[heyuuuuu]

返信が遅れましたが、ご丁寧に解説をいただきありがとうございました。

こころあたりがありますので確認してみます。ありがとうございました。

[Jizo_Inagaki]

横から失礼します。

Debutはassetsディレクトリ内にlazysizes.jsを内包しており、theme.liquidで以下のような記述で読み込まれていると思われます。

<link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">

下記はDebutのデモストアですが、こちらのソースを開いて「lazysizes」あたりのワードで検索いただくと確認できます。

https://debut-theme-default.myshopify.com/

つまり何もせずともLazyloadは実装されているはずであり、この件の作業前に動作していなかったのでしたらなんらかの問題が起きていたのかもしれません。

[heyuuuuu]

ありがとうございます。

おっしゃる通り、theme.liquidに

 <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>

上記のようなコードが入っておりました。

ただpage speed insightで確認すると添付画像のように「オフスクリーン画像の遅延読み込み」が

改善できる項目のトップにきており、これでlazyloadされているのかと思っております。。

[Jizo_Inagaki · Accepted solution]

確認いただきありがとうございます。

前述しましたデモストアで計測したところ「オフスクリーン画像の遅延読み込み」は合格していましたので、Googleにも認識可能な遅延表示の動作だと思います。

PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」のところをクリックすれば問題の画像が表示されると思いますので、そこを確認して対象を突き止め、原因を把握してから改善策を練るのが良いように思います。

アプリの影響かもしれませんし、動画を入れているならその入れ方やソースの状態に原因があるのかもしれません。
また、 fullbalanceさんがご指摘されているようなコードが付けられていない画像があるのかもしれません(管理画面のエディタから追加した画像など?)。

なお、動作していないように見えるからといって同種のライブラリを複数個読み込むと問題を起こしやすいのであまりお勧めできません。
コンソールのエラーなどを確認して調査しないと明言はできませんが、恐らく画像が表示されなくなったのはこれが原因かなと思います。

[heyuuuuu]

ご丁寧にご回答いただきありがとうございます。

私のほうでも改めて確認したところ、合格の項目としてでておりました。

（恥ずかしながら「合格した監査」という部分を見るのがはじめてでした）

コードがつけられてない画像はありそうなので、みてみたいと思います。

ありがとうございます。