--- title: "Apply code patterns that keep LCP, INP, and CLS inside Google's thresholds" description: "Use fifteen code patterns for LCP, INP, and CLS, a load order for third-party scripts, and budgets set below Google's thresholds." canonical: "https://scalewithsearch.com/articles/core-web-vitals-engineering" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Apply code patterns that keep LCP, INP, and CLS inside Google's thresholds. A page passes Core Web Vitals after a launch sprint. Six months later it fails again. A tag here, a widget there, a larger hero image: each change was small, and nobody checked the total. Core Web Vitals engineering improves three metrics through code changes, not content or design changes. The metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Google's ranking systems use these metrics. More practically, they measure whether the site feels fast, responsive, and stable to real users. INP replaced First Input Delay (FID) as the responsiveness metric in March 2024. If your measurement still targets the old metric, update it. INP covers every interaction over the page's life, not only the first input. A page that was fine on first input can fail INP when long JavaScript tasks block interactions during use. This article gives you the fix patterns. To find which cause applies to your page first, read [Core Web Vitals debugging](/articles/core-web-vitals-debugging). ## Know what each metric measures **LCP** is the time from navigation start until the largest element in the viewport finishes rendering. The target is 2.5 seconds or less. The element is usually a hero image, a video poster, or a large block of text. LCP is not page load time. Other elements can load for 10 seconds, and LCP still passes if the largest element renders in 1.8 seconds. You optimize the critical rendering path for one element, not the whole page. **INP** is the latency from a click, tap, or key press to the next visual update. It considers all interactions and reports one of the slowest, with an adjustment for pages that have many interactions. The target is 200 milliseconds or less. It catches the page that loads fast and then stalls during use. **CLS** measures unexpected movement of visible elements. Each shift without user input adds to the score by distance and area. The target is 0.1 or less. CLS failures are the most visible to users. The text jumps because an ad loaded above it, or a button moves a moment before the click. All three are assessed at the 75th percentile of real page loads. ## Apply five LCP patterns **Preload the LCP element.** Find the element with the DevTools **Performance** panel or Lighthouse. If it is an image, preload it in the document head. The `fetchpriority="high"` attribute puts it ahead of other requests at the same priority. Without a preload, the browser finds the image only after it parses the HTML and CSS that reference it. ```html ``` **Cut server response time.** LCP cannot be faster than time to first byte (TTFB). If TTFB is 1.5 seconds, the best possible LCP is 1.5 seconds plus render time. Use server-side caching with Redis or Varnish. Use a CDN such as Cloudflare, Fastly, or Amazon CloudFront, and add edge rendering where it fits. Optimize the database queries. Serve static content as pre-generated HTML from CDN edges, and cache dynamic content hard at the application layer. **Remove render-blocking resources.** CSS in the head blocks rendering until the browser downloads and parses it. JavaScript without `async` or `defer` blocks HTML parsing. Inline the minimum CSS for above-the-fold content, and load the rest without blocking: ```html ``` Mark non-critical JavaScript with `defer`, which runs after parsing in document order. Use `async` for code that runs when ready, in no guaranteed order. **Serve modern image formats.** Google's WebP documentation reports lossy WebP files 25 to 34 percent smaller than comparable JPEG files. AVIF often compresses further, and all current major browsers support it. Keep a fallback in a `picture` element: ```html description ``` **Size images for the viewport.** A 2,400-pixel hero image on a 375-pixel phone screen wastes bandwidth and delays LCP. For the image-side trade-offs, read [image optimization for UX and SEO](/articles/image-optimization-ux-seo). ```html description ``` ## Apply five INP patterns **Break up long tasks.** The main thread runs JavaScript one task at a time. A 300 ms task blocks every interaction for 300 ms. Split the work into chunks and yield between them with `scheduler.yield()` where the browser supports it, or with `setTimeout` or `requestAnimationFrame`: ```javascript // Before: one long task function processLargeDataset(data) { data.forEach(item => heavyComputation(item)); updateUI(); } // After: chunks with a yield between them async function processLargeDataset(data) { for (const chunk of chunkArray(data, 50)) { chunk.forEach(item => heavyComputation(item)); await scheduler.yield(); } updateUI(); } ``` **Debounce event handlers.** Input handlers that run on every keystroke and scroll handlers that compute layout on every pixel fail INP during use. Debounce handlers that do not need every frame: ```javascript function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } searchInput.addEventListener('input', debounce(handleSearch, 200)); ``` **Move computation to a Web Worker.** Data parsing, large sorts, and cryptography belong in a worker. The worker runs on a separate thread and leaves the main thread free for input: ```javascript const worker = new Worker('/compute-worker.js'); worker.postMessage({ data: largeDataset }); worker.onmessage = (event) => renderResults(event.data); ``` **Delay third-party scripts.** Analytics, chat widgets, A/B testing tools, and ad scripts cause many INP failures. In the DevTools **Performance** panel, filter the flame chart by third-party domain. Load non-critical scripts with `async` or `defer`, and load non-essential ones only after the user engages. The loading order is in the next section. **Contain rendering work.** The CSS `contain` property tells the browser an element renders independently of the rest of the page, which reduces repaint cost. `content-visibility: auto` goes further and skips rendering of off-screen sections: ```css .card { contain: layout style paint; } .below-fold-section { content-visibility: auto; contain-intrinsic-size: auto 500px; } ``` ## Apply five CLS patterns **Give media explicit dimensions.** Every `img`, `video`, and `iframe` element needs `width` and `height` attributes. Without them the browser cannot reserve space. CSS such as `max-width: 100%; height: auto;` keeps the image responsive, and the ratio from the attributes still prevents the shift. ```html description ``` **Reserve space for dynamic content.** Ads, cookie banners, notification bars, and injected content push existing content down. Reserve their space with `min-height`: ```css .ad-slot { min-height: 250px; } .notification-bar { min-height: 48px; } ``` **Load fonts without a shift.** A flash of invisible or unstyled text shifts lines when the font metrics differ from the fallback. Use `font-display: optional`, which keeps the fallback if the font arrives late. Or use `font-display: swap` with a metric-compatible fallback. Preload the critical font file. ```css @font-face { font-family: 'Custom Font'; src: url('/font.woff2') format('woff2'); font-display: optional; } ``` ```html ``` **Do not insert content above the reader.** A banner, toast, or error message inserted above the text the user reads causes a shift. Insert it below the viewport, or use fixed or sticky positioning that stays out of the document flow. **Animate with transform.** An animation of `top`, `left`, `width`, or `height` triggers layout. A `transform` runs on the compositor and does not move other elements: ```css /* Triggers layout */ .element { top: 0; transition: top 0.3s; } .element.moved { top: 100px; } /* No layout shift */ .element { transform: translateY(0); transition: transform 0.3s; } .element.moved { transform: translateY(100px); } ``` ## Load third-party scripts in a set order On many marketing sites, third-party scripts are the largest performance cost. They include analytics, tag managers, chat, A/B testing, ad pixels, and social embeds. Each one competes for network, CPU time, and the main thread. Measure how much of each script runs. In the DevTools **Coverage** panel, load the page and check the execution coverage per script. A third-party script with less than 30 percent coverage is a candidate for lazy loading or removal. Google Tag Manager itself loads quickly, but its tags can cascade into many more script loads. Audit the container in four steps: 1. Remove tags that have not fired in 30 days. 2. Convert synchronous tags to asynchronous firing. 3. Use trigger groups to keep tags out of the initial page load. 4. Set tag priorities so that analytics fires before remarketing tags. Then load every script by tier: 1. Critical, blocking: only your application JavaScript and critical CSS. Nothing third-party. 2. High priority, `async`: analytics that must record the page view. 3. Medium priority, `defer` or delayed injection: chat widgets and A/B testing. 4. Low priority, loaded on interaction: social embeds, feedback widgets, and secondary analytics. ```javascript let loaded = false; ['scroll', 'click', 'keydown', 'touchstart'].forEach(evt => { window.addEventListener(evt, () => { if (loaded) return; loaded = true; loadChatWidget(); loadSocialEmbeds(); loadSecondaryAnalytics(); }, { once: true, passive: true }); }); ``` ## Set budgets with margin below the thresholds Without a budget, performance degrades one small addition at a time. A budget sets the maximum value for each metric. These starting budgets for SEO-critical pages leave margin below Google's thresholds: | Metric | Budget | Reason | |---|---|---| | LCP | Under 2.0 s | 20 percent margin below the 2.5 s threshold | | INP | Under 150 ms | 25 percent margin below the 200 ms threshold | | CLS | Under 0.05 | 50 percent margin below the 0.1 threshold | | Total JavaScript | Under 300 KB | Compressed, transferred bytes | | Total CSS | Under 50 KB | Compressed, transferred bytes | | Total page weight | Under 1.5 MB | All resources | Put the budget checks in the deployment pipeline, so a build over budget cannot ship without an explicit override. Lighthouse CI enforces metric and size assertions. Bundlewatch tracks bundle sizes across builds. Webpack performance hints warn when a bundle exceeds its limit. The pipeline setup is in the [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide), and budget design in [performance budgets for SEO](/articles/performance-budgets-seo). Decide the override authority before a conflict happens. Usually the engineering lead and the performance owner must both approve an override, with the business reason written down. ## Measure in the lab and in the field Lab data from Lighthouse and DevTools measures performance under controlled conditions. It catches regressions before deployment. Field data from the Chrome UX Report (CrUX) and Search Console measures real users. Those users have slow networks, old devices, and third-party scripts that run. Google uses field data. Monitor both. Search Console shows field data by page group. PageSpeed Insights shows lab and field data for one URL. CrUX data is available through the CrUX API and BigQuery. The CrUX API and Search Console use a rolling 28-day window, and the BigQuery dataset publishes monthly. A fix you deploy today takes weeks to show fully, so deploy early in a sprint. Lighthouse cannot measure INP on page load, so it reports Total Blocking Time as the lab proxy. ## Set priorities Google has not published a separate weight for each metric. Fix the metric furthest from its threshold first. An LCP of 4.5 seconds is 80 percent over its threshold; a CLS of 0.15 is 50 percent over. So LCP comes first. Within one metric, rank pages by traffic. The same LCP fix helps more on a page with 50,000 monthly visits than on a page with 500. Run PageSpeed Insights on your top 20 pages by organic traffic, and order the work by severity and page importance. Core Web Vitals work as a tiebreaker. A page with excellent content and poor scores can outrank a mediocre page with perfect scores. Between two pages of equal content, the faster one can win. Optimize mobile first. Google uses mobile-first indexing, and mobile is usually the harder case, with slower processors, less memory, and variable networks. A page that passes on mobile usually passes on desktop. Test on real mid-range Android phones, not only on DevTools emulation. A CDN lowers TTFB and can serve optimized images, which helps LCP. It cannot fix INP, which is a JavaScript problem. It cannot fix CLS from missing dimensions, or render-blocking CSS. A CDN is one part of the work. The business case can outweigh the ranking case. Google reported in 2020 that users are at least 24 percent less likely to abandon page loads on sites that meet the thresholds. A Vodafone case study on web.dev reported that a 31 percent LCP improvement came with 8 percent more sales. Both are observations from other sites, not predictions for yours. Use them with teams that doubt the SEO argument. ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```