web-dev-qa-db-ja.com

GoogleFontsのプリロード

Light Houseの監査では、キーリクエスト、特にReactアプリで使用している2つのgoogleフォントをプリロードすることを提案しています。LightHouseのメンバーは次の使用を提案しています：<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

ウォーターフォールに表示され、次のコンソール警告が表示されるため、リクエストを行っていることがわかります。

"リソース https://fonts.googleapis.com/css?family=Open+Sans|Roboto:7 はリンクプリロードを使用してプリロードされましたが、ウィンドウのロードイベントから数秒以内に使用されませんでした。適切な値があり、意図的にプリロードされていることを確認してください。」

残念ながら、2つのフォントは私のアプリに表示されなくなりました。これらをCSSで@ font-faceなどを使用して定義する必要がありますか？

javascripthtmlcssreactjslighthouse
6
wildair

フォントをプリロードする正しい方法は、preloadリンクとstylesheetの両方を追加することです。 [〜＃〜] mdn [〜＃〜] に基づく簡単な例は次のとおりです。

<head>
  <meta charset="utf-8">
  <title>Preloading fonts</title>

  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>

<body>
</body>

上記の例では、preloadリンクは、クライアントにインストールされているかどうかに関係なく、フォントをフェッチする要求を送信し、stylesheetリンクを使用して適切にロードして使用します。

preloadは、リソースがおそらく必要であることをブラウザに伝えるためのより多くの方法です。そのため、リソースは関係なく要求され、必要な場合や使用することにした場合は可能です。

2
Angelos Chalaris