FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

非同期で読み込ませているCSSと通常CSSの使い分けにつきまして

非同期で読み込ませているCSSと通常CSSの使い分けにつきまして

るん
Shopify Partner
86 3 11

いつもお世話になっております。

 

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つのファイルだけ通常の読み込みなのかが、わかりません。

 

また商品ページなどはほとんどが通常の読み込みです。

商品ページはトップページほど表示が遅くならないから、通常の読み込みで良いということなんでしょうか?

 

これらの使い分けの意味がわかる方はいらっしゃいますでしょうか?

よろしくお願いいたします。

2件の返信2

Qcoltd
Shopify Partner
1096 447 441

Dawnで読み込まれている各CSSがどのパーツのスタイルを定義しているのかを把握していないため、

個人の感想になってしまうのですが、

 

CLSに影響が出ないものは、非同期、にしているのではないかと思います。

 

CLS: https://web.dev/i18n/ja/cls/

 

また、CLSと同じことかもしれませんが、FOUCが発生しない、ということも考慮されているのではないかと思います。

 

FOUC: https://shinkufencer.hateblo.jp/entry/2021/01/09/000000

 

コミュニティ内の他の方がどう考えていらっしゃるかも知りたいですね。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
るん
Shopify Partner
86 3 11

株式会社Q (キュー)

田辺様

 

いつもお世話になっております。

ご回答ありがとうございます。

 

CLS・FOUCについてあまりよく知らなかったため、とても勉強になりました。

 

他の方のお考えもお聞きしたいとのことなので、もうしばらく他の方の回答も待ってみます。