I am not entirely sure if this is the right section to post this up on the forum.
Basically I have a web template I’ve created but as I’ve used a wide variate of script I wish to compress them, including both CSS and JS preferably into a single file. What is the easier was to go about web compression outside a content management system.
Nah, not really a content question, so I’ve moved it to web design.
See if this helps:
I assume you mean combine CSS and JS into respective single files since cannot combine CSS and JS into a single file.
Are there different assets delegated to separate pages or are all the assets included on every page request?
If all the assets are included on every page you could write script to crawl the page and write the css and js to a single file. Than you might be able to copy and paste that into a compressor and save to a separate file. Though for ease of maintenance it is probably best to use a helper library such as; assetic or build something similar in whatever application language you are using.
Of course, this becomes much more difficult and involved if different scripts are delegated on a page by page basis.
I just did this to my site. Just copy and paste them all into two files. One for css and one for js. Keep them in the same order they currently are called in your working page. Don’t erase any of the original files until you’ve tested that all is working.
Thanks guys for your feedback.
I thought of your method @PicnicTutorials; which would do what I want. The only issue is there would still be white spacing in the file.
It’s for a fully featured theme so it would make sense to include them on all the pages. Currently they are included on all the pages. Thanks for the link, this would prove useful in this theme. Not sure if you can have this on the WordPress installation. My original intention is to have a single CSS and a single JS file which would run all the scripts on the website. I feel if I was to run assestic it would automatically give me the minify version of each.
The only trouble is some scripts are needed before the header and other before the body, so I would be a little puzzled on wether two files would be needed to make sure everything runs as it shou;d.
Just google “css compresser” and “javascript compresser”. Google will have 100 online tools to remove the white space. This is my favorite javascript compressor http://compressorrater.thruhere.net/. I don’t bother with compressing css. The speed difference would be in the 1/1000 of mil seconds. Not worth the effort of maintaining two separate files. In order to really see a huge difference in website speed, compress and cache it via htacces. Here is how. Just did that too. http://www.visibilityinherit.com/code/yslow-&-google-page-speed-htaccess-code-how-to-speed-up-your-website.php
Doesn’t the WordPress SEO plugin aggregate asset files?
It’s more for maintanability. With CSS I can have @import and place all the CSS together, which is okay, but when it comes down to the scripts, there is nothing much I can do, unless I go down the PHP path. For the WordPress version I will keep things in different files, as they can easily fix this on the WP file. I personally use W3TC for WordPress and it does an amazing job!
I just came across this - http://headjs.com/, I will play around with this a little to see what makes of it.
Why not just use mod_deflate and make it functional on all text based files?
I have solved my issue now. With the CSS I use a single file and within this file have a dozen or so imports to the various CSS files. For the scripts I now use head.js. 