Login/Register
DNS prefetch Google webfonts - which domain?
Asked Answered
Solved htmlcssdnswebfontsgoogle-webfonts
D

1

9

I am using some Google webfonts on my page. Using the code Google supplied, I've put

<link href='http://fonts.googleapis.com/css?family=Pirata+One' rel='stylesheet' type='text/css'>

in the <head>.
A look inside this CSS reveals that the actual font is hosted at http://themes.googleusercontent.com.

Now I want to use DNS prefetching, but what domain should I use? http://fonts.googleapis.com, http://themes.googleusercontent.com or both?

Diarthrosis answered 11/2, 2013 at 21:5 Comment(0)
R
15

Both:

Explicit prefetches

Typically the browser only scans the HTML for foreign domains. If you have resources that are outside of your HTML (a javascript request to a remote server or a CDN that hosts content that may not be present on every page of your site, for example) then you can queue up a domain name to be prefetched.

<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">

You can use as many of these as you need, but it's best if they are all immediately after the Meta Charset element (which should go right at the top of the head), so the browser can act on them ASAP.

Source: https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md#explicit-prefetches

Revanchism answered 12/2, 2013 at 5:10 Comment(2)
Super cool, thank you! But if I've understood that correctly, if the fonts appear on every page, the prefetching does not make that much sense because they get loaded anyway and are then cached. Can you confirm this? – Diarthrosis
Yes, that is correct from my understanding; the prefetching is most useful when you have non-html content on differing sites that involves page rendering. Maybe try poking around with and without your dns prefetching, to see if it significantly affects your page loading times. See: tools.pingdom.com/fpt – Revanchism

© 2022 - 2024 — McMap. All rights reserved.