文章/答案/技术大牛

发布

社区首页 >问答首页 >在react.js中加载页面后从googleapis加载字体

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

Stack Overflow用户

提问于 2021-04-01 20:57:05

回答 2查看 170关注 0票数 0

我与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>
  )

javascript

reactjs

fonts

seo

page-load-time

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-04-01 22:49:55

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

票数 1

Stack Overflow用户

发布于 2021-04-01 21:08:18

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

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66904966

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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