你应该对样式表使用预连接吗？

Question

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?

Answer 1

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 .