レンダリングが遅くなる原因になるので気をつけよう

結論：クライアントの要望で検索結果リッチスニペットに画像を表示させるべく、Schema.org構造化データを追加したら追加場所が悪くcssの読み込みを阻害していた模様で、FOUTの原因になっていた。

そのまんま。
styleより上にJSON-LD形式のSchema.org構造化データの入ったscriptを置いていたら、Firefox,Safariでcss読み込み前の素のHTMLが0.3秒？程度表示されるようになっていた。記述場所を入れ替えれば治った。
記述位置は大事だよねって改めて思ったのでメモ。 記述順はページの設定系メタ情報、CSS、FaviconやOGタグ、その他のメタ情報。

ちなみに蛇足ですが、検索結果に画像を表示させる手法について

• Schema.org構造化データを追加する
• headタグ内にPageMapデータを設定する
• headタグ内にthumbnailメタタグを設定する

という方法がありますが、（それに関する日本語の記事がわんさと出てきますが、）ChatGPT曰く現在重要視されるのはSchema.org構造化データの追加らしいです。
が、ググるとPageMapとmeta thumbnailの紹介ばかりが出てきます。
なんでSchema.orgの画像のことが言及されていないんだろう？と質問したら、ChatGPTから小馬鹿にしたように下記の返答が来ました。

過去の一般的な実装方法として広く普及していたからです。これらの方法は、一時期Googleや他の検索エンジンによってサムネイルの表示に使われていたため、技術者ブログでもよく取り上げられていました。

裏取り調査していない＆すべて併記できるようだったので今回はいったんSchema.orgのJSON-LD, PageMap, thumbnail全部書きました。 技術も仕様も移ろうぜ・・・