Home ›
Styles (CSS) in HTML document head, rather than included fileStyles (CSS) in HTML document head, rather than included file
Submitted by Benjamin Melançon on August 31, 2007 - 9:42am
How to put cascading style sheet information in the head of an HTML document.
Not for web sites, which should have external style sheets.
Although on the other hand with such a push to have everything not make http requests, there are circumstances where you may want your CSS information embedded in the page.
From Yahoo's 13 rules for speeding up your web site:
Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.
Many web sites fall in the middle of these metrics. For these properties, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception I've seen where inlining is preferable is with home pages, such as Yahoo!'s front page (http://www.yahoo.com) and My Yahoo! (http://my.yahoo.com). Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.
For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.
style declaration in head
Something like this does it:
<head><style type="text/css">
p {
font-family: sans-serif;
}
</style></head>
Agaric refreshed our brains on this basic XHTML for the purpose of modifying XML from Colloquy IRC client with styles alone.
How to put cascading style sheet information in the head of an HTML document.
Not for web sites, which should have external style sheets.
Although on the other hand with such a push to have everything not make http requests, there are circumstances where you may want your CSS information embedded in the page.
From Yahoo's 13 rules for speeding up your web site:
Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.
Many web sites fall in the middle of these metrics. For these properties, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception I've seen where inlining is preferable is with home pages, such as Yahoo!'s front page (http://www.yahoo.com) and My Yahoo! (http://my.yahoo.com). Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.
For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.
style declaration in head
Something like this does it:
<head><style type="text/css">
p {
font-family: sans-serif;
}
</style></head>
Agaric refreshed our brains on this basic XHTML for the purpose of modifying XML from Colloquy IRC client with styles alone.
Comments
Post new comment