5 ms·

FYI: Semantic UI has one of the largest file sizes for CSS libraries at 730 KB uncompressed, 95 KB gzipped - add in React and you'll reach 1MB in no time. http

by mcast 8y ago

FYI: Semantic UI has one of the largest file sizes for CSS libraries at 730 KB uncompressed, 95 KB gzipped - add in React and you'll reach 1MB in no time. https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee07949215ad4 https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee...

z3t4 8y ago
i guess removing unused rules on deployment would reduce the file size. But a few kb is not much today - with auto playing hd videos on Facebook et. al.
- mediumdeviation 8y ago
  There's a big difference between a video that streams in while the user watches it, and all the styles and scripts that are needed to render the page itself. If the former is too slow the user just keeps scrolling or the player switches to a lower quality stream. If the latter is too slow the user will just close the tab and move onto something else.
- reaperducer 8y ago
  And if your coding for a project that isn't full of HD videos, then what?
  - z3t4 8y ago
    With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary files such as video,images, and fonts, then JavaScript trackers and frameworks, then the CSS and further trimming the content by getting rid of unnecessary markup.
    - Xylakant 8y ago
      You're assuming roughly a 50MBit/sec connection. What about people on mobile connections or in regions where 1MBit are barely achievable? Drop them over the edge? Ignore them? Might be a valid decision for your project, but for some people, bandwidth still matters.
      - deleted 8y ago
        [deleted]
    - acdha 8y ago
      Your bandwidth numbers are … extremely optimistic … unless you're only targeting business users at large companies. Worse, that's the wrong number to care about: what impacts user-perceived performance far more is latency and that's where something render-blocking like a huge pile of CSS really matters. If you care about people on wireless connections, with less than perfect fiber connections, etc. a 500KB CSS file is going to add seconds to the total page load time and users will see it more often because the size will get it evicted from small caches more frequently. HTTP/2 won't help because the entire CSS file needs to be transferred before the page renders.
      - z3t4 8y ago
        With HTTP2 you can add files to a request, if the user requests index.htm you can also send style.css in the same response. Versus the user first requesting index.htm, parses it, then request style.css. It's a pretty new feature, and will help a little bit with latency as it can save a round-trip. Wireless connections have had bad latency, but it's getting better. 15 years ago you could get 200+ ms latency on WiFi. today we are down to around 10-20ms. 15 years ago we only had 100Mbit fiber. If you live in a city today you can get 10Gbe. Meanwhile there are people surfing using satellite up-link, or very poor GSM, so there are strong contrasts. But they probably wont bother loading any CSS (which makes semantic HTML important).
    - geezerjay 8y ago
      > With 12,000 kb/s the user will hardly notice the difference. Regular users enjoy only a fraction of those rates, particularly mobile users. I really hope FE developers in general don't target such unrealistic rates.
sdinsn 8y ago
550 KB minified* Also, it's unclear if the comparison is actually fair- some of these, like Semantic, contain a shit ton of icons.
- reaperducer 8y ago
  Users don't care about the unused icons. They care about page load time and what it does to their device.
  - appleiigs 8y ago
    This is one of reasons why icons were dropped in Bootstrap 4. For people who need icons, they are easy to add via other sources. Also, some people didn’t like the default icons and replaced them.
  - sdinsn 8y ago
    I'm saying you can scrape out all the unused icons to lessen the size, that's why it's misleading.
cyberEst1919 8y ago
use something to remove unused css in your build process. i use purgeCss for that.. https://github.com/FullHuman/purgecss https://github.com/FullHuman/purgecss so simple and yet so powerful!

by mcast 8y ago

z3t4 8y ago

i guess removing unused rules on deployment would reduce the file size. But a few kb is not much today - with auto playing hd videos on Facebook et. al.

mediumdeviation 8y ago
There's a big difference between a video that streams in while the user watches it, and all the styles and scripts that are needed to render the page itself. If the former is too slow the user just keeps scrolling or the player switches to a lower quality stream. If the latter is too slow the user will just close the tab and move onto something else.
reaperducer 8y ago
And if your coding for a project that isn't full of HD videos, then what?
- z3t4 8y ago
  With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary files such as video,images, and fonts, then JavaScript trackers and frameworks, then the CSS and further trimming the content by getting rid of unnecessary markup.
  - Xylakant 8y ago
    You're assuming roughly a 50MBit/sec connection. What about people on mobile connections or in regions where 1MBit are barely achievable? Drop them over the edge? Ignore them? Might be a valid decision for your project, but for some people, bandwidth still matters.
    - deleted 8y ago
      [deleted]
  - acdha 8y ago
    Your bandwidth numbers are … extremely optimistic … unless you're only targeting business users at large companies. Worse, that's the wrong number to care about: what impacts user-perceived performance far more is latency and that's where something render-blocking like a huge pile of CSS really matters. If you care about people on wireless connections, with less than perfect fiber connections, etc. a 500KB CSS file is going to add seconds to the total page load time and users will see it more often because the size will get it evicted from small caches more frequently. HTTP/2 won't help because the entire CSS file needs to be transferred before the page renders.
    - z3t4 8y ago
      With HTTP2 you can add files to a request, if the user requests index.htm you can also send style.css in the same response. Versus the user first requesting index.htm, parses it, then request style.css. It's a pretty new feature, and will help a little bit with latency as it can save a round-trip. Wireless connections have had bad latency, but it's getting better. 15 years ago you could get 200+ ms latency on WiFi. today we are down to around 10-20ms. 15 years ago we only had 100Mbit fiber. If you live in a city today you can get 10Gbe. Meanwhile there are people surfing using satellite up-link, or very poor GSM, so there are strong contrasts. But they probably wont bother loading any CSS (which makes semantic HTML important).
  - geezerjay 8y ago
    > With 12,000 kb/s the user will hardly notice the difference. Regular users enjoy only a fraction of those rates, particularly mobile users. I really hope FE developers in general don't target such unrealistic rates.

sdinsn 8y ago

550 KB minified* Also, it's unclear if the comparison is actually fair- some of these, like Semantic, contain a shit ton of icons.

reaperducer 8y ago
Users don't care about the unused icons. They care about page load time and what it does to their device.
- appleiigs 8y ago
  This is one of reasons why icons were dropped in Bootstrap 4. For people who need icons, they are easy to add via other sources. Also, some people didn’t like the default icons and replaced them.
- sdinsn 8y ago
  I'm saying you can scrape out all the unused icons to lessen the size, that's why it's misleading.

cyberEst1919 8y ago

use something to remove unused css in your build process. i use purgeCss for that.. https://github.com/FullHuman/purgecss https://github.com/FullHuman/purgecss so simple and yet so powerful!