---
title: "Speed up page loads to pass Core Web Vitals with server, rendering, and asset fixes"
description: "A developer's page speed method: read field data, cut TTFB, clear the critical path, optimize images and fonts, tame third parties, and set budgets."
canonical: "https://scalewithsearch.com/articles/page-speed-optimization-developers"
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)
# Speed up page loads to pass Core Web Vitals with server, rendering, and asset fixes.
A product team ships a redesign. Lighthouse scores 92 on the developer's laptop. Three weeks later, Search Console marks most mobile URLs as "Poor" for Largest Contentful Paint, and organic sessions dip.
Google made Core Web Vitals part of its page experience ranking signals in a rollout from June to August 2021. Since then, rendering delay costs organic visibility, user experience, and revenue. For developers, performance became a core skill. The work is a balance: tight load targets against rich features, third-party code, legacy constraints, and pressure to ship.
This guide covers the rendering mechanics, resource priorities, and measurement that move a site from PageSpeed scores in the 50s to the 90s. It goes past "compress your images".
## Know what speed is worth
Rankings get the headlines. Performance pays in four other ways.
**Conversion.** An often-cited 2008 Aberdeen Group study found that each extra second of load time cut conversions by about 7 percent. For a store, that is 7 percent of online revenue lost to slow rendering.
**Crawl efficiency.** Googlebot has finite crawl capacity for each site, and Google raises that capacity when the server answers fast. Slow responses mean fewer URLs crawled. On large sites, often 10,000 pages or more, slow category pages can leave new content uncrawled.
**Mobile.** Most web traffic in many markets now comes from phones, often on slow connections. A page that loads in 1.5 seconds on desktop can take six seconds or more on a 3G connection. Google indexes the mobile version of each page. It uses mobile field data for mobile search, and since February 2022 desktop field data for desktop search.
**Engagement.** Google's 2017 research with SOASTA found that the probability of a bounce rises 32 percent as load time goes from one to three seconds. A slow page signals low quality before the content appears.
## Understand what Core Web Vitals measure
Three metrics capture user-perceived performance. Google judges each at the 75th percentile of real visits.
| Metric | What it measures | Good |
|---|---|---|
| Largest Contentful Paint (LCP) | Time until the largest visible element renders: a hero image, headline block, or video player | 2.5 s or less |
| Interaction to Next Paint (INP) | Delay between each user interaction and the next frame the browser paints | 200 ms or less |
| Cumulative Layout Shift (CLS) | Unexpected movement of content during the visit | 0.1 or less |
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. FID measured only the first interaction. INP covers every click, tap, and key press in the visit, so heavy JavaScript that runs after load now counts against you. The [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide) covers each metric's causes in depth.
A technically fast site that delays the content in the first screen still fails LCP. Low CLS prevents the mis-click where a late element pushes the button the user aimed for.
### Trust field data over lab data
The Chrome User Experience Report (CrUX) holds field data: real user experiences over a rolling 28-day window. Google uses this data for ranking. If CrUX shows poor Core Web Vitals, a better Lighthouse score does not restore rankings until the field data improves.
Lab tools, such as Lighthouse, PageSpeed Insights lab results, and WebPageTest, run controlled tests on simulated devices and connections. They diagnose problems and predict gains. They do not reflect real variety in devices, networks, locations, and browsers.
A site can score 95 in Lighthouse and still fail in the field if most real users have slow phones or weak connections. Validate every lab fix against field data in the Search Console Core Web Vitals report. You can also collect field data with the `web-vitals` JavaScript library and send it to GA4.
## Fix the server first
Time to First Byte (TTFB) is the time from the browser's request to the first byte of the response. Google's web.dev guidance rates 800 ms or less as good. Aim well below that, near 200 ms. Nothing renders until the server responds, so a slow TTFB delays every later metric.
- **Database queries.** Find N+1 queries, add missing indexes, and cache repeated reads. Use a profiler to find the few queries that take most of the response time.
- **CDN.** Serve static assets from edge locations near users. Edge caches often answer in tens of milliseconds, where a distant origin can take hundreds. Common choices are Cloudflare, Fastly, and Amazon CloudFront. The [CDN configuration guide](/articles/cdn-configuration-seo) covers cache rules that keep SEO intact.
- **Application caching.** Cache query results, API responses, and rendered HTML fragments in Redis or Memcached, so repeat requests become memory lookups.
- **Capacity.** Underpowered hosting fails under traffic spikes. Watch CPU and memory at peak. If sustained use exceeds about 70 percent, scale up or add instances.
- **HTTP/2 or HTTP/3.** Both protocols send many requests over one connection and compress headers. The gain over HTTP/1.1 is often large on pages with many small files and needs no code change. Chrome removed support for HTTP/2 server push in 2022, so do not plan around push.
## Clear the critical rendering path
The browser must fetch and process certain resources before it paints. Remove the ones that block the first paint.
### CSS
Inline the critical CSS, the styles the first screen needs, in the `head`. That removes a render-blocking request. Extract it with Critical or Penthouse.
Load the rest without blocking. One common pattern uses `preload` and switches the link to a stylesheet when it arrives:
```html
```
Remove unused selectors with PurgeCSS or UnCSS. Many sites ship stylesheets of 200 KB or more when any one page uses about 30 KB. Tailwind CSS version 3 and later generate only the classes your templates use, so check the build output before you blame the framework.
### JavaScript
- **Defer what the first paint does not need.** Use `defer` or `async`. A `defer` script keeps execution order and runs after parsing. An `async` script runs as soon as it downloads; use it for independent scripts such as analytics.
- **Split bundles.** A visitor to the homepage should not download checkout validation code. Webpack, Rollup, and Vite split code through dynamic `import()`.
- **Tree-shake.** If you import one function from a 50 KB library, tree shaking can remove most of the unused code.
- **Free the main thread.** Long tasks block interactions and hurt INP. Move heavy work to Web Workers, render large data sets in stages, and debounce or throttle event handlers.
## Optimize images
Images are often half or more of page weight, so this work returns the most for the effort. The [image optimization guide](/articles/image-optimization-ux-seo) covers alt text and file names alongside speed.
### Choose the format
| Format | Use | Notes |
|---|---|---|
| WebP | Default for photos and transparent graphics | About 25 to 35 percent smaller than JPEG at similar quality; supported by over 95 percent of browsers |
| AVIF | Hero images where size matters most | Often smaller than WebP; encoding and decoding cost more CPU |
| SVG | Logos, icons, illustrations | Scales without quality loss |
Keep a JPEG fallback through the `picture` element for the browsers that lack support.
### Serve the right size
Use `srcset` and `sizes` so a phone does not download a 2,000-pixel hero when 600 pixels is enough:
```html
```
### Lazy-load below the fold
Native lazy loading defers images until the user scrolls near them:
```html
```
Never lazy-load the LCP image. For finer control, such as custom thresholds, use an Intersection Observer.
### Compress
For photos, use lossy compression. JPEG quality 80 to 85 usually looks the same as 100 and is often 40 to 60 percent smaller. ImageOptim, Squoosh, and Sharp for Node.js all do this. For graphics, pngquant or OptiPNG remove metadata and reduce the palette.
## Tell the browser what matters
Resource hints change the loading order.
**Preconnect** to critical third-party origins. The browser completes DNS, TCP, and TLS setup early, which often saves 100 to 200 ms per origin:
```html
```
**Preload** critical resources that the browser would find late:
```html
```
Preload only a few resources. Too many preloads compete for bandwidth and cancel the gain. For the LCP image, you can also add `fetchpriority="high"` to the `img` element.
**DNS prefetch** resolves names for less critical origins at a lower cost than preconnect:
```html
```
## Load fonts without blocking text
Web fonts can hide text until they arrive, an effect called a flash of invisible text.
- **`font-display: swap`** shows a fallback font at once and swaps when the web font loads. Text is never invisible, but the swap can shift layout if the fonts differ in size.
- **`font-display: optional`** uses the web font only if it arrives within about 100 ms. Performance wins over typography. It suits body text more than brand headlines.
- **Self-hosting** removes a third-party connection. Google Fonts licenses allow it. Check your license before you self-host fonts from Adobe Fonts or another commercial foundry. Add a `preload` for the main file.
- **Subsetting** keeps only the glyphs your languages need. A Latin-only subset of a multilingual font can be about 70 percent smaller.
- **Variable fonts** put several weights and styles in one file and can replace four to six static files.
## Control third-party scripts
Tag managers, analytics, ads, and chat widgets can add seconds of load and a large share of main-thread work.
1. **Audit each script.** Remove any script whose value does not justify its cost.
2. **Delay what can wait.** Load social widgets, video embeds, and ads on interaction or when the user scrolls near them.
3. **Isolate in iframes.** An iframe keeps third-party code off your main thread. It limits the damage but complicates integration.
4. **Fix the consent banner.** Consent scripts often load synchronously and block rendering. Optimize the banner, and hold non-essential scripts until the user consents.
5. **Test off-main-thread execution.** Partytown, an open-source library from Builder.io, runs third-party scripts in a Web Worker. Test each script with it in staging before production.
## Measure in the lab and the field
**Lab tools:**
- PageSpeed Insights combines a Lighthouse lab run with CrUX field data. For rankings, read the field section.
- WebPageTest shows waterfalls, filmstrips, and request detail. Use it to find render-blocking resources.
- Lighthouse CI runs audits in your pipeline and fails builds that regress. The [Lighthouse in GitHub Actions guide](/articles/lighthouse-github-actions-seo) shows the setup.
**Field tools:**
- The Search Console Core Web Vitals report shows real-user results grouped by similar URLs, over 28 days.
- GA4 with the `web-vitals` library records the metrics next to user behavior. Segment by device, country, and traffic source to see where problems concentrate.
- Real user monitoring (RUM) tools such as SpeedCurve, Sentry, and New Relic track real sessions continuously and alert on regressions.
Test continuously. Run Lighthouse CI on every commit, and check field data weekly in Search Console. Run a deep WebPageTest audit monthly or after a major release.
## Set budgets that stop regressions
A performance budget sets limits on page weight, timing, and request counts. It stops slow growth as features accumulate. An example:
| Budget item | Limit |
|---|---|
| Total page weight | Under 500 KB |
| JavaScript | Under 150 KB |
| Images | Under 200 KB |
| CSS | Under 50 KB |
| Third-party scripts | Under 100 KB |
| LCP | Under 2.0 s |
| CLS | Under 0.05 |
Enforce the budget in CI with Lighthouse CI or webpack performance hints. A build that breaks the budget needs optimization before it merges. The [performance budgets guide](/articles/performance-budgets-seo) covers how to set and negotiate the numbers.
## Fix the usual culprits
| Problem | Fix |
|---|---|
| Render-blocking JavaScript in the `head` | Add `defer` or `async`, or move scripts to the end of the `body` |
| Unoptimized images | Responsive sizes, WebP or AVIF, lazy loading below the fold, compression |
| Oversized CSS frameworks | Remove unused CSS; import only the Bootstrap components you use |
| Synchronous third-party scripts | Defer analytics, ads, and widgets; none are critical to the first paint |
| No caching headers | Serve versioned static assets with `Cache-Control: public, max-age=31536000, immutable` |
| No compression | Turn on gzip or Brotli at the server or CDN; text assets often shrink 70 to 80 percent |
Realistic targets depend on the site. Most content sites can reach an LCP under 2 seconds. Complex single-page applications usually target 2 to 3 seconds for LCP and under 200 ms for INP. Ecommerce should aim for under 2.5 seconds, the Core Web Vitals threshold for a good LCP.
A JavaScript framework such as React can still pass. Server-side rendering or static generation improves LCP, code splitting controls bundle size, and React 18's concurrent rendering helps INP. A static HTML page still beats an equivalent single-page app, so choose the architecture for the features you need, then optimize. Optimize mobile first; desktop usually inherits the gains.
To win stakeholder support, translate speed into business terms. Show conversion revenue, organic traffic from better Core Web Vitals, and lower infrastructure cost. Present performance as a feature, not as technical debt.
----
```text
.|########||. .|########||. .|########||.
|##||. .||##|. |##||. .||##|. |##||. .||##|.
|#|. .|#|. |#|. .|#|. |#|. .|#|.
|#| |#| |#| |#| |#| |#|
.#| |#. .#| |#. .#| |#.
.#. .#| .#. .#| .#. .#|
|#. .#| |#. .#| |#. .#|
|# ...... #| |# ...... #| |# ...... #|
.# ||#########| #| .# ||#########| #| .# ||#########| #|
.#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#.
#. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .#
|| |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| ||
# |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #.
|| |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| ||
# .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| #
|| ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. ||
#. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .#
# . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #.
.| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| ||
|| |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| ||
#. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .#
# .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. #
# .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| #
# .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| #
# .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| #
# .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| #
# |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| #
#. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .#
|| | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| ||
|| ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || ||
.# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #.
#.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .#
|| ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. ||
# .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| #
|| |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| ||
.# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #.
|| |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| ||
#. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .#
.#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#.
|# ||########|| #. |# ||########|| #. |# ||########|| #.
|# ...... #| |# ...... #| |# ...... #|
|#. .#| |#. .#| |#. .#|
|#. .#. |#. .#. |#. .#.
.#| |#. .#| |#. .#| |#.
|#| |#| |#| |#| |#| |#|
.|#|. .|#|. .|#|. .|#|. .|#|. .|#|.
|##||. .||##| |##||. .||##| |##||. .||##|
.||########||. .||########||. .||########||.
Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com)
```
```
### Lazy-load below the fold
Native lazy loading defers images until the user scrolls near them:
```html
```
Never lazy-load the LCP image. For finer control, such as custom thresholds, use an Intersection Observer.
### Compress
For photos, use lossy compression. JPEG quality 80 to 85 usually looks the same as 100 and is often 40 to 60 percent smaller. ImageOptim, Squoosh, and Sharp for Node.js all do this. For graphics, pngquant or OptiPNG remove metadata and reduce the palette.
## Tell the browser what matters
Resource hints change the loading order.
**Preconnect** to critical third-party origins. The browser completes DNS, TCP, and TLS setup early, which often saves 100 to 200 ms per origin:
```html
```
**Preload** critical resources that the browser would find late:
```html
```
Preload only a few resources. Too many preloads compete for bandwidth and cancel the gain. For the LCP image, you can also add `fetchpriority="high"` to the `img` element.
**DNS prefetch** resolves names for less critical origins at a lower cost than preconnect:
```html
```
## Load fonts without blocking text
Web fonts can hide text until they arrive, an effect called a flash of invisible text.
- **`font-display: swap`** shows a fallback font at once and swaps when the web font loads. Text is never invisible, but the swap can shift layout if the fonts differ in size.
- **`font-display: optional`** uses the web font only if it arrives within about 100 ms. Performance wins over typography. It suits body text more than brand headlines.
- **Self-hosting** removes a third-party connection. Google Fonts licenses allow it. Check your license before you self-host fonts from Adobe Fonts or another commercial foundry. Add a `preload` for the main file.
- **Subsetting** keeps only the glyphs your languages need. A Latin-only subset of a multilingual font can be about 70 percent smaller.
- **Variable fonts** put several weights and styles in one file and can replace four to six static files.
## Control third-party scripts
Tag managers, analytics, ads, and chat widgets can add seconds of load and a large share of main-thread work.
1. **Audit each script.** Remove any script whose value does not justify its cost.
2. **Delay what can wait.** Load social widgets, video embeds, and ads on interaction or when the user scrolls near them.
3. **Isolate in iframes.** An iframe keeps third-party code off your main thread. It limits the damage but complicates integration.
4. **Fix the consent banner.** Consent scripts often load synchronously and block rendering. Optimize the banner, and hold non-essential scripts until the user consents.
5. **Test off-main-thread execution.** Partytown, an open-source library from Builder.io, runs third-party scripts in a Web Worker. Test each script with it in staging before production.
## Measure in the lab and the field
**Lab tools:**
- PageSpeed Insights combines a Lighthouse lab run with CrUX field data. For rankings, read the field section.
- WebPageTest shows waterfalls, filmstrips, and request detail. Use it to find render-blocking resources.
- Lighthouse CI runs audits in your pipeline and fails builds that regress. The [Lighthouse in GitHub Actions guide](/articles/lighthouse-github-actions-seo) shows the setup.
**Field tools:**
- The Search Console Core Web Vitals report shows real-user results grouped by similar URLs, over 28 days.
- GA4 with the `web-vitals` library records the metrics next to user behavior. Segment by device, country, and traffic source to see where problems concentrate.
- Real user monitoring (RUM) tools such as SpeedCurve, Sentry, and New Relic track real sessions continuously and alert on regressions.
Test continuously. Run Lighthouse CI on every commit, and check field data weekly in Search Console. Run a deep WebPageTest audit monthly or after a major release.
## Set budgets that stop regressions
A performance budget sets limits on page weight, timing, and request counts. It stops slow growth as features accumulate. An example:
| Budget item | Limit |
|---|---|
| Total page weight | Under 500 KB |
| JavaScript | Under 150 KB |
| Images | Under 200 KB |
| CSS | Under 50 KB |
| Third-party scripts | Under 100 KB |
| LCP | Under 2.0 s |
| CLS | Under 0.05 |
Enforce the budget in CI with Lighthouse CI or webpack performance hints. A build that breaks the budget needs optimization before it merges. The [performance budgets guide](/articles/performance-budgets-seo) covers how to set and negotiate the numbers.
## Fix the usual culprits
| Problem | Fix |
|---|---|
| Render-blocking JavaScript in the `head` | Add `defer` or `async`, or move scripts to the end of the `body` |
| Unoptimized images | Responsive sizes, WebP or AVIF, lazy loading below the fold, compression |
| Oversized CSS frameworks | Remove unused CSS; import only the Bootstrap components you use |
| Synchronous third-party scripts | Defer analytics, ads, and widgets; none are critical to the first paint |
| No caching headers | Serve versioned static assets with `Cache-Control: public, max-age=31536000, immutable` |
| No compression | Turn on gzip or Brotli at the server or CDN; text assets often shrink 70 to 80 percent |
Realistic targets depend on the site. Most content sites can reach an LCP under 2 seconds. Complex single-page applications usually target 2 to 3 seconds for LCP and under 200 ms for INP. Ecommerce should aim for under 2.5 seconds, the Core Web Vitals threshold for a good LCP.
A JavaScript framework such as React can still pass. Server-side rendering or static generation improves LCP, code splitting controls bundle size, and React 18's concurrent rendering helps INP. A static HTML page still beats an equivalent single-page app, so choose the architecture for the features you need, then optimize. Optimize mobile first; desktop usually inherits the gains.
To win stakeholder support, translate speed into business terms. Show conversion revenue, organic traffic from better Core Web Vitals, and lower infrastructure cost. Present performance as a feature, not as technical debt.
----
```text
.|########||. .|########||. .|########||.
|##||. .||##|. |##||. .||##|. |##||. .||##|.
|#|. .|#|. |#|. .|#|. |#|. .|#|.
|#| |#| |#| |#| |#| |#|
.#| |#. .#| |#. .#| |#.
.#. .#| .#. .#| .#. .#|
|#. .#| |#. .#| |#. .#|
|# ...... #| |# ...... #| |# ...... #|
.# ||#########| #| .# ||#########| #| .# ||#########| #|
.#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#.
#. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .#
|| |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| ||
# |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #.
|| |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| ||
# .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| #
|| ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. ||
#. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .#
# . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #.
.| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| ||
|| |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| ||
#. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .#
# .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. #
# .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| #
# .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| #
# .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| #
# .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| #
# |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| #
#. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .#
|| | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| ||
|| ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || ||
.# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #.
#.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .#
|| ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. ||
# .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| #
|| |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| ||
.# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #.
|| |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| ||
#. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .#
.#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#.
|# ||########|| #. |# ||########|| #. |# ||########|| #.
|# ...... #| |# ...... #| |# ...... #|
|#. .#| |#. .#| |#. .#|
|#. .#. |#. .#. |#. .#.
.#| |#. .#| |#. .#| |#.
|#| |#| |#| |#| |#| |#|
.|#|. .|#|. .|#|. .|#|. .|#|. .|#|.
|##||. .||##| |##||. .||##| |##||. .||##|
.||########||. .||########||. .||########||.
Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com)
```