Semantic-ui: CSS File Size is Too Large

[ianrtracey]

Big fan of Semantic UI so far and are actually looking to implement it for an open source project here at Cisco, but we are quickly finding the initial CSS file too large to comfortably ensure its performance across our user base. Is there anything we can do in regards to segmenting styling with the components actually being used to reduce load times?

[ns-phennessy]

You can use the build tools (gulp) to create a smaller version of the CSS with the components that you want.

By default; it outputs each specific element / collection / view / module CSS file into the dist directory.

[jlukic]

Semantic UI will continue to grow linearly with each new component added. Currently we're sitting at around fifty components which is much larger than other UI frameworks.

It's recommended to use the NPM install which will give you a choice for which components to include when installing.

Updating this after the fact is as easy as modifying a semantic.json file.

[Jeffboq]

The limitation of the current build system is that components not listed in the semantic.json file are not included in the dist directory.
It could be great to have a way to create a minimal semantic.css/semantic.js base and also having all components available in the dist/components directory.

[i8ramin]

It would also be nice to have even more control over what is included in each individual component. For example, the button component includes a lot of different button styles that one may never use. Being able to include only the styles needed would be really great. A tool like UnCSS (https://www.npmjs.com/package/gulp-uncss) could be used during the build process (specially on a statically generated site), but that is not always possible.

[BeKnowDo]

I understand everyone's concern here but this is really a non-issue.

They've already broken the library down to components: https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/components

I advise you take an hour and select which rules you need and eliminate the rest on your own.

[jlukic]

:+1:

[BillyParadise]

Sorry for commenting on this closed issue.
As an example, I was able to reduce my JS from 395912 to 224060 and my CSS from 554853 to 389632.

A suggestion (I might get to work on this myself some day), the comments at the top of each file should list the dependencies. The dimmer and transition modules, for example, seem to be required for other modules.

[edouard-lopez]

Same here, fan of the idea, but I'm having concerns about assets size. I'm doing a simple page with and yet I got ~330kb of CSS and most of it is probably useless.

Source code is available on github with semantic.json.

Filesize

The top 3rd files are 156Ko and are a really common use case.

For reference

Here are the minified CSS files by filesize:

• 68K button.min.css ;
• 55K grid.min.css ;
• 33K icon.min.css ;
• 32K transition.min.css ;
• 29K menu.min.css ;
• 23K dropdown.min.css ;
• 20K label.min.css ;
• 19K form.min.css ;
• 19K step.min.css ;
• 18K flag.min.css ;
• 18K rating.min.css ;
• 16K table.min.css ;
• 15K list.min.css ;
• 15K card.min.css ;
• 12K checkbox.min.css ;
• 11K segment.min.css ;
• 11K sidebar.min.css ;
• 9,5K statistic.min.css ;
• 8,2K input.min.css ;
• 8,2K header.min.css ;
• 7,2K progress.min.css ;
• 6,6K modal.min.css ;
• 6,6K accordion.min.css ;
• 5,9K message.min.css ;
• 5,8K item.min.css ;
• 5,7K divider.min.css ;
• 5,6K reveal.min.css ;
• 5,4K search.min.css ;
• 4,0K popup.min.css ;
• 3,7K feed.min.css ;
• 3,6K image.min.css ;
• 3,4K loader.min.css ;
• 2,7K comment.min.css ;
• 2,5K dimmer.min.css ;
• 2,5K shape.min.css ;
• 2,2K reset.min.css ;
• 2,0K ad.min.css ;
• 1,9K container.min.css ;
• 1,9K embed.min.css ;
• 1,7K site.min.css ;
• 1,5K nag.min.css ;
• 1,2K breadcrumb.min.css ;
• 1,2K rail.min.css ;
• 1,1K tab.min.css ;
• 630 sticky.min.css.

[mnquintana]

@edouard-lopez Why not just include the particular components you're using, instead of importing everything? That is, as far as I can tell, how Semantic UI is intended to be used (and how I've used it in all of my projects). You can do this even if you don't want to opt-in to the build system or have to use your own – you can just include the particular minified CSS files for each component you want that you mentioned above.

[edouard-lopez]

@mnquintana that's what I do, the semantic.json contains only what I require. I listed all files for references.

[heu]

Normally, for building a complete web application, we need a wide range of components but not component's variants. ex. for the buttons, a huge number of button variants which make the size of buttons components is unacceptable!

[bonnici]

Just wanted to say that I'm also looking for a solution to this. It might be a silly example but a 68kb CSS file for a page with just a single button is a bit ridiculous. I'm going to try to find a tool that can search for and remove any unused css selectors, but I'm guessing it will need a lot of tweaking.

[dotnetchris]

I'm with @bonnici on this. I was starting to get really interested in this project but for a true mobile first project the file size is just a deal breaker. The http://semantic-ui.com/introduction/getting-started.html page triggers over 2 dozen requests for JS & CSS files totaling nearly 2000KB. That's just astonishing compared to http://foundation.zurb.com/sites/getting-started.html (7 for 615KB) and getbootstrap.com/getting-started/ (7 for 320KB)

I know this might not be the absolute fairest comparison but it's definitely a real world usage comparison.

[stefanwille]

I have just finished my first little project with Semantic UI, which is rewriting a contact form from Bootstrap 3 to Semantic UI. The experience was very good, especially with the React components.

However, I find the size of semantic.min.css too big to tolerate: 530KB.
I have tried to reduce the file size by selecting only the components needed: button, card, container, form, grid, icon, input, label, message, reset.
Still, my stripped down semantic.min.css is 233KB. Compare this with Bootstrap 3's complete bootstrap.min.css, which is 130KB, and which includes much more components.

[Enelar]

Hm, guys, how to you think. What if i will split semantic.min.css, in components, and request on page only those which is required... it may work.
Because my website on EDGE loading more than 30 seconds. Nobody scout what beyond that line. Valley of death.

[Enelar]

@edouard-lopez how can we split button.css?

[xwiz]

You can solve this with purifycss.

[ianrtracey]

I agree that button.css needs to be slimmer. @xwiz: is there a potential downside to using purify? Would it make more sense to separate button.css to smaller components manually? I am not sure what that file looks like exactly.

[batata004]

Hi, are you guys aware of some WINDOWS tool that allows me to "build" semantic ui CSS and JS files with only the components that I want?

[horsley]

some components have dependency, such as dropdown require transition. But the gulp build instruction just allow me to choose dropdown without transition

[domenkozar]

For future me: use purgecss with parcel https://github.com/cprecioso/parcel-plugin-purgecss, got 1.2MB down to 150kB.

[lubber-de]

Normally, for building a complete web application, we need a wide range of components but not component's variants. ex. for the buttons, a huge number of button variants which make the size of buttons components is unacceptable!

Since 2.8.0, the community fork Fomantic UI offers an additional file https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/variation.variables where you can also define which variant of each single components should be build. Additionally you can also limit the colors by adjusting https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less .
In combination the CSS sizes could get drastically reduced for each component