I saw a twitter conversation today making reference to performance savings based on minifying classnames, like what Google's GWT does.
I reckoned that the number of bytes saved would be negligble and thus this technique is not worth the hassle of implementing.
I should probably put that claim to the test...
http://www.bbc.co.uk/bbcone/programmes/schedules/london is the schedule for what's on BBC One today (well I do work for bbc.co.uk/programmes after all). Its HTML is 22191 bytes GZipped and it contains 275 distinct classnames over 1496 elements (see Note 1). So about half the distinct classnames and total elements that the Gmail's inbox view has.
Replacing all instances that match the regex /class="[^"]*"/ with class="" (i.e. stripping out all classnames) is a super-favourable-case scenario so this is an optimistic comparison as when minifying your classnames you'll be replacing them with a 1-3 character name, not removing them entirely. After stripping all classnames the HTML is 20130 bytes GZipped.
Saving 2061 bytes over the wire is more than i expected though this is the most favorable comparison. Replacing the classes with shorter versions shall yield a smaller saving. Just to save 2kb I still don't think it's worth it. Go delete an image or something.
Note 1: Classname and count found by running the following in the page's console:
vvar set = {}; ec = []; [].slice.apply(document.querySelectorAll('*')).forEach(function(ele) { ec.push(ele); [].slice.apply(ele.classList).forEach(function(cname){ set[cname] ? set[cname]++ : set[cname] = 1;}); }); console.log(Object.keys(set).length); console.log(ec.length)
Or smush one :)