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

Question

我与 SEO 顾问合作进行 SEO 优化和更快的页面加载。他说字体和一些 javascript 库应该在页面加载后到达。因此，该网站加载速度会更快，但当我在互联网上查看时，我找不到太多。我使用 React js，对 seo 改进一无所知。我在 header 组件中按如下方式调用字体。 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>
  )

Answer 1

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

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

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

Answer 2

也许你可以将它附加到 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);
}, []);

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

Load font from googleapis after page loading in react.js

javascript

reactjs

fonts

seo

page-load-time