: Splitting big CSS file into parts for quicker loading 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

@Hamaas447

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.

Vote Up Vote Down

@Welton855

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("rn", "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.

Vote Up Vote Down

@Shakeerah822

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!

Vote Up Vote Down

@Kristi941

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:


Minify it
Compress it using gzip (mod_deflate)
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.

Vote Up Vote Down