Should you use preconnect with stylesheets?

user_16541258 0
Viewed 518

When you want to include a font from Google Fonts it suggests you do it like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

The preconnect to fonts.gstatic.com makes sense since the browser will otherwise only find out about that domain after it has downloaded the stylesheet. But what's the point of the preconnect to fonts.googleapis.com when the link to the stylesheet is right after it? Won't the browser process both of those at the same time?

pagespeed css html
1 Answers

Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection. Preconnect is supported by most browsers and improves Google Fonts performance.

You can have a look to the full article https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/#:~:text=The%20preconnect%20hint,-Preconnect%20is%20one&text=Initiating%20an%20early%20connection%2C%20which,and%20improves%20Google%20Fonts%20performance.

user_151656770
Related