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

[るん]

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

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

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

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

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

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

[Qcoltd]

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についてあまりよく知らなかったため、とても勉強になりました。

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