Debutテーマのv17.4.1で追加された機能の一つであるCSSの非同期読み込みに関して調べたことのメモ。推測に加え、筆者の理解不足や間違いがあるかもしれませんので、読まれる方はその点は了解ください。
前提
下記の記事の補足記事となります。
Debutテーマでは、いままでは普通にtheme.liquidにlink要素でCSSを読み込ませていましたが、v17.4.1で以下のように変わりました。
- ファーストビューに関連するCSS指定のみをインラインで記載
- CSSのカスタム変数を使用
- CSSの非同期読み込み
この記事では上記内の3つ目の非同期読み込みに関連する部分に対して書いています。
追加されているコード
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
<!-- 中略 -->
<script>
window.performance.mark('debut:theme_stylesheet_loaded.start');
function onLoadStylesheet() {
performance.mark('debut:theme_stylesheet_loaded.end');
performance.measure('debut:theme_stylesheet_loaded', 'debut:theme_stylesheet_loaded.start', 'debut:theme_stylesheet_loaded.end');
var url = "{{ 'theme.css' | asset_url }}";
var link = document.querySelector('link[href="' + url + '"]');
link.loaded = true;
link.dispatchEvent(new Event('load'));
}
</script>
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
後述するonLoadとmediaによるCSSの非同期読み込みの仕組みには以下が含まれています。なお、少し後述しますが今回はperformance.markによるパフォーマンス計測は除きます。
- preload用linkタグ
- JSによる非同期読み込み処理付きのlinkタグ
- 非同期読み込み用linkJSに連動して動作するscriptタグ
1はpreloadの指示で、2も必要です。
2がプレーンな状態ではpreload非対応ブラウザ(2020.10現在ではIEは当然ですがFirefoxやOpera系も非対応)で非同期の仕組みが働かないので、preloadが使えずとも実行可能なonloadを利用した非同期読み込みを実装しています。
3に関してはtheme.jsでCSSの読み込みが監視されている関係だと思われます。非同期読み込み時にloadイベントを作り、link.loadedというプロパティに真偽値を入れ、それらが利用されています。
onLoadとmediaによるCSSの非同期読み込みの仕組み
上記のmedia="print" onload="this.media='all';"が非同期読み込みの仕組みで詳細は以下。
performance.markによるパフォーマンス測定
詳細は上記の通り。Debutにおいては、調べられていませんがShopifyが提供している速度計測関連の仕組み用かなと考えています。そうでないなら公開テーマに入れるメリットがあまりないので。有用なデータでないとはいいませんがデフォルトで動作させるものとも言い難いように思います。
またはここをトリガーにしてまた別の何かを動作させているのかもしれませんが、その辺りはまだ調べられていません。
結び
非同期読み込みは良いことだと思いますが、DebutのCSSをカスタムする際には以下のように作る必要があるかもしれません。
- ファーストビュー用の記述をコピーしてインラインで記述
- 外部スタイルシートを増やすのではなく、theme.cssに追加する
これらは常に必須ではないかもしれませんが、今回追加された速度向上策を邪魔しないための方法ではあるかと思います。
1人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
