# 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-04-09.} | Component | gzip | minified | *% CSS* | Import | | --- | --- | --- | --- | --- | | **All** | **70.0kb** | 445.8kb | *65% CSS* | `@material/web/all.js` | | **Common** | **52.0kb** | 280.7kb | *53% CSS* | `@material/web/common.js` | | **Button** | **8.1kb** | 46.9kb | *66% CSS* | | | | 6.7kb | 27.6kb | *49% CSS* | `@material/web/button/elevated-button.js` | | | 6.6kb | 27.5kb | *49% CSS* | `@material/web/button/filled-button.js` | | | 6.7kb | 27.9kb | *49% CSS* | `@material/web/button/filled-tonal-button.js` | | | 6.4kb | 26.0kb | *48% CSS* | `@material/web/button/outlined-button.js` | | | 6.2kb | 24.4kb | *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.2kb** | 15.1kb | *31% 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.5kb | *83% CSS* | | | | 4.6kb | 24.8kb | *75% CSS* | `@material/web/field/filled-field.js` | | | 4.9kb | 27.0kb | *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.7kb | *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.4kb | *22% CSS* | | | | 8.0kb | 29.5kb | *17% CSS* | `@material/web/menu/menu.js` | | | 6.5kb | 25.8kb | *37% CSS* | `@material/web/menu/menu-item.js` | | | 8.5kb | 32.5kb | *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.0kb** | 144.2kb | *57% CSS* | | | | 18.3kb | 91.1kb | *47% CSS* | `@material/web/select/filled-select.js` | | | 18.5kb | 91.6kb | *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.4kb** | 31.8kb | *47% 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.0kb** | 93.8kb | *74% CSS* | | | | 11.0kb | 61.5kb | *62% CSS* | `@material/web/textfield/filled-text-field.js` | | | 11.2kb | 62.0kb | *62% CSS* | `@material/web/textfield/outlined-text-field.js` |