Linked CSS & JS files, ..beyond "Minify"

Ideas
#1

Is there an easy way to determine what CSS and JS is actually being used by a website from within BSS? Is there an easy way to delete or remove the unused CSS & JS from those files so that we can be serving up a super lightweight file version that is just the CSS & JS that the website needs? Can this be automated by BSS so that targeted lightweight files can be produced? For example, I'd like to know how much of the bootstrap.css and bootstrap.js I am actually using, there is also jquery and validator and other files that are needed. There get to be a lot of demand, which wastes bandwidth, time and energy.

Please forgive me if I have misunderstood something, as I am new to BSS

#2

There is no option within BSS as it will always export with the default bootstrap css and js files plus any additional css or js files users add to their designs.

The only way to cut what you don't use is to tweak your css and js after exporting and manually remove yourself as you would have full control over what you upload to your server then.

And to find out what you don't need would require you to do a review of your code and work out what's not used which will be time consuming I think

#3

There is also the factor of editing the sites. If you do that, you will have to do that every time you edit them (if you plan to continue to edit the site(s) in BSS that is), which is even worse time consuming.

There is also another factor to consider. If you strip a lot of the default BS CSS, you may break your ability to add something later that you don't have on the site now, because you won't know what code was missing for it.

For your own added classes and ID's it's not hard to clean those up if you use a good text editor that can search all pages of your site for a class or id to see if it's used. Just be doubly sure that it's not a class used in JS as it can sometimes not be clear where the class is being pulled from when you look at the HTML. Only remove the classes you are very sure are for CSS styling. If it's not called for at all, that's pretty obvious if the class is one of your own added ones.

Other than that a good text editor should find them all. You can then remove them in BSS itself rather than from the files that are exported, or you can delete them from your custom CSS files and then reexport them into BSS. Keep a copy of the originals though so you can find something in case you remove something you shouldn't have. :P

#4

Bootstrap Studio doesn't have such functionality at the moment, but there are tools that can do this for you automatically. I have seen this tool before, but haven't used it myself. Removing unused CSS will mean that you can't use the CDN version of Bootstrap, which might turn out to be worse for performance.

#5

Chris, Jo and Martin these are all good points to be considered. If I keep an original copy of the website with the full CDN's and custom code intact. Then copy the website to an "lite" version, export it and then make the changes using text editor searching and making note of everything done,(removed etc) for the next time it has to be done (so it's not so time consuming), that might work reasonably well. Loss of the CDN is probably counterproductive as Martin points out, and I have tried my own version of bootstrap.min css and js and it is certainly slower on my website even with compression on and caching. If there is a possibility of removing enough code to pack it all in one file, that might help.

Purify CSS, JS etc looks very interesting. I will try it after inspecting the files and understanding the process.... Thank you Martin. "### Potential reduction * Bootstrap file: ~140k * App using ~40% of selectors. * Minified: ~117k * Purified + Minified: ~35k "

Reduction to 35k is not bad at all!

#6

I can't say I've ever seen anyone so intent in wheedling down every single file for speed as you, but ... since you do it that way, I would also like to add that if you edit anything else in BSS you will have to keep track of every single class you edit, add, remove etc. in order to make sure that the right things are removed and edited in the files afterwards. You're asking for a whole lot of work that isn't really going to hurt much if it's left there. I don't know many people that go beyond minimizing the basics, if you have a bunch of CSS files that only have a small amount of CSS in them, combining them isn't bad, but as far as removing all the default Bootstrap that isn't being used, I don't know anyone that bothers to do that.

Don't get me wrong, I'm sure it will save a fraction of a second or 2, but is all that work really worth the small amount of advantage you will get beyond minifying? If you minify your files, that's really going to give you the best options without all that excess work that doesn't really hurt the site much in the end. Up to you of course, but it's almost like an obsession with you lol. Combine the basics (not any default files), then minify them and really that's all you should "need" to do. :)

#7

Jo, I understand your point, and do wonder if optimizing in this way is worthwhile, it is an idea, but I have noticed that small things make a real difference in speed.

Our single page has several parts including, availcalendar tab, a contactform (php) / recaptcha tab. The website when completed had 5 CSS + 7 JS files, which result in a slower load time.

CSS BEFORE cdnjs ... bootstrap.min.css 142kb cdnjs ...bootstrap.theme.min.css 23kb (we don't use it) cdnjs...lightbox plus a number of other files that availcalendar, contactform (php) and recaptcha require styles.min.css 5kb

CSS NOW cdnjs ... bootstrap.min.css 142kb styles.min+.css 8kb (also contains lightbox, availcalendar, contactforms and bootstrap.validator)

JS BEFORE cdnjs...bootstrap.min.js 37kb script.min.js 3kb lightbox plus total of about 5 more js scripts for availcalendar, contactforms.

JS NOW cdnjs ... bootstrap.min.js 37kb script+.min.js 119kb (also contains lighbox, availcalendar, contactforms and bootstrap.validator etc) recaptcha and availcalendar still download several files separately because I don't have access to do that.

Perhaps you are right that messing with Bootstrap files might be too much work and I've completed the optimization that is reasonably possible. I guess if I could successfully delay the photos that are not used in the first render, that might help more with page speed, but the javascript I've tried does not work well.

Now I am realizing that a website utilizing multiple or separate pages inherently reduces page load time because the first page is the first page (and contains nothing else behind it - as opposed to the the TAB structure). So this is a good reason to change the format to separate pages. The other advantage of separate pages is that bots will pick up each separate page and catalog it for some real SEO advantages.

Utilizing separate pages, would also reduce the number of CSS and JS files that have to be downloaded because they would only be what is needed for the first page, not all the TABS.

#8

It's too late, but I recently started using it and wanted to remove the default bootstrap.min.css so that I can load my custom CSS file (SCSS). I had some issues with the media queries, I just wanted to completely remove the default media queries and write my own. so, in this case, overriding doesn't help.

I used jQuery to find the CSS file using attribute and replaced with "#". It worked and serves my purpose.