Even Faster Web Sites

Chapter 13. Using Iframes Sparingly

Iframes, also called inline frames, allow for one HTML document to be embedded inside another.^[66] Iframes are best used for integrating HTML content, such as an ad, that’s from a web site different from that serving the main page.

A benefit of using iframes for this purpose is that their document is entirely independent from the parent document. Relative URLs inside the iframe are resolved relative to the iframe’s base URI, not the parent’s. User agents can give the iframe focus for printing, bookmarking, saving, and so forth. Perhaps most important, JavaScript included in the iframe has limited access to the parent. For example, an iframe from a different domain can’t access the parent’s cookies. This is an important consideration when web developers must allow third-party content, such as ads, in their pages but they don’t have control over this content.

What’s the downside? You guessed it—slower performance. Chapter 4 describes how iframes are used to improve performance in terms of loading scripts asynchronously. It is true that iframes can make pages load faster, if used properly. Unfortunately, iframes are often used in a way that hurts performance. It’s important to know the performance penalties inflicted by iframes and how to avoid them.

The Most Expensive DOM Element

The Cost of Elements test page measures how long it takes to create different types of DOM elements.

Cost of Elements

http://stevesouders.com/efws/costofelements.php

Using this ...