表示フォント：スワップ

貢献 UX
1

こんにちは、

Google フォントが使用されていることに気づきました（設定では複数のフォントを選択できることもわかっています）。

フォントが読み込まれる前のユーザー体験を向上させるために、Google の CSS ローダーに &display=swap を追加することをお勧めします。

つまり：
css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

が、以下のように変更されます：
css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

詳細は以下をご覧ください：

追伸：いくつかのドットは、初心者なので投稿に2つ以上のリンクを貼り付けられないためです :wink:

「いいね！」 2
2

font-display: swap; は、フォントの読み込みを待っている間のブロック時間とスワップ時間に影響を与えますが、当社はバックエンドからフォントを含まれています（別途 discourse-fonts gem を使用しています。この方法により、Google への呼び出しや追跡を回避できます）。

したがって、フォントは初期読み込み時に Discourse アプリケーションの一部として含まれているため、CSS 内で Google（または他の CDN）を呼び出す場合のようにフォントがレンダリングを妨げているわけではないため、何らかのメリットが得られるとは考えられません。

ただし、テーマ内でサードパーティの CDN からカスタムフォントを追加する方にとっては、font-display: swap; を使用することはおそらく依然として良いアドバイスです。

「いいね！」 6
3

うーん…パフォーマンスの問題を調査する際、try.discourse.org は代表的なインスタンスと言えるでしょうか？

そこでは Google からフォントが読み込まれているのを見て、これはグローバルな問題だと推測しました。

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

「いいね！」 1
4

ああ、なるほどですね。discourse.org（Open Sans を使用）と一致するヘッダーがあるため、Try にフォントをインポートしました。そこでは swap を使用するか、フォントをテーマに直接含めることもできます。

パフォーマンスの問題を確認する際は Try を使用できますが、私たちが追加したわずかなカスタマイズが原因ではないかを確認するために、念のため safe-mode を使用することをお勧めします。

「いいね！」 4