Ask HN: How to avoid JS/CSS bloat?

4 pointssfilipov9y ago5 comments

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

namuol9y ago

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.

tedmiston9y ago

^ 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/

sfilipovOP9y ago

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.

smt889y ago

This might help with some of the bloat: https://segment.com/

namuol9y ago

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.

j / k navigate · click thread line to collapse

Ask HN: How to avoid JS/CSS bloat?

4 pointssfilipov9y ago5 comments

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.

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

5 comments

namuol9y ago

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.

tedmiston9y ago

^ 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/

sfilipovOP9y ago

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.

smt889y ago

This might help with some of the bloat: https://segment.com/

namuol9y ago

j / k navigate · click thread line to collapse