Faster Google Fonts with Preconnect

Summary

The preconnect hint is supported by Chrome, Opera, Firefox and Android browsers

Don't forget to add the crossorigin attribute!

The Google Fonts performance problem

The CDN Planet website uses the Roboto font, powered by the free and easy to use Google Fonts.

Google Fonts is a very reliable service and network performance is generally great (the service lives on Google's global CDN).
But yet, there is one problem with Google Fonts performance: the font files start downloading late.

The waterfall chart below shows the performance problem in action:

The CSS loads first, then the font files.
This behavior is not so great for performance but quite logical: the URLs of the font files are in the CSS file, so the browser must first download and parse the CSS.

Luckily, Google always serves the fonts from the same domain, fonts.gstatic.com, and you can instruct the browser to 'preconnect' to that domain while it is loading the CSS!

The preconnect hint

The preconnect link relation type is used to indicate an origin that will be used to fetch required resources. 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.

The font-face specification requires that fonts are loaded in "anonymous mode", which is why we must provide the crossorigin attribute on the preconnect hint: the browser maintains a separate pool of sockets for this mode.

Preconnect done right!

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

Excellent!
DNS, TCP and TLS happens in parallel with the loading of the Google Fonts CSS file.
We effectively improved Google Fonts performance by reducing the load time by ~ 100 milliseconds.

About us

CDN Planet is built and operated by Aaron Peters and Sajal Kayan.
As former web performance consultants and the current co-founders of TurboBytes (Multi-CDN),
we have 6+ years experience with all things CDN, including DNS, performance monitoring and networking.