As web pages become richer and more complex, they can also become burdened with numerous CSS files, background images, icons, and scripts which put additional load on your network and degrade the user experience of your website. Fortunately, there are a few things you can do to improve things.

First, its become common practice for many pages to have at least three stylesheets; one for all media, one for screen-specific instructions, and another for print. Other stylesheets might be imported for specific pages or resources, such as a lightbox library or HTML form suite. Instead of putting each stylesheet existing in a separate file which must be loaded and parsed separately, consider consolidating them as much as possible by using @media directives within the CSS file. For example,


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// combined.css
// these styles apply everywhere, all the time

body { color: black; }
h1 { font-size: 150%; font-weight: bold; }

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// these styles only apply on-screen

@media screen {
body { background: url('background.jpg'); }
div.nav a:hover { font-weight: bold; }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// these styles only apply in-print

@media print {
div.nav { display: none; }
p { text-align: justify; }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Placing all your stylesheets in the <head> section of your web page is best practice, and also improves apparent performance since the web browser can load and parse the style information before it begins rendering the page body. Associating stylesheets via <link> tags instead of @import is better, since not all browsers handle @import directives promptly.

Also consider using Expires headers to instruct web clients to cache CSS files for a long time. In apache, this is easily achieved through the mod_expires instructions,


ExpiresActive On
ExpiresByType text/css "access plus 1 year"

If you need to retain the ability to change your CSS files more frequently, add a version number to the filename and update it as necessary. For example, combined-1.0.css