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`