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-1-24.}

Component	gzip	minified	% CSS	Import
All	69.9kb	444.8kb	65% CSS	`@material/web/all.js`
Common	51.9kb	279.9kb	53% CSS	`@material/web/common.js`
Button	8.1kb	46.3kb	66% CSS
	6.7kb	27.4kb	48% CSS	`@material/web/button/elevated-button.js`
	6.7kb	27.3kb	48% CSS	`@material/web/button/filled-button.js`
	6.7kb	27.7kb	49% CSS	`@material/web/button/filled-tonal-button.js`
	6.4kb	25.7kb	47% CSS	`@material/web/button/outlined-button.js`
	6.3kb	24.2kb	44% CSS	`@material/web/button/text-button.js`
Checkbox	6.8kb	26.4kb	37% CSS	`@material/web/checkbox/checkbox.js`
Chips	10.0kb	60.4kb	63% CSS
	4.8kb	16.3kb	21% CSS	`@material/web/chips/chip-set.js`
	6.4kb	26.8kb	51% CSS	`@material/web/chips/assist-chip.js`
	7.9kb	37.0kb	55% CSS	`@material/web/chips/filter-chip.js`
	7.4kb	33.7kb	54% CSS	`@material/web/chips/input-chip.js`
	6.4kb	27.2kb	51% CSS	`@material/web/chips/suggestion-chip.js`
Dialog	4.1kb	14.8kb	31% CSS	`@material/web/dialog/dialog.js`
Divider	0.6kb	1.3kb	36% CSS	`@material/web/divider/divider.js`
Elevation	0.7kb	1.7kb	62% CSS	`@material/web/elevation/elevation.js`
Fab	7.0kb	37.1kb	67% CSS
	6.6kb	32.8kb	64% CSS	`@material/web/fab/fab.js`
	5.9kb	24.6kb	51% CSS	`@material/web/fab/branded-fab.js`
Field	6.1kb	40.5kb	83% CSS
	4.6kb	24.8kb	74% CSS	`@material/web/field/filled-field.js`
	5.0kb	27.1kb	76% CSS	`@material/web/field/outlined-field.js`
Focus	1.5kb	5.2kb	46% CSS	`@material/web/focus/md-focus-ring.js`
Icon	0.7kb	1.3kb	46% CSS	`@material/web/icon/icon.js`
Icon button	7.3kb	42.0kb	64% CSS
	5.9kb	23.1kb	41% CSS	`@material/web/iconbutton/icon-button.js`
	6.0kb	25.0kb	44% CSS	`@material/web/iconbutton/filled-icon-button.js`
	6.1kb	25.5kb	46% CSS	`@material/web/iconbutton/filled-tonal-icon-button.js`
	6.1kb	24.6kb	44% CSS	`@material/web/iconbutton/outlined-icon-button.js`
List	7.0kb	27.2kb	34% CSS
	1.6kb	4.5kb	5% CSS	`@material/web/list/list.js`
	5.8kb	23.0kb	40% CSS	`@material/web/list/list-item.js`
Menu	13.5kb	54.0kb	22% CSS
	7.9kb	28.8kb	17% CSS	`@material/web/menu/menu.js`
	6.5kb	25.7kb	37% CSS	`@material/web/menu/menu-item.js`
	8.4kb	31.9kb	11% CSS	`@material/web/menu/sub-menu.js`
Progress	3.5kb	13.9kb	70% CSS
	2.6kb	8.7kb	63% CSS	`@material/web/progress/linear-progress.js`
	2.2kb	7.4kb	57% CSS	`@material/web/progress/circular-progress.js`
Radio	6.8kb	24.7kb	27% CSS	`@material/web/radio/radio.js`
Ripple	2.8kb	7.9kb	13% CSS	`@material/web/ripple/ripple.js`
Select	26.0kb	143.6kb	57% CSS
	18.2kb	90.3kb	47% CSS	`@material/web/select/filled-select.js`
	18.4kb	90.9kb	48% CSS	`@material/web/select/outlined-select.js`
	6.7kb	26.7kb	36% CSS	`@material/web/select/select-option.js`
Slider	9.8kb	44.2kb	48% CSS	`@material/web/slider/slider.js`
Switch	7.4kb	31.2kb	46% CSS	`@material/web/switch/switch.js`
Tabs	7.9kb	35.1kb	49% CSS
	6.3kb	22.0kb	24% CSS	`@material/web/tabs/tabs.js`
	6.3kb	25.6kb	48% CSS	`@material/web/tabs/primary-tab.js`
	6.2kb	25.2kb	47% CSS	`@material/web/tabs/secondary-tab.js`
Text field	14.0kb	93.6kb	73% CSS
	11.0kb	61.4kb	62% CSS	`@material/web/textfield/filled-text-field.js`
	11.2kb	61.9kb	62% CSS	`@material/web/textfield/outlined-text-field.js`