Googleフォントの「ウェブフォント読み込み中のテキストの表示」の解決方法

PageSpeed Insightsの分析結果の項目の１つ
ウェブフォント読み込み中のテキストの表示
Googleフォントだけが解決できないと悩んでおりましたが、解決することができたので、解説していきます。

結論

&display=swap
をGoogleフォントのクエリパラメータに追加するだけです。

<link rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" />

このように&display=swapを追加するだけでウェブフォント読み込み中のテキストの表示を解決できます。

解決方法

STEP1

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet"/>

あるホームページのGoogleフォントのソースコードです。

ウェブフォント読み込み中のテキストの表示が引っかかっており、遅延を起こしております。
こちらを修正していきます。

STEP2

&display=swapを付け加えます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&display=swap" rel="stylesheet"/>

結果、ウェブフォント読み込み中のテキストの表示が解消され、少しばかりですが、遅延が減りました。
※他の遅延項目が残っておりますが、触れないで頂けると助かります。