My questions / assumptions:
1: I have plugins that load js files, can I bundle them in my master js file that combines the native thematic js files to reduce load times or will this break the plugins working correctly? How does this play when a plugin or even Thematic js files gets updated? Assume this means you'd have to manually update the master file each time a new css / js files is updated, eg say superfish.js is updated?
2: Once I've bundled all the css together assume this negates the need for the @import rule. Assume I would have all Thematic files first, (reset.css, typography.css, 2-c-r-fixed.css, images.css. default.css, plugins.css, etc, etc). I created a pastbin here for anyone wondering what it might look like (yes it's a long file and that's only Thematic's native css files not my child theme or plugin css included in this master file!) Also be wary copy and pasters, the last chunk of code I think should logically include the layout you've decided for your website. In this instance I've opted for two column fixed left, replace this last chunk with your layout choice accordingly: http://pastebin.com/iakABNqT
Then finally you'd have add your custom CSS file at the end of the file to take precedence over all other styles I think? What about plugin css files? Can I include these in master CSS file to reduce load time? What happens when a plugin updates? Assume you'd have to manually update the CSS file?
3: I use W3 Total cache and a Content Delivery Network (CDN). Any other tips on reducing load times, I've heard of something called GZIP is that worth using? Any other useful tips that would be useful to anyone else wanting to speed up their website? I saw some great tips on GZIP here (caution modifying the HTACESS File can break your site) http://themeshaper.com/forums/topic/slow-site-network-solutions-blames-thematic
4: I read via Google page speed checker that removing import calls help. So, for example, instead of using
<link rel="stylesheet" href="second.css">
This enables the browser to process the stylesheets in parallel whereas if import is used the files have to be downloaded individually processed before it can move on to process the next one, increasing load time. Should we therefore hard code the reference to our CSS / JS files thus allowing them to be processed simultaneously? Eg, instead of:
<img src="<?php bloginfo('stylesheet_directory') ?>/images/cart.jpg" alt="cart"/>
We should hard code it to:
` <img src="www.yoursite.com/yourtheme/images/cart.jpg" alt="cart"/>
Is this true? Google Page Speed says "This allows the browser to download stylesheets in parallel, which results in faster page load times". Does this mean hard coding the reference to the files is as good as putting them in one file as they are able to load in parallel rather than one by one?
5: Assuming you compress all the CCS / JS in to file and minify them, how do you get rid of all those pesky calls to multiple CSS / JS files, is their a function or something that you use?
Thanks so much for your help, hopefully this well help a lot of people down the line too! :)