クリティカルレンダリングパスとなるCSSを分けた場合の下部コンテンツの動き

Question

ご覧いただきましてありがとうございます。

現在、ファーストビューで見える範囲のCSSのみ別ファイルに記述し、head内でPHPによるincludeを使用して、インライン読み込みしています。
FVで見える範囲以外のコンテンツで使用しているCSSについては、

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

のように、後から読み込まれるように記載しております。

CLSの数値も改善され、表示速度も速くなったのは良いのですが、
ページの下の方にアンカーリンクでアクセスした際に、FV以外のCSSは後読みになってしまっているため、何もCSSが効いていない状態から表示されてしまい、その後ガタガタとレイアウトとシフトが発生してから、想定通りのレイアウトが実現されます。
あとは、ページ中ほどで更新した場合もこの大幅なレイアウトおよび見た目の変化が非常に気になります・・。

これはWEBサイトとしては問題のない形なのでしょうか？
これを回避しようとするとやはり、head内で下部までのCSSを全て読み込む（表示速度は落ちますが・・）しか方法はないのでしょうか？

アドバイスいただけますと幸いですm(__)m

Answer 1

こんにちは！
WEBサイトとして問題がないかと言われれば、レイアウト崩れの範囲や読み込み速度などをどこまで許容できるのかによると思います。（レイアウトがガタガタ変化してしまうことを許容してでもとにかく初期表示を爆速にする必要がある...など）

私もあまりウェブサイトのチューニングを行った経験はなく、想像での回答になってしまうのですが、First Viewに入る部分のCSSのみインライン読み込みするという方法はあまり聞いたことがありません。質問者様が観測された様な挙動を引き起こすため利用されないのかもしれないですし、そこまでチューニングしても得られる効果が薄いからなのかもしれません。（間違っていたらごめんなさい）

よく聞くところでは、SPAの様な構成で、最初のページに含まれるコンポーネント以外は後から非同期に読み込むという手法です。First Viewではなくページ単位ですので、レイアウト崩れはほぼ起きないと思います。
またCSSのチューニングとしては、ソースコードのminifyやセレクタの指定方法などで速度が改善する可能性があるので、試してみると良いかもしれません。

参考
https://www.seplus.jp/dokushuzemi/blog/2020/08/step_up2_specialist_css.html