lazyloadの実装

解決済
hafuuu
新規メンバー
11 0 0

お世話になります。

ページスピードアップのため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に変更はしたくない)

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

です。

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

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

無題.png

0 件の「いいね!」
fullbalance
先駆者
237 54 262

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

同ライブラリは、

data-src="image2.jpg"

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

Shopify Expertのフルバランスです。Shopify,Shopify Plusの制作・運営サポートをしております。

国内初のShopify書籍「商品売るならShopify」発売中です。

また6月に技術書を発売予定ですので、こちらもよろしければ手に取ってみてください

ご参考になりましたら、解決&ベストソリューション設定をいただけると嬉しいです
0 件の「いいね!」
Jizo_Inagaki
航海者
388 135 412

横から失礼します。

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は実装されているはずであり、この件の作業前に動作していなかったのでしたらなんらかの問題が起きていたのかもしれません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
hafuuu
新規メンバー
11 0 0

ありがとうございます。

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

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

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

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

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

 

lazyload.jpg

0 件の「いいね!」
Jizo_Inagaki
航海者
388 135 412

成功

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

スクリーンショット 2021-05-04 15.24.15.png

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

 

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

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
hafuuu
新規メンバー
11 0 0

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

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

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

 

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

ありがとうございます。

0 件の「いいね!」
hafuuu
新規メンバー
11 0 0

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

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

0 件の「いいね!」