Search code examples
javascriptreactjsfontsseopage-load-time

Load font from googleapis after page loading in react.js

I work with an SEO consultant for SEO optimizations and faster page loading. He said that the fonts and some javascript libraries should arrive after the page loads. Thus, the website will load faster, but when I viewed it on the internet, I could not find much. I use React js and have no idea about seo improvements so much. I call the font as follows in the header component. the header component is called other nested component regarding HeaderLayout component and the components calling HeaderLayout to access other page is called. There is any way to load these after page load ?

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>
  )
Solution

  • Maybe you could append it to the head in a useEffect?

    Example:

    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);
}, []);