Once a page was created, it is easy (since we have all the information at hand) to know which file will be loaded from that HTML. For example, the HTML header may have links reference CSS files.

The fact is that a TCP connection is generally slow so if you can avoid 50% of them, especially if these are for very small files (1Kb and less) then all the better.

Inline Data can be used to avoid allthose useless TCP connections.

HTML allows for CSS data and image data to be inlined.

CSS uses the <style> tag in the HTML header. (See Style Sheet in HTML)

Image data uses the special href="data:..." URI feature. (See Data URI Scheme and RFC 2397)

Note that this is not 100% true since a CSS file or an image that is loaded separately will be cached separately. So on the second reference those files won't be reloaded using TCP. Instead the browser uses the cached version.

This being said, for CSS data and images that are dynamic (changing quite often) the cache would not do much good.

Interesting points from the Wikipedia page:

• The TCP overhead may be a good 200 bytes
• The time it takes to make a brand new TCP connection is reduced by the keepalive flag
• May solve some problems with HTTPS when some data would otherwise come from an HTTP server (i.e. a server that doesn't support SSL)
• Create self-contained pages which can be particularly useful for invoices and other such pages where people saving such pages would rather have one file they can easily share
• Create self-contained emails (so images don't appear as attachments)