wordpress combine css/js files - javascript

I am using a bought theme for wordpress, which has multiple css and javascript (unfortunately). Something like 5-6 css files and 6-7 js files. I have tried some plugins that combine css/js files but it seems that those plugins make things worse. Actually it combines it okay, but some scripts become messy and even not working. What do you use for combining files in Wordpress? I have tried using: JS & CSS Script Optimizer.
Best, Simon

My suggestion would be to take a look at Grunt.
It is a Javascript Task runner that can be configured to do all kinds of things for you, like compiling Sass & Less, combining Javascript and CSS, minifying and so on. Depending on your experience it might take some time to get into, but in the long run it is worth it. There are a lot of great Tutorials, like this one that will get you started.
Side Note: You might already have a local Dev setup, but if not I strongly encourage you to set one up and only upload concatenated and minified files to Production, as I would not recommend running tasks like this on the live server.

Related

Could someone explain how I can combine my JS and CSS files?

I have done my research on combining JS and CSS files. I am still a novice when it comes to all of this so the explanation like some of these minifies and compilers at Github and Google don't really make sense in normal English.
I have the following CSS files:
bootstrap
bootstrap-min
bootstrap-responsive
bootstrap-responsive-min
main
prettyPhoto
These are my JS files:
bootstrap
bootstrap.min
jquery
jquery.prettyPhoto
jquery-migrate-1.2.1
theme
Which tool should I use and if someone could explain step by step that would be great.
If you want to just have one big js and cs file then you can just combine them into ones by copying and pasting the content of each file one after another, in the same order you would include them on a page. Keep in mind that you do not need bootstrap if you are including bootstrap.min file after it. It's the same file, only the one with .min in name is minified version of it. Same goes for js files.
Then if you want... you can run a tool for compression like this one:
http://refresh-sf.com/yui/
and hope everything works fine.
Though combining files is easy that not something you should do to libraries. Moreover for most cases you should not merge these files.
Libraries tend to stay unchanged for long time, thus will be eventually cached by user. Site loading time will be faster.
A good approach is to link these libraries to 3rd party CDNs (Google, JQuery, etc.). They are far better with load balancing and this will increase your page loading time. (There could be some DNS lookup overhead, though).
Larger files tend to skip the cache. So having large file can make your page significantly slower if every next page call will download the library again.
Of course for your custom script joining in single file and minimization will almost always be recommended.

Javascript mass minification and concat from a folder

Is there some simple way to minify and concatenate bunch of JS files in the same folder + folders in the folder? I only want that, nothing else.
Tried HTML5 Boilerplate ant build script. It is way too complex for this job, though it works somehow. I couldn't figure out how to skip the images optimization part, even when specifying images.default.bypass value in project.properties.
So I need some script to run from a console, so it would minify and concatenate recursively all JS files it can find.
You could use the Microsoft solution http://ajaxmin.codeplex.com/
This can minify CSS and JS. It also has the 'wildcard' option.
Sounds like a job for a Makefile. Most recent versions of make have a built-in wildcard facility like you're asking for. Go with GNU make if you don't know anything about this tool, since its very widely available and well-known.

compressing .js and .css files on push of the website

I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

Minifying JS/CSS files

I have a template that has over 20 js/css files that it references to and of course this makes for a lot of http requests. I thought about stitching them together with php using minijs.php/mini.php but the problem Im seeing is the page seems to load slower when using minijs.php/mini.php. I used YSlow and just having each one linked individually it shows 3 seconds to load, when I use the minified solution it takes 7-10 seconds to load, even when cached. Does anyone recommend a better solution or do you even recommend combining them all together dynamically like this?
Yes, I do recommend combining the files and minifying them, ideally using either YUI Compressor, Google Closure Compiler, or, what jQuery recently switched to, UglifyJS.
As for a bit of how and why, read this and search Google for "why should I combine web site assets?".
Also bear in mind that this should be a preprocessing step, or at the very least something that is rendered once and cached and thereafter served by a static file server (Apache or Nginx, php should not be involved).
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime. I have created it during a project and it helped me a lot.
Hope it may help!
you can use many online tools which have features for compressing and combining multiple files.
for javascript compression you can use jsCompressor
and for css you can use CSS compressor CSSCompressor

How to update HTML script and link references when combining JavaScript and CSS files?

Multiple sites reference combining JavaScript and CSS files to improve web page performance, including examples of using ANT build scripts to concatenate the files prior to deployment.
I've search, and haven't found any information how to automate updating references to those files in HTML and other documents. I am looking to avoid hacking together something error prone, and want to learn from others who have automated builds in the past.
Are there automated tools in the wild to complete this task that I'm not seeing? Are there recommended processes to update the script and link tags in HTML? Can these solutions be integrated with ANT or similar build tools?
There sure is and it's a smart thing to do.
I found a PHP solution, don't know it that's okay for you, but if it isn't you can still read it's source (it's not difficult) and learn a lot. The solution works like this:
Rewrite your requests like this: from css/main.css and css/skin.css to css/main.css,skin.css (of course you can put many more).
Use apache's mod_rewrite to redirect this request to a script (in our case combine.php), that will combine all files to a single one.
The script combines all the files and sends the combined file. Then it saves it to a cache folder.
Next time around it checks if there is an up-to-date version of the cache and serves that one. If the latest file modification time has changed, it discards the cache.
The solution works great and it even makes use of HTTP cache headers and spits out an [ETags], which you should do anyway.
You are correct this is a great way to speed up page loading. It will even work in conjunction with a CDN, which the other poster recommended.
Here is a small script that will pack multiple files in to one for deployment. It supports both JS and CSS, and will even "minify" them by removing whitespace, etc. Just hook this in to your build and deploy scripts.
juicer: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
What even better, it will follow JS and CSS import statements, so you only need to point your HTML files to the loader file and it will work in both development and production. (Assuming you replace the loader file with the combined file on deployment.)
There are others, including some run-time solutions. But it sounds like you have a build process in place anyway.
As far as HTML updating, if you still need it, since automated deployments are very popular in the Ruby world, and you may find some standalone utilities to help even for non-ruby projects. (As above) Methinks this would be best handled by your own project's template language, though. (With a static resource revision id, or such.)
Good luck, and let us know what you find.
I think what you really want is a CDN Content Delivery Network.
Read about it here
http://developer.yahoo.com/performance/rules.html
http://en.wikipedia.org/wiki/Content_delivery_network

Categories