Data attributes in HTML - Performance & Optimization

Performance: Data attributes

MEDIUM IMPACT

Using data attributes affects DOM size and JavaScript access speed, impacting interaction responsiveness.

Storing extra information on HTML elements for JavaScript use

HTML

<div data-info='{"info1":"value1","info2":"value2","info3":"value3"}'></div>

Consolidates data into one attribute, reducing DOM size and improving JavaScript access speed.

📈 Performance GainReduces DOM size, fewer attribute lookups, faster script execution

Storing extra information on HTML elements for JavaScript use

HTML

<div data-info1="value1" data-info2="value2" data-info3="value3" data-info4="value4" data-info5="value5"></div>

Adding many data attributes increases DOM size and parsing time, slowing down page interaction.

📉 Performance CostIncreases DOM nodes size, triggers slower JavaScript access, may block rendering for 10-20ms on large sets

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Many separate data attributes	Increases DOM size	No direct reflows but slows JS	Minimal paint impact	[X] Bad
Single JSON data attribute	Smaller DOM size	No reflows	Minimal paint impact	[OK] Good

Rendering Pipeline

Data attributes are parsed during HTML parsing and stored in the DOM. Accessing them triggers JavaScript style recalculations if used in scripts. Excessive attributes increase layout and paint times.

→DOM Construction

→Style Calculation

→JavaScript Execution

⚠️ BottleneckDOM Construction and JavaScript Execution

Core Web Vital Affected

INP

Using data attributes affects DOM size and JavaScript access speed, impacting interaction responsiveness.

Optimization Tips

1Avoid adding many separate data attributes to elements.

2Combine related data into a single JSON string attribute when possible.

3Use data attributes only for necessary data to keep DOM light.

Performance Quiz - 3 Questions

What is a performance downside of using many separate data attributes on an element?

A Blocks network requests

B Increases DOM size and slows JavaScript access

C Causes layout shifts during scrolling

D Improves rendering speed

DevTools: Elements

How to check: Open DevTools, go to Elements panel, inspect elements with data attributes, observe attribute count and size.

What to look for: Look for many data-* attributes per element which increase DOM size and complexity.