Menu
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?
339
DNS-prefetch is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow.
A DNS prefetch is a resource hint to make a DNS lookup for a domain the browser has not yet determined needs to be made. This can improve performance because when the browser does need to make a request for a resource, the DNS lookup for that domain has already occurred.
The dns-prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
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
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
