ALL ABOUT LINKS - HTML5 - page 129

PREFETCHING
A new HTML5 value for the rel attribute in the link element is prefetch . Suppose you
have a page that is a little “het y” — it's got some big content like large graphics, video, or
audio. Before users go to the page, wouldn't it be nice to preload the page (graphics and all)
so that when they click on the link, everything is ready for them? h at's what prefetching is.
While the browser is idle, prefetching gives it something to do. For example, the following
uses prefetch to load a video:

< link rel = ”prefetch” href = ”Test.mov” >

So when the user goes to the page with the video, it has already started loading — or it may be
completely loaded and ready to go. Here are some other examples:

< link rel = ”prefetch” href = ”monkeys.html” >
< link rel = ”prefetch” href = ”monsterTrucksFull.png” >
< link rel = ”prefetch” href = ”http://www.sandlight.com” >
< link rel = ”prefetch alternate stylesheet” = ”http://wherever.org/fall.css” > href
< link rel = ”prefetch” href = ”sumVa.mp4” title = ”Summer vacation” >

Before you start planning to use the prefetch value with every page that links to a “heavy”
page, remember that its value is dependent on whether users are likely to go to that page. For
example, suppose you're creating a Web site for a big department store, and users select from
several dif erent graphic displays of products. If the Web page prefetches all the graphics in
the selection matrix, it's going to add a heavy load to the user's computer. So, instead of
getting a crisp response, loading the selected page could be sluggish because it has all the
other graphics in memory that have been prefetched.

133

One way to optimize prefetch is to organize your pages so that links to a heavy page have a
path that limits pre-loading. Pages that include media that require a good deal of load time
should have a path to them that has only a few choices with heavy loads.

OTHER LINK ATTRIBUTES
Other than the rel attribute, the other link attributes include:

href : Points to external style sheets and icons.
media : Specii es the kind of media for the link — screen, PDF, print; if no value is
assigned to media, the default is “all.”
hreflang : Provides the language of a resource and is purely advisory.
type : Identii es the type of i le content, such as “text/css” — the MIME types.
sizes : Specii es the dimensions of an icon, such as 32x32, 48x48, and other sizes used
for graphic i gures used as icons.
title : Has a real value when using alternative style sheets, but otherwise it's advisory.

As you've seen in the examples using the rel attribute, these other attributes are ot en used in
conjunction with rel .