Core Web Vitals

21.1.1. LCP (Largest Contentful Paint)

LCP measures the time it takes for the page's main content to be rendered on screen.

Rating	Threshold	TQS Requirement
Good	2.5 seconds or less	Mandatory
Needs Improvement	2.5 to 4.0 seconds	Not acceptable
Poor	Over 4.0 seconds	Not acceptable

• The LCP target of 2.5 seconds or less must be met.
• Measurement must use real user data (RUM) at the 75th percentile (p75).
• Measure using the Chrome DevTools Performance tab or the web-vitals library.

LCP optimization strategies are as follows.

• The fetchpriority="high" attribute must be set on hero images.
• <link rel="preload"> must be applied to LCP target resources.
• Server response time (TTFB) must be maintained at 500ms or less.
• Render-blocking resources (CSS, synchronous scripts) must be minimized.

---

21.1.2. INP (Interaction to Next Paint)

INP measures the delay from the moment a user interaction occurs until the next frame is rendered. As the metric replacing FID, it evaluates responsiveness throughout the entire page lifecycle.

Rating	Threshold	TQS Requirement
Good	200ms or less	Mandatory
Needs Improvement	200ms to 500ms	Not acceptable
Poor	Over 500ms	Not acceptable

• The INP target of 200ms or less must be met.
• Heavy computations must not be performed synchronously within event handlers.
• Long-running tasks must be split using requestIdleCallback or setTimeout.
• Forced reflow must not be triggered within input event handlers.
• Third-party scripts must be managed to prevent prolonged main thread occupation.

---

21.1.3. CLS (Cumulative Layout Shift)

CLS measures the cumulative score of unexpected layout shifts that occur during page loading and usage.

Rating	Threshold	TQS Requirement
Good	0.1 or less	Mandatory
Needs Improvement	0.1 to 0.25	Not acceptable
Poor	Over 0.25	Not acceptable

• The CLS target of 0.1 or less must be met.
• All image and video elements must have explicit width and height attributes.
• font-display: swap or font-display: optional must be specified for web font loading.
• Space must be reserved in advance for dynamically inserted content (banners, ads, etc.).
• Using transform animations to achieve visual changes without layout shifts is recommended.

---

21.1.4. Lighthouse Criteria

Lighthouse audits are used to measure overall quality metrics.

Item	Minimum Score	TQS Requirement
Performance	90	Mandatory
Accessibility	90	Mandatory
Best Practices	90	Recommended
SEO	90	Recommended

• Lighthouse CI must be executed in the CI pipeline to automatically measure scores.
• Measurement must include both of the following environments.

Environment	Configuration	Notes
Mobile	Moto G Power, slow 4G throttling	Lighthouse default settings
Desktop	No throttling	Use --preset=desktop option

• Builds with a Performance score below 90 must be blocked from deployment.
• Retaining Lighthouse result reports as build artifacts is recommended.
• Score decline trends must be monitored, and the root cause must be analyzed when scores decline for 3 consecutive runs.