prefetching with html5

Web designers and developers are always striving to make their websites faster and there are a few cool techniques you can use to preload or prefetch items whilst viewing a website to increase the speed as you browse the site. Prefetching DNS If you aren’t familiar with dns this is the system in place that directs domain names to servers. All servers have an ip address and your domain points to an ip address. DNS keeps track of what ip address a domain points to before retrieving whatever it is. When anything is loaded on a website your browser will actually take the domain name for example google.com and it will then do a dns lookup to find where this actually points to. In html you can add in a meta tag that will actually prefetch the dns for a certain domain allowing you to speed up a follow on page that may make a call to that domain name. You can do this like so

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

This will prefetch the dns for http://ajax.googleapis.com allowing this dns lookup to be skipped in subsequent calls to the url speeding up the loading of a page. Content Prefetching The next step up is content prefetching, this allows you to preload an entire page or element before it is actually needed. For example this will preload my blog post on html5 reversed ordered lists so that if you were to visit that page it would load considerably faster having it load from the cache instead.

<link rel="prefetch" href="http://davidejones.com/blog/1151-html5-reversed-ordered-lists/" />

You can also load individual elements like images or stylesheets using the same syntax

<link rel="prefetch" href="/wp-content/themes/davidejones/img/logo.png" />
<link rel="prefetch" href="http://davidejones.com/style.css" />