在 react.js 中加载页面后从 googleapis 加载字体

如何解决在 react.js 中加载页面后从 googleapis 加载字体

我与 SEO 顾问合作进行 SEO 优化和加快页面加载。他说字体和一些 javascript 库应该在页面加载后到达。因此，该网站的加载速度会更快，但是当我在互联网上查看它时，我找不到太多内容。我使用 React js 并且对 SEO 改进一无所知。我在标题组件中按如下方式调用字体。 Header 组件被称为 HeaderLayout 组件的其他嵌套组件，调用 HeaderLayout 访问其他页面的组件被调用。有没有办法在页面加载后加载这些？

return (
    <Head>      
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z"
        crossOrigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap"
      />

      <link
        rel="icon"
        type="image/x-icon"
        sizes="32x32"
        href="/icons/favico.ico"
      />
      <link rel="canonical" href={routerUrlWithoutQuery} />
      <Meta name="color-scheme" content="light" />
    </Head>
  )

解决方法

只需在 <link> 中为媒体属性设置一个无效值，然后在页面加载时将其设置为 all，如下所示：

<link rel="stylesheet" href="link here" media="none" onload="if(media!='all')media='all'">

当媒体查询的计算结果为 false 时，浏览器仍会下载样式表，但不会等待内容可用后再呈现页面。

也许你可以在 useEffect 中将它附加到头部？

示例：

useEffect(() => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href =
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
  link.integrity =
    "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z";
  link.crossOrigin = "anonymous";
  document.head.appendChild(link);
},[]);