Appearance
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-25.
Component | gzip | minified | % CSS | Import |
---|---|---|---|---|
All | 70.9kb | 448.5kb | 65% CSS | @material/web/all.js |
Common | 52.5kb | 282.6kb | 53% CSS | @material/web/common.js |
Button | 8.1kb | 46.9kb | 66% CSS | |
6.7kb | 27.7kb | 49% CSS | @material/web/button/elevated-button.js | |
6.7kb | 27.5kb | 49% CSS | @material/web/button/filled-button.js | |
6.7kb | 28.0kb | 49% CSS | @material/web/button/filled-tonal-button.js | |
6.4kb | 26.0kb | 48% CSS | @material/web/button/outlined-button.js | |
6.2kb | 24.5kb | 45% CSS | @material/web/button/text-button.js | |
Checkbox | 6.8kb | 26.5kb | 38% CSS | @material/web/checkbox/checkbox.js |
Chips | 10.1kb | 60.7kb | 64% CSS | |
4.8kb | 16.5kb | 22% CSS | @material/web/chips/chip-set.js | |
6.3kb | 27.0kb | 51% CSS | @material/web/chips/assist-chip.js | |
7.9kb | 37.0kb | 55% CSS | @material/web/chips/filter-chip.js | |
7.4kb | 33.8kb | 54% CSS | @material/web/chips/input-chip.js | |
6.4kb | 27.4kb | 51% CSS | @material/web/chips/suggestion-chip.js | |
Dialog | 4.7kb | 16.2kb | 29% CSS | @material/web/dialog/dialog.js |
Divider | 0.6kb | 1.3kb | 34% CSS | @material/web/divider/divider.js |
Elevation | 0.6kb | 1.7kb | 62% CSS | @material/web/elevation/elevation.js |
Fab | 7.0kb | 37.8kb | 67% CSS | |
6.6kb | 33.2kb | 64% CSS | @material/web/fab/fab.js | |
5.8kb | 24.9kb | 52% CSS | @material/web/fab/branded-fab.js | |
Field | 6.0kb | 40.6kb | 82% CSS | |
4.6kb | 24.9kb | 74% CSS | @material/web/field/filled-field.js | |
5.0kb | 27.1kb | 76% CSS | @material/web/field/outlined-field.js | |
Focus | 1.5kb | 5.4kb | 49% CSS | @material/web/focus/md-focus-ring.js |
Icon | 0.7kb | 1.3kb | 47% CSS | @material/web/icon/icon.js |
Icon button | 7.3kb | 42.5kb | 65% CSS | |
5.8kb | 23.2kb | 41% CSS | @material/web/iconbutton/icon-button.js | |
6.0kb | 25.2kb | 45% CSS | @material/web/iconbutton/filled-icon-button.js | |
6.0kb | 25.8kb | 47% CSS | @material/web/iconbutton/filled-tonal-icon-button.js | |
6.0kb | 24.8kb | 45% CSS | @material/web/iconbutton/outlined-icon-button.js | |
List | 7.0kb | 27.5kb | 34% CSS | |
1.6kb | 4.7kb | 4% CSS | @material/web/list/list.js | |
5.8kb | 23.1kb | 40% CSS | @material/web/list/list-item.js | |
Menu | 13.6kb | 54.7kb | 22% CSS | |
8.0kb | 29.7kb | 17% CSS | @material/web/menu/menu.js | |
6.5kb | 25.8kb | 37% CSS | @material/web/menu/menu-item.js | |
8.5kb | 32.7kb | 11% CSS | @material/web/menu/sub-menu.js | |
Progress | 3.5kb | 13.8kb | 69% CSS | |
2.6kb | 8.6kb | 63% CSS | @material/web/progress/linear-progress.js | |
2.2kb | 7.3kb | 57% CSS | @material/web/progress/circular-progress.js | |
Radio | 6.7kb | 24.7kb | 28% CSS | @material/web/radio/radio.js |
Ripple | 2.7kb | 7.8kb | 13% CSS | @material/web/ripple/ripple.js |
Select | 26.1kb | 144.8kb | 57% CSS | |
18.4kb | 91.6kb | 47% CSS | @material/web/select/filled-select.js | |
18.6kb | 92.1kb | 47% CSS | @material/web/select/outlined-select.js | |
6.6kb | 26.8kb | 36% CSS | @material/web/select/select-option.js | |
Slider | 9.6kb | 42.4kb | 45% CSS | @material/web/slider/slider.js |
Switch | 7.7kb | 32.6kb | 46% CSS | @material/web/switch/switch.js |
Tabs | 7.8kb | 35.4kb | 50% CSS | |
6.2kb | 22.1kb | 25% CSS | @material/web/tabs/tabs.js | |
6.2kb | 25.8kb | 48% CSS | @material/web/tabs/primary-tab.js | |
6.1kb | 25.3kb | 48% CSS | @material/web/tabs/secondary-tab.js | |
Text field | 14.1kb | 94.1kb | 73% CSS | |
11.0kb | 61.9kb | 61% CSS | @material/web/textfield/filled-text-field.js | |
11.2kb | 62.3kb | 61% CSS | @material/web/textfield/outlined-text-field.js |