link='preload指定'
webフォントの読み込み時に、一瞬別のフォントが表示されてしまうちらつき(FOUT)を軽減させるために取った対策。
読み込みwebフォントファイルは、サブセット化済み。 cssファイル内で@font-faceでwebフォントファイルを読み込んでいます。
CSSOM構築中はブラウザのレンダリングがブロックされるため、 一瞬ではありますが、テキストがちらつきます。
解決策としては下記linkタグをhead内に指定し、フォントファイルを優先して読み込みます。
<link rel="preload" as="font" type="font/woff2" href="fontfile.woff2" crossorigin>
2重で読み込むのを防ぐために、crossoriginを指定します。
ファーストビュー要素の画像なども指定すればレンダリングは早いかもしれないが、 ファーストビュー以外のimg要素にloading=“lazy"指定する方がしっくりくる。