FROM CACHE - jp_header
解決済

lazyloadの実装

heyuuuuu
観光客
21 0 1

お世話になります。

ページスピードアップのため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

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
992 373 690

成功

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

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

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

 

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

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

 

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

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

元の投稿で解決策を見る

6件の返信6

株式会社フルバランス
Shopify Partner
1441 505 644

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

同ライブラリは、

data-src="image2.jpg"

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
heyuuuuu
観光客
21 0 1

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

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

Jizo_Inagaki
Shopify Partner
992 373 690

横から失礼します。

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デザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
heyuuuuu
観光客
21 0 1

ありがとうございます。

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

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

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

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

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

 

lazyload.jpg

Jizo_Inagaki
Shopify Partner
992 373 690

成功

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

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

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

 

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

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

 

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

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

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

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

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

 

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

ありがとうございます。