How to prevent render blocking Google Materials link tag in head | Next.js | Page 1

Hi @long badge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To prevent render-blocking for Google Fonts, you can use the rel="preconnect" attribute in the <link> tag. This initiates an early connection to the origin, which can improve performance. Here's an example of how to do this in your pages/_document.js file:

<link rel="preconnect" href="<https://fonts.gstatic.com"> />

Additionally, Next.js automatically adds <link rel="preconnect" /> after version 12.0.1.

As a fallback for browsers that don't support preconnect, you can use a separate link with dns-prefetch, although this is not required.

#How to prevent render blocking Google Materials link tag in head

For more information, you can refer to the Next.js documentation on Google Font Preconnect (https://nextjs.org/docs/messages/google-font-preconnect).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: