ウェブサイトのパフォーマンスを計ってみた（2023/11/25）

先日、このサイトのフォントを変更した記事を表示。CSS ファイルで @import を使うと読み込みが遅くなるというが、どれくらい遅くなるのだろうか。PC サイトで CSS @import なしと @import ありの場合について PageSpeed Insights というツールで測定してみた。

計測するタイミングによって変動するが、概ね以下のような値となった。

評価項目	CSS @import なし	CSS @import あり
パフォーマンス	100	91～98
ユーザー補助	93	93
SEO	90	90
First Contentful Paint（sec）テキストまたは画像が初めてペイントされるまでにかかった時間	0.3	0.9～1.0
Largest Contentful Paint（sec）最も大きなテキストまたは画像が描画されるまでにかかった時間	0.5	1.0～1.1
Total Blocking Time（ms）タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回ペイントから操作可能になるまでの合計時間	0	0
Cumulative Layout Shiftビューポート内の視覚要素がどのくらい移動しているかを測定する指標	0	0
Speed Index（sec）ページのコンテンツが取り込まれて表示される速さ	0	0.9～1.0

これくらいの差なら気にすることもないだろう。