Core Web Vitals for Static Websites

Core Web Vitals are three numbers Google uses to measure how good your website feels to use. They're official ranking factors, meaning websites that fail them rank worse than websites that pass. Static websites usually pass by default. A couple of common mistakes can break that, and they're easy to fix once you know what to look for.

The three metrics

Largest Contentful Paint (LCP) measures how fast the biggest visible element on the page loads. Usually a hero image, a heading, or a banner. Target: under 2.5 seconds.

Cumulative Layout Shift (CLS) measures how much the page jumps around while it's loading. If a button moves under the user's finger as they're about to tap it, that's a layout shift. Target: under 0.1.

Interaction to Next Paint (INP) measures how fast the page responds when the user clicks, taps, or types. Target: under 200 milliseconds.

You want all three in the green. If any of them is in the red, it can pull your rankings down.

How to check yours

Open pagespeed.web.dev. Paste a URL from your website. Wait 30 seconds. You get a report with all three metrics for both desktop and mobile, plus a list of specific things to fix.

Test your homepage, your most important content page, and one or two product or article pages. Different pages can have different scores.

For ongoing monitoring, Google Search Console's "Core Web Vitals" report shows real user data (from people who actually visited your website, not lab tests). Check it monthly.

Why static websites usually win

Static websites have no server-side processing, no database, no framework hydration. The HTML arrives and the browser renders it. That makes INP almost always fine and gives you a head start on LCP.

The places static websites still go wrong:

LCP problems and fixes

Huge hero image. A 4 MB image as the largest element delays LCP. Compress it. Convert to WebP. The image SEO article has the full breakdown.

Web fonts that block rendering. If your H1 uses a custom font that loads after the rest of the page, the heading appears late. Add font-display: swap  to your font CSS, or preload the font:

<link rel="preload" href="/fonts/serif.woff2" as="font" type="font/woff2" crossorigin>

External scripts blocking render. A heavy analytics script or embedded widget in the head can delay LCP. Move non-essential scripts to the bottom of the body or add defer :

<script src="analytics.js" defer></script>

CLS problems and fixes

Images without width and height. The single most common cause. Add the attributes to every image.

Fonts that swap mid-load. If your fallback font is wider than your custom font, text reflows when the custom font loads. Match the metrics:

<style>
 @font-face {
 font-family: 'CustomSerif';
 src: url('/fonts/serif.woff2') format('woff2');
 font-display: swap;
 size-adjust: 105%; /* match fallback metrics */
 }
</style>

Ads or embeds inserted late. If a YouTube embed or ad pushes content down when it loads, that's CLS. Reserve the space with CSS:

.embed-wrapper { aspect-ratio: 16 / 9; }

INP problems and fixes

Almost always a JavaScript problem. If your website loads a heavy framework, third-party widgets, or complex animations, interactions feel sluggish.

Fixes:

• Remove JavaScript you don't actually need
• Defer non-essential scripts with defer  or async
• Replace heavy third-party widgets with simpler alternatives
• If you're using a framework like React, make sure the page is statically rendered, not client-rendered

A practical workflow

1. Run PageSpeed Insights on your homepage
2. Look at the three metrics. If any is red or orange, scroll down to the "Opportunities" section
3. Fix the top one or two items, redeploy, rerun
4. Repeat until all three are green

For most static.app websites, this is an afternoon of work, mostly spent compressing images.

Frequently Asked Questions

How much do Core Web Vitals affect SEO rankings?

They're a tiebreaker. Two pages with similar content quality, the one with better Core Web Vitals ranks higher. They won't lift a thin page above a great one, but they will lift a great page above a similarly great page that loads slowly.

What's a good PageSpeed Insights score?

A score is shorthand; what matters is the actual three metrics (LCP, CLS, INP). If your scores are above 90 mobile and 95 desktop and all three Vitals are green, you're done. Optimizing from 95 to 99 is rarely worth the effort.

Why is my LCP slow even on a static website?

Usually a huge hero image. If your largest visible element is a 4 MB photo, your LCP will be slow regardless of how fast the rest of the page is. Compress to WebP, set explicit dimensions, and consider preloading.

How can I improve CLS on a static website?

Set width  and height  on every image. Add aspect-ratio  CSS to ad and embed containers. Use font-display: swap  with size-adjust to prevent font swap shifts. These three fixes resolve almost all CLS issues on static websites.

Is INP the same as FID?

No. INP replaced FID in March 2024. FID only measured the first interaction; INP measures the slowest interaction across the whole page session. Static websites with light JavaScript almost always pass INP easily.