I would think that .js and .css are different mime types and would not work as a single file. You could make all the js one file. However if this is to make your site run faster you are actually better leaving them as separate files that load from different servers as these will run concurrently / take place at the same time. Say 4 files at 1k from different server/hosts should load quicker than a 3k file. This is theoretical of course it would need the host servers to serve at exactly the same speed.
Have you tried something like httpfox for firefox it will show you a report with load times for every file?
Was yslow pointing out that 15 is alot. Do you need all those js librarys? It’s easy to end up with a couple of links to different versions of the same thing might be worth a look?
Im sorry, I was talking about putting all the js into one file and all the css into one. Im trying to make fewer request. Im at 61 right now.thats too many.I havent tried httpfox yet. I have cloudflare and it has help but still not the speed Im content with.
That’s a lot! If this is your js hosted on a CDN then could you use a minifying tool? Adding them in to one file should be just a case of copying and pasting or am I missing the point?
httpfox will show you any files that are taking a long time to load. Might be worth a look.
Well I just signed up so it take i guess 24 hours to get into the system. on my smartphone, it still load slow. Do you have any suggestion to make fewer request? in yslow, i have an F in make fewer request, put javascript at the bottom, and adding expire header. Im using w3tc too. Out of the 3, which one is the most important?
The fastest and most straightforward way of merging them (without hand-coding, testing and so forth) is to use a minification plugin. These not only strip out unneeded characters and comments from the files, they also combine them into a single file for you.
I’ve used wp-minify with good success, and it is fairly easy to use. It is also lightweight. You’ll notice your site speed up almost instantly. http://wordpress.org/extend/plugins/wp-minify/
Another good plugin that will handle this for you is W3 Total Cache. This is a larger, more comprehensive performance enhancement plugin. Minification is only one of its modules. Using W3 to minify gives you more options and you can do things like control the order of the files to resolves conflicts. This is a complex plugin and there is a learning curve to set it up, but it is generally worth the effort.
http://wordpress.org/extend/plugins/w3-total-cache/
In both cases, you may experience broken parts of your site after you activate. This is because of combining javascripts can break things (scripts get out of order and conflicts occur). Both plugins allow you to leave files out of the minification process, W3 is more powerful in this regard in that you can not only set the order of the files, but also where in the source code they are loaded. WP-minify only allows you to exclude the files from minification, but it is far easier to use.
What you are undertaking is a fairly common but sometimes time-consuming process to get right. The biggest issue is understanding how to resolve conflicts.
Thanks Prometheus Fire,
Im using w3tc but It seem every time I put certain codes at the bottm, they slow something up. even after I put some javascript at the bottom, they still show up in yslow needing to be addressed. I have used minify in w3tc and put the css in the section and still say I have 16 external css. What could be the problem?
I just added minify plugin and my page went blank
Be sure you aren’t combinining the efforts of two plugins. If you are using wp-minify, ensure that you have the minify section of w3 turned off.
In using, wp-minify, first view the source code without any minification. Make a note, in order of all the css and js files in the source code (I just copied the links into a text file). Then copy those lists into the exclude section of the minify settings (while the plugin is active, it will then exclude all your files). Then go through a few at a time removing files from the exclusion list. This is how you resolve file conflicts.
The reason your site went blank is probably because the css files didn’t load as a result of conflict. Remember, don’t panic. The steps above will help you learn which files to properly exclude from minification/combination. In a perfect scenario all your css and js files will be nicely minified and combined into one file. I’ve found that it isn’t always possible. I’ve had no luck all in adding external scripts, so I can’t help you with that. These plugins will help you minimize the number of scripts and css files you are loading, but I’ve not entirely been able to bring it all the way down – there are just too many conflicts that happen.
That is something I can’t help you with and goes beyond what I know. It has occurred to me to combine them, but if you look at the file names, you’ll see that they are already minified and served via cdn. If cloudflare chose not to combine them, knowing they would add to the script count, I assume they had a pretty good reason to keep them separate.
