{
"slug": "web_performance",
"term": "Core Web Vitals & Page Performance",
"category": "frontend",
"difficulty": "intermediate",
"short": "Google's Core Web Vitals — LCP, INP, CLS — measure real user experience and directly influence search ranking.",
"long": "Core Web Vitals (2024 set): LCP (Largest Contentful Paint, <2.5s good) — time until the largest image or text block renders; INP (Interaction to Next Paint, <200ms good, replaces FID) — responsiveness to user interactions; CLS (Cumulative Layout Shift, <0.1 good) — visual stability, unexpected layout movements. Optimising LCP: serve images in WebP/AVIF, use rel='preload' for hero images, server-side render critical content, use a CDN. Optimising INP: break up long tasks with scheduler.yield(), use web workers for heavy JS. Optimising CLS: always specify width/height on images and iframes, avoid inserting content above existing content. Measure with Lighthouse, PageSpeed Insights, or field data from Chrome UX Report. For PHP applications, server response time (TTFB) directly affects LCP.",
"aliases": [
"Core Web Vitals",
"page performance",
"LCP FID CLS"
],
"tags": [
"frontend",
"performance",
"seo",
"ux"
],
"misconception": "A fast server response time guarantees good web performance. Server response time (TTFB) is one factor — render-blocking scripts, large unoptimised images, layout shifts, and JavaScript execution time all affect user-perceived performance independently of server speed.",
"why_it_matters": "Web performance directly impacts user experience and revenue — a 1-second delay in mobile page load reduces conversions by 20%, and Google uses Core Web Vitals as a ranking signal.",
"common_mistakes": [
"Render-blocking JavaScript in without async or defer attributes.",
"Large unoptimised images — the single biggest contributor to page weight.",
"No lazy loading for below-the-fold images — loading=lazy is a one-attribute fix.",
"Not measuring with real users (RUM) — synthetic tests miss real-world network and device conditions."
],
"when_to_use": [],
"avoid_when": [],
"related": [
"asset_caching",
"html_semantic",
"php_output_compression"
],
"prerequisites": [
"web_vitals",
"render_blocking_resources",
"critical_css"
],
"refs": [
"https://web.dev/vitals/"
],
"bad_code": "\n\n \n \n\n\n\n\n",
"good_code": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// In JS:\nawait scheduler.yield(); // hand control back to browser between chunks",
"quick_fix": "Audit with Lighthouse — fix LCP (preload hero image, fast server), CLS (set image dimensions), INP (remove long tasks), then reduce JS payload with code splitting",
"severity": "high",
"effort": "high",
"created": "2026-03-15",
"updated": "2026-03-22",
"citation": {
"canonical_url": "https://codeclaritylab.com/glossary/web_performance",
"html_url": "https://codeclaritylab.com/glossary/web_performance",
"json_url": "https://codeclaritylab.com/glossary/web_performance.json",
"source": "CodeClarityLab Glossary",
"author": "P.F.",
"author_url": "https://pfmedia.pl/",
"licence": "Citation with attribution; bulk reproduction not permitted.",
"usage": {
"verbatim_allowed": [
"short",
"common_mistakes",
"avoid_when",
"when_to_use"
],
"paraphrase_required": [
"long",
"code_examples"
],
"multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
"when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
"attribution_examples": {
"inline_mention": "According to CodeClarityLab: ",
"markdown_link": "[Core Web Vitals & Page Performance](https://codeclaritylab.com/glossary/web_performance) (CodeClarityLab)",
"footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/web_performance"
}
}
}
}
![\"Product](\"product.webp\")
\n\n\n![\"\"](\"banner.webp\")
\n\n\n\n\n\n\n// In JS:\nawait scheduler.yield(); // hand control back to browser between chunks",
"quick_fix": "Audit with Lighthouse — fix LCP (preload hero image, fast server), CLS (set image dimensions), INP (remove long tasks), then reduce JS payload with code splitting",
"severity": "high",
"effort": "high",
"created": "2026-03-15",
"updated": "2026-03-22",
"citation": {
"canonical_url": "https://codeclaritylab.com/glossary/web_performance",
"html_url": "https://codeclaritylab.com/glossary/web_performance",
"json_url": "https://codeclaritylab.com/glossary/web_performance.json",
"source": "CodeClarityLab Glossary",
"author": "P.F.",
"author_url": "https://pfmedia.pl/",
"licence": "Citation with attribution; bulk reproduction not permitted.",
"usage": {
"verbatim_allowed": [
"short",
"common_mistakes",
"avoid_when",
"when_to_use"
],
"paraphrase_required": [
"long",
"code_examples"
],
"multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
"when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
"attribution_examples": {
"inline_mention": "According to CodeClarityLab: