Sizes

This doc tracks important size metrics for Material Web Components.

Sizes are tracked in bundles. A bundle is a single .js file for one or more components that includes all of the JavaScript and CSS needed, minus external dependencies. We track three metrics:

  • gzip - minified and compressed. This impacts download size, which can take longer over slow networks.

  • minified - minified and unpacked. This impacts the time it takes a page to be interactive, which can take longer on some devices.

  • % CSS - the amount of CSS compared to JavaScript. The bundle includes both JS and CSS, so this helps track changes to JS logic and CSS styles separately.

Last updated 2024-06-20.

Componentgzipminified% CSSImport
All70.9kb448.5kb65% CSS@material/web/all.js
Common52.5kb282.6kb53% CSS@material/web/common.js
Button8.1kb46.9kb66% CSS
6.7kb27.7kb49% CSS@material/web/button/elevated-button.js
6.7kb27.5kb49% CSS@material/web/button/filled-button.js
6.7kb28.0kb49% CSS@material/web/button/filled-tonal-button.js
6.4kb26.0kb48% CSS@material/web/button/outlined-button.js
6.2kb24.5kb45% CSS@material/web/button/text-button.js
Checkbox6.8kb26.5kb38% CSS@material/web/checkbox/checkbox.js
Chips10.1kb60.7kb64% CSS
4.8kb16.5kb22% CSS@material/web/chips/chip-set.js
6.3kb27.0kb51% CSS@material/web/chips/assist-chip.js
7.9kb37.0kb55% CSS@material/web/chips/filter-chip.js
7.4kb33.8kb54% CSS@material/web/chips/input-chip.js
6.4kb27.4kb51% CSS@material/web/chips/suggestion-chip.js
Dialog4.7kb16.2kb29% CSS@material/web/dialog/dialog.js
Divider0.6kb1.3kb34% CSS@material/web/divider/divider.js
Elevation0.6kb1.7kb62% CSS@material/web/elevation/elevation.js
Fab7.0kb37.8kb67% CSS
6.6kb33.2kb64% CSS@material/web/fab/fab.js
5.8kb24.9kb52% CSS@material/web/fab/branded-fab.js
Field6.0kb40.6kb82% CSS
4.6kb24.9kb74% CSS@material/web/field/filled-field.js
5.0kb27.1kb76% CSS@material/web/field/outlined-field.js
Focus1.5kb5.4kb49% CSS@material/web/focus/md-focus-ring.js
Icon0.7kb1.3kb47% CSS@material/web/icon/icon.js
Icon button7.3kb42.5kb65% CSS
5.8kb23.2kb41% CSS@material/web/iconbutton/icon-button.js
6.0kb25.2kb45% CSS@material/web/iconbutton/filled-icon-button.js
6.0kb25.8kb47% CSS@material/web/iconbutton/filled-tonal-icon-button.js
6.0kb24.8kb45% CSS@material/web/iconbutton/outlined-icon-button.js
List7.0kb27.5kb34% CSS
1.6kb4.7kb4% CSS@material/web/list/list.js
5.8kb23.1kb40% CSS@material/web/list/list-item.js
Menu13.6kb54.7kb22% CSS
8.0kb29.7kb17% CSS@material/web/menu/menu.js
6.5kb25.8kb37% CSS@material/web/menu/menu-item.js
8.5kb32.7kb11% CSS@material/web/menu/sub-menu.js
Progress3.5kb13.8kb69% CSS
2.6kb8.6kb63% CSS@material/web/progress/linear-progress.js
2.2kb7.3kb57% CSS@material/web/progress/circular-progress.js
Radio6.7kb24.7kb28% CSS@material/web/radio/radio.js
Ripple2.7kb7.8kb13% CSS@material/web/ripple/ripple.js
Select26.1kb144.8kb57% CSS
18.4kb91.6kb47% CSS@material/web/select/filled-select.js
18.6kb92.1kb47% CSS@material/web/select/outlined-select.js
6.6kb26.8kb36% CSS@material/web/select/select-option.js
Slider9.6kb42.4kb45% CSS@material/web/slider/slider.js
Switch7.7kb32.6kb46% CSS@material/web/switch/switch.js
Tabs7.8kb35.4kb50% CSS
6.2kb22.1kb25% CSS@material/web/tabs/tabs.js
6.2kb25.8kb48% CSS@material/web/tabs/primary-tab.js
6.1kb25.3kb48% CSS@material/web/tabs/secondary-tab.js
Text field14.1kb94.1kb73% CSS
11.0kb61.9kb61% CSS@material/web/textfield/filled-text-field.js
11.2kb62.3kb61% CSS@material/web/textfield/outlined-text-field.js
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field