Liquid、JavaScriptなどに関する質問
お世話になります。
ページスピードアップのため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に変更はしたくない)
・フロントの知識はほぼ初心者
です。
どなたか原因がわかるかたいたら、お教えいただけると大変たすかります。
どうぞよろしくおねがいいたします。
解決済! ベストソリューションを見る。
成功
確認いただきありがとうございます。
前述しましたデモストアで計測したところ「オフスクリーン画像の遅延読み込み」は合格していましたので、Googleにも認識可能な遅延表示の動作だと思います。
PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」のところをクリックすれば問題の画像が表示されると思いますので、そこを確認して対象を突き止め、原因を把握してから改善策を練るのが良いように思います。
アプリの影響かもしれませんし、動画を入れているならその入れ方やソースの状態に原因があるのかもしれません。
また、 fullbalanceさんがご指摘されているようなコードが付けられていない画像があるのかもしれません(管理画面のエディタから追加した画像など?)。
なお、動作していないように見えるからといって同種のライブラリを複数個読み込むと問題を起こしやすいのであまりお勧めできません。
コンソールのエラーなどを確認して調査しないと明言はできませんが、恐らく画像が表示されなくなったのはこれが原因かなと思います。
はられているコード以外は何もされていないでしょうか?
同ライブラリは、
data-src="image2.jpg"
の様に、srcをdata-srcに書き換える必要がありそうですが・・
返信が遅れましたが、ご丁寧に解説をいただきありがとうございました。
こころあたりがありますので確認してみます。ありがとうございました。
横から失礼します。
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は実装されているはずであり、この件の作業前に動作していなかったのでしたらなんらかの問題が起きていたのかもしれません。
ありがとうございます。
おっしゃる通り、theme.liquidに
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
上記のようなコードが入っておりました。
ただpage speed insightで確認すると添付画像のように「オフスクリーン画像の遅延読み込み」が
改善できる項目のトップにきており、これでlazyloadされているのかと思っております。。
成功
確認いただきありがとうございます。
前述しましたデモストアで計測したところ「オフスクリーン画像の遅延読み込み」は合格していましたので、Googleにも認識可能な遅延表示の動作だと思います。
PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」のところをクリックすれば問題の画像が表示されると思いますので、そこを確認して対象を突き止め、原因を把握してから改善策を練るのが良いように思います。
アプリの影響かもしれませんし、動画を入れているならその入れ方やソースの状態に原因があるのかもしれません。
また、 fullbalanceさんがご指摘されているようなコードが付けられていない画像があるのかもしれません(管理画面のエディタから追加した画像など?)。
なお、動作していないように見えるからといって同種のライブラリを複数個読み込むと問題を起こしやすいのであまりお勧めできません。
コンソールのエラーなどを確認して調査しないと明言はできませんが、恐らく画像が表示されなくなったのはこれが原因かなと思います。
ご丁寧にご回答いただきありがとうございます。
私のほうでも改めて確認したところ、合格の項目としてでておりました。
(恥ずかしながら「合格した監査」という部分を見るのがはじめてでした)
コードがつけられてない画像はありそうなので、みてみたいと思います。
ありがとうございます。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024