DNS prefetch Google webfonts - which domain?
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?
Answer
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