Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

So I have a relatively big CSS file. I thought about doing the following, splitting it to 3 parts:

  • 1st part will have the main selectors that are needed to run on the main page that gets the biggest traffic.
  • 2nd part will have CSS for the rest of the pages
  • 3rd page will have all the screen size dependent set up intended for mobile devices to have responsive pages

I am running my static files off a CDN and I would put each of these parts to a separate subdomain to have them all downloaded faster than one file.

Do you think this is a good way of doing that?

EDIT: since I didn't make clear, I am using CDN service on subdomains to serve all static content, so there are 5 subdomains that I use and they all are on CDN. Each of them is used to serve a number of files: CSS, JS, JPG, PNG, etc. DNS lookups are being made anyways.

share|improve this question
add comment

4 Answers

No. This will not make your site faster and is unnecessary. Multiple HTTP calls slow down your website, not speed it up.

To make your CSS load as fast as possible:

  1. Minify it
  2. Compress it using gzip (mod_deflate)
  3. Serve it from a CDN

Once the browser has the file it will cache it and no more requests will need to be made which is as fast as it gets.

share|improve this answer
1  
To extend to John's good answer already. Sometimes it does merit to split files but only for pages that use styles that are uncommon. For example if you have a slider that contains a lot of styling then you can choose to minify that CSS file and split it but only to display it on the page with the slider... however if this slider is used on many pages then it'd make sense to minify it, and combined it. You also can take this logic and use it for the JS. So again if the slider is only on one page out of 100, load the JS only on the page that requires it. –  bybe Dec 17 '13 at 13:48
    
@john i am using all what you listed already –  CamSpy Dec 17 '13 at 14:25
add comment

Imho it is not smart to use sub-domain for some that can be done without.
Each file which has to be called makes a http request, so in your scenario 3 http request for actualy just one file...because 3 subdomains are at least 3 calls if each part is on one. I won't say it is not faster but imho not smart.

To hand a simple small code for the answer John Conde already gave, if it is about minify you could use following file. Give it a name whatever you wish as long it has the .php extension all will be fine.

The big advantage this way, it minify on the fly and will only need a refresh when you have changed some (it will detect itself when needed) and you still can add/edit the original uncrunched files.

I have 5 files which will be "collected" by the code and send 1 as output and it is minified. You maybe even want to serve if from a CDN if still needed.

<?php
/* Add your CSS files to this array */
$cssFiles = array(
"style.css",
"css/01_basic.css",
"css/02_comments.css",
"css/03_sidebar-widgets.css",
"css/04_additonal.css";
/** Ideally, you wouldn't need to change any code beyond this point. */
$buffer = "";
foreach ($cssFiles as $cssFile) {
   $buffer .= file_get_contents($cssFile);
}
// Remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Remove space after colons
$buffer = str_replace(': ', ':', $buffer);
// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// Enable GZip encoding.
ob_start("ob_gzhandler");
// Enable caching
header('Cache-Control: public');
// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/css");
// Write everything out
echo($buffer);
?>

I found the original code here On-the-fly. (it is awesome imho)

To use this in your HTML, link to it in the usual way:
<link rel="stylesheet" type="text/css" media="screen, print,projection" href="path/to/your/compressed.css.php" />

The 86400 is the expire for the file, set another time if wished.
Please don't forget to rename css-folder & css-file names.

share|improve this answer
    
the thing about using static files on subdomains is not exactly what you're thinking about, the subdomains are actually CDN, so serving static files from a server closest to the end user as the quickest way to serve content is a big deal there. I am serving much more static content, like photos, thumbnails, javascripts all use the same 5 subdomains so HTTP calls and DNS lookups are a must anyways. –  CamSpy Dec 21 '13 at 9:28
add comment

The best advice I can give is to follow Yahoo’s “best practices for speeding up websites”, particularly these:

  • It is best to concatenate (combine) the files (either with a script the sever-side, or just manually will do).

  • Use a LINK element to reference to the CSS file (as opposed to an @import rule in a STYLE element.

  • Ensure that that LINK element is as close to the top of the HEAD block as possible (this allows pages to render incrementally).

  • Oh, and using a CDN or a separate sub-domain of the same website is definitely a good option.

Also, I have read somewhere (I think it is in one of the W3C’s CSS specs) that he actual ordering of selectors makes no difference – the browser has to take them all together and basically “add up” the specifity (and therefore the actual order and precedence) of the selectors.

Hope this helps!

share|improve this answer
1  
I think you are more or less right about CSS but keep in mind that different browsers have different methods of rendering and parsing HTML, CSS, and JS. –  adam-asdf Dec 19 '13 at 3:21
add comment

I use several tools to see if something is faster or not. Initially, I use the YSlow and PageSpeed browser extensions. I also often use webpagetest.org and Pingdom.

That said, modern browsers will generally only load about 6 'resources' at a time (antiquated browsers may only download 2 at a time) from any given server. Splitting assets among different servers so they can download in parallel is called sharding but it is only useful if more assets are loaded from a server than can be downloaded simultaneously by your users.

Splitting assets among sub-domains requires additional DNS lookups (which slow your site down) and a better approach might be to use assets from commonly used CDNs (like Google's) with a local fallback, as this increases the chances of the file being in the user's cache and therefore not requiring download.

That said, the previous answers are totally correct and where you should start. Reducing the number of HTTP requests is generally the first priority related to performance and enabling GZip compression is probably the second.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.