Comment on Stallion Responsive WordPress SEO Theme by SEO Dave.
As the browser loads your webpage it’s trying to rendering the content as it ‘reads’ the files from top to bottom.
The CSS files are ordered layout/fonts/colour/mobile rules (4 CSS files).
Having the 4 files is how we can have so many layout/font/colour variations in one theme, it’s over 12,000 combinations. If I wanted to limit Stallion to one CSS file to achieve the same layout/font/colour combinations would mean there would literally be over 12,000 CSS files instead of under 100 CSS files where 4 are used at any one time!!!
So your browser will load the layout rules before everything else, if there’s a connection delay with either your server and/or your internet connection you can have a small delay between the other files loading which means the colour rules etc… aren’t available.
It’s the same as you see with images loading, some load faster than others.
As you’ve discovered my site runs the W3 Total Cache Plugin which is a highly recommended SEO plugin.
W3 Total Cache includes minification for CSS files, this combines multiple CSS files into one file and minifies them (one small file) which means when the CSS rules are loaded they are all loaded at once.
Under the W3 Total Cache Performance > General Settings
Find the Minify settings, my settings are:
Under Performance > Minify
Find the CSS options there’s 4 tick boxes, my settings are:
Combine only (not ticked)
Preserved comment removal (not applied when combine only is active) (not ticked)
Line break removal (not applied when combine only is active) (ticked)
This will combine the 4 CSS files into one and remove all blank spaces etc… (puts all the rules on one line, makes it as small as possible).
I’ve considered adding this option to Stallion, but W3 Total Cache does it so well it would be reinventing the wheel for no gain.
I recommended everyone who uses Stallion Responsive to use W3 Total Cache as well.