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-11-04.
| Component | gzip | minified | % CSS | Import |
|---|---|---|---|---|
| All | 71.9kb | 454.8kb | 64% CSS | @material/web/all.js |
| Common | 53.4kb | 287.0kb | 52% CSS | @material/web/common.js |
| Button | 8.4kb | 48.4kb | 65% CSS | |
| 7.0kb | 29.0kb | 47% CSS | @material/web/button/elevated-button.js |
|
| 7.0kb | 28.9kb | 47% CSS | @material/web/button/filled-button.js |
|
| 7.0kb | 29.3kb | 48% CSS | @material/web/button/filled-tonal-button.js |
|
| 6.8kb | 27.4kb | 46% CSS | @material/web/button/outlined-button.js |
|
| 6.6kb | 25.8kb | 43% CSS | @material/web/button/text-button.js |
|
| Checkbox | 7.0kb | 27.4kb | 36% CSS | @material/web/checkbox/checkbox.js |
| Chips | 10.5kb | 62.7kb | 62% CSS | |
| 5.2kb | 17.8kb | 20% CSS | @material/web/chips/chip-set.js |
|
| 6.8kb | 28.6kb | 49% CSS | @material/web/chips/assist-chip.js |
|
| 8.4kb | 38.8kb | 53% CSS | @material/web/chips/filter-chip.js |
|
| 7.8kb | 35.6kb | 51% CSS | @material/web/chips/input-chip.js |
|
| 6.9kb | 29.0kb | 49% CSS | @material/web/chips/suggestion-chip.js |
|
| Dialog | 5.0kb | 17.1kb | 27% 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.3kb | 38.7kb | 66% CSS | |
| 6.9kb | 34.2kb | 62% CSS | @material/web/fab/fab.js |
|
| 6.2kb | 25.9kb | 50% CSS | @material/web/fab/branded-fab.js |
|
| Field | 6.1kb | 41.5kb | 83% CSS | |
| 4.7kb | 25.5kb | 74% CSS | @material/web/field/filled-field.js |
|
| 5.0kb | 27.7kb | 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.7kb | 44.9kb | 64% CSS | |
| 6.2kb | 24.8kb | 40% CSS | @material/web/iconbutton/icon-button.js |
|
| 6.4kb | 26.9kb | 43% CSS | @material/web/iconbutton/filled-icon-button.js |
|
| 6.4kb | 27.5kb | 45% CSS | @material/web/iconbutton/filled-tonal-icon-button.js |
|
| 6.4kb | 26.5kb | 43% CSS | @material/web/iconbutton/outlined-icon-button.js |
|
| List | 7.3kb | 28.5kb | 33% CSS | |
| 1.6kb | 4.7kb | 4% CSS | @material/web/list/list.js |
|
| 6.1kb | 24.0kb | 38% CSS | @material/web/list/list-item.js |
|
| Menu | 14.0kb | 56.0kb | 22% CSS | |
| 8.1kb | 30.1kb | 17% CSS | @material/web/menu/menu.js |
|
| 6.8kb | 26.7kb | 36% CSS | @material/web/menu/menu-item.js |
|
| 8.6kb | 33.0kb | 11% CSS | @material/web/menu/sub-menu.js |
|
| Progress | 3.8kb | 14.8kb | 65% CSS | |
| 2.9kb | 9.6kb | 56% CSS | @material/web/progress/linear-progress.js |
|
| 2.5kb | 8.3kb | 51% CSS | @material/web/progress/circular-progress.js |
|
| Radio | 6.6kb | 24.6kb | 28% CSS | @material/web/radio/radio.js |
| Ripple | 2.7kb | 7.8kb | 13% CSS | @material/web/ripple/ripple.js |
| Select | 26.5kb | 146.9kb | 56% CSS | |
| 18.7kb | 93.5kb | 47% CSS | @material/web/select/filled-select.js |
|
| 18.9kb | 94.0kb | 47% CSS | @material/web/select/outlined-select.js |
|
| 6.9kb | 27.7kb | 35% CSS | @material/web/select/select-option.js |
|
| Slider | 9.9kb | 43.4kb | 44% CSS | @material/web/slider/slider.js |
| Switch | 8.0kb | 33.7kb | 45% 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.6kb | 97.2kb | 73% CSS | |
| 11.5kb | 64.1kb | 61% CSS | @material/web/textfield/filled-text-field.js |
|
| 11.7kb | 64.5kb | 61% CSS | @material/web/textfield/outlined-text-field.js |