HN Explorer

Ask HN: How to avoid JS/CSS bloat?

4 points by sfilipov ↗ HN
In the thread today about the size of Doom compared to a modern webpage [1], it was mentioned a number of times that including jQuery, Bootstrap, etc. even for the smallest of websites one of the reasons why downloading and rendering modern webpages is so slow.

I could not find an acceptable solution. It was mentioned that pointing to a CDN increases the chances that the resource is cached, but that is not always the case.

What is the alternative? Using smaller libraries? Not using libraries? Are Zepto and Skeleton good enough for small websites? What are other libraries/frameworks of similar size that you have used and liked? Are we at a point where using vanilla JS and CSS is good enough?

[1] https://news.ycombinator.com/item?id=11548816

5 comments

[ 0.85 ms ] story [ 19.8 ms ] thread
namuol
The problem has less to do with the frameworks chosen by the main website's developers, but rather the countless third party services which are mandated by marketing/business realities.

Think Facebook pixel, google analytics (et al), Optimizely, Mixpanel, various "widgets", etc...

In other words: you probably don't really have this problem unless you're working with a large team and for profit.

Easiest way to win these battles is to show real-life "Before"/"After" examples of your site with and without bloaty services to whomever is advocating for their importance.

sfilipov
Does that mean that for small personal projects, it is acceptable to include jQuery 2 and Bootstrap everywhere, even if custom JS and CSS are a total of 100 lines of code?

AJAX using jQuery is so convenient. I would rather not write these in vanilla JS.

smt88
This might help with some of the bloat: https://segment.com/
namuol
Unfortunately, most of segment's supported integrations still require the JS lib to be loaded on the client. This is less a limitation of Segment and more a limitation of the aforementioned integrations.
tedmiston
^ This comment covered everything exactly.

If you are concerned of the size of your personal or smaller site, run it against a popular performance testing tool.

The three that I use regularly are: (1) Yellow Lab Tools, (2) Google PageSpeed, and (3) WebPagetest.

Here's how my small personal site (https://www.tedmiston.com) performs on each. I use jQuery 2 and not Bootstrap but Pure, though I am currently migrating to Bootstrap 4.

https://developers.google.com/speed/pagespeed/insights/?url=...

http://yellowlab.tools/result/edfg8pjjkt

http://www.webpagetest.org/result/160403_JS_GX7/