Liquid、JavaScriptなどに関する質問
いつもお世話になっております。
Dawnテーマのコードを見ていると、CSSの読み込み方法が2パターンあるかと思います。
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
という書き方と
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
という書き方です。
上のコードは非同期でCSSを読み込んでいるようです。
ページの表示速度を考えたら非同期でCSSを読み込ませる意味はわかりますし、最低限最初に読み込んでおかなければいけないCSSもあるかと思うのですが、なぜここは通常のCSSでの読み込みなんだろうという箇所もあります。
例えば、section-footer.cssは通常の読み込みの指定がされています。
しかし、残りのCSSは非同期で読み込みされています。
ヘッダーのCSSはすべて非同期で読み込みされているので、なぜフッターの1つのファイルだけ通常の読み込みなのかが、わかりません。
また商品ページなどはほとんどが通常の読み込みです。
商品ページはトップページほど表示が遅くならないから、通常の読み込みで良いということなんでしょうか?
これらの使い分けの意味がわかる方はいらっしゃいますでしょうか?
よろしくお願いいたします。
Dawnで読み込まれている各CSSがどのパーツのスタイルを定義しているのかを把握していないため、
個人の感想になってしまうのですが、
CLSに影響が出ないものは、非同期、にしているのではないかと思います。
CLS: https://web.dev/i18n/ja/cls/
また、CLSと同じことかもしれませんが、FOUCが発生しない、ということも考慮されているのではないかと思います。
FOUC: https://shinkufencer.hateblo.jp/entry/2021/01/09/000000
コミュニティ内の他の方がどう考えていらっしゃるかも知りたいですね。
(キュー田辺)
株式会社Q (キュー)
田辺様
いつもお世話になっております。
ご回答ありがとうございます。
CLS・FOUCについてあまりよく知らなかったため、とても勉強になりました。
他の方のお考えもお聞きしたいとのことなので、もうしばらく他の方の回答も待ってみます。
2023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024APIに関するShopifyサポートShopifyのデフォルト機能では特定の目標を達成するために外部アプリケーションの使用を検討していますか? そんな時はプログラミングの専...
By JapanGuru Sep 22, 2024