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 2026-03-07.}

Component	gzip	minified	% CSS	Import
All	72.4kb	456.5kb	64% CSS	`@material/web/all.js`
Common	54.1kb	289.0kb	52% CSS	`@material/web/common.js`
Button	8.5kb	48.5kb	64% CSS
	7.0kb	29.1kb	47% CSS	`@material/web/button/elevated-button.js`
	7.0kb	29.0kb	47% CSS	`@material/web/button/filled-button.js`
	7.0kb	29.4kb	47% 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.3kb	37% CSS	`@material/web/checkbox/checkbox.js`
Chips	10.6kb	62.8kb	62% CSS
	5.1kb	17.7kb	21% CSS	`@material/web/chips/chip-set.js`
	6.8kb	28.6kb	49% CSS	`@material/web/chips/assist-chip.js`
	8.4kb	38.7kb	53% CSS	`@material/web/chips/filter-chip.js`
	7.8kb	35.5kb	52% CSS	`@material/web/chips/input-chip.js`
	6.9kb	29.0kb	49% CSS	`@material/web/chips/suggestion-chip.js`
Dialog	5.0kb	17.2kb	27% CSS	`@material/web/dialog/dialog.js`
Divider	0.6kb	1.3kb	34% CSS	`@material/web/divider/divider.js`
Elevation	0.6kb	1.7kb	61% CSS	`@material/web/elevation/elevation.js`
Fab	7.3kb	38.7kb	66% CSS
	6.9kb	34.1kb	63% CSS	`@material/web/fab/fab.js`
	6.1kb	25.8kb	50% CSS	`@material/web/fab/branded-fab.js`
Field	6.1kb	41.6kb	82% CSS
	4.8kb	25.6kb	74% CSS	`@material/web/field/filled-field.js`
	5.1kb	27.7kb	76% CSS	`@material/web/field/outlined-field.js`
Focus	1.5kb	5.4kb	48% CSS	`@material/web/focus/md-focus-ring.js`
Icon	0.7kb	1.3kb	46% CSS	`@material/web/icon/icon.js`
Icon button	8.0kb	45.7kb	63% CSS
	6.5kb	25.5kb	39% CSS	`@material/web/iconbutton/icon-button.js`
	6.7kb	27.6kb	42% CSS	`@material/web/iconbutton/filled-icon-button.js`
	6.7kb	28.2kb	44% CSS	`@material/web/iconbutton/filled-tonal-icon-button.js`
	6.7kb	27.2kb	42% CSS	`@material/web/iconbutton/outlined-icon-button.js`
List	7.3kb	28.4kb	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.1kb	56.0kb	22% CSS
	8.2kb	30.3kb	17% CSS	`@material/web/menu/menu.js`
	6.8kb	26.6kb	36% CSS	`@material/web/menu/menu-item.js`
	8.6kb	33.1kb	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	50% CSS	`@material/web/progress/circular-progress.js`
Radio	6.6kb	24.5kb	28% CSS	`@material/web/radio/radio.js`
Ripple	2.7kb	7.7kb	13% CSS	`@material/web/ripple/ripple.js`
Select	26.6kb	147.1kb	56% CSS
	18.9kb	93.8kb	47% CSS	`@material/web/select/filled-select.js`
	19.1kb	94.2kb	47% CSS	`@material/web/select/outlined-select.js`
	6.9kb	27.6kb	35% CSS	`@material/web/select/select-option.js`
Slider	9.9kb	43.3kb	45% CSS	`@material/web/slider/slider.js`
Switch	8.0kb	33.6kb	45% CSS	`@material/web/switch/switch.js`
Tabs	7.8kb	35.3kb	50% CSS
	6.1kb	22.0kb	25% CSS	`@material/web/tabs/tabs.js`
	6.2kb	25.7kb	48% CSS	`@material/web/tabs/primary-tab.js`
	6.1kb	25.2kb	48% CSS	`@material/web/tabs/secondary-tab.js`
Text field	14.7kb	97.4kb	73% CSS
	11.6kb	64.3kb	61% CSS	`@material/web/textfield/filled-text-field.js`
	11.8kb	64.7kb	61% CSS	`@material/web/textfield/outlined-text-field.js`

5.3 KiB Raw Blame History

Sizes

5.3 KiB

Raw Blame History