Home Work
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
LegalHealthcareReal estateFinanceHospitality
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact
WEB · TECH

Optimizing website performance: Core Web Vitals in practice

MBy M. Tufan, Co-founder · Published mei 2026 · 8 min read
QUICK ANSWER

You improve website performance by optimizing three Core Web Vitals: LCP (does the largest element load within 2.5 seconds), INP (does the page respond to interaction within 200 milliseconds) and CLS (does the layout not jump while loading). The biggest gain sits in optimizing images, minifying and deferring JavaScript, and serving through a CDN. First measure where you stand with PageSpeed Insights, then fix the heaviest problem first. A faster site raises conversion, SEO position and user satisfaction at the same time.

Google reports that the chance of a visitor bouncing rises by 32% when the load time goes from 1 to 3 seconds. Performance is not a technical detail, it is directly tied to revenue and findability. The good news: most sites leave easy wins on the table. Below is where they sit.

The three Core Web Vitals

Google measures user experience with three numbers. Know them, and you know what to steer on.

  • LCP (Largest Contentful Paint): how fast the largest element becomes visible. Target: under 2.5 seconds. Usually this is a hero image or a large block of text.
  • INP (Interaction to Next Paint): how fast the page responds to a click or tap. Target: under 200 milliseconds. This replaced the old FID metric in 2024.
  • CLS (Cumulative Layout Shift): how much the layout shifts while loading. Target: under 0.1. Nothing is more annoying than a button that jumps away just as you tap it.

Improving LCP: the biggest win

For most sites LCP is the lowest-hanging fruit, and images are usually the culprit.

  • Compress and convert images to modern formats like WebP or AVIF. A 2 MB hero can often drop to 150 KB without visible quality loss.
  • Give images the right dimensions. Do not serve a 4000px photo that is shown at 400px.
  • Load important images immediately, the rest lazily. The hero right away, everything below the fold only when the user scrolls.
  • Use a CDN. Cloudflare serves your files from a server close to the visitor.
Our Next.js sites hit LCP under a second because the framework optimizes images automatically and serves pages statically through Cloudflare.

Improving INP: keep the main thread free

Slow responses to interaction almost always come from too much JavaScript keeping the browser busy. The main thread is the kitchen: if it is full of tasks, a click cannot get through.

  • Minify and bundle JavaScript and remove what you do not use. Many sites load entire libraries for one function.
  • Defer non-critical scripts. Analytics, chat widgets and trackers do not need to run at load time.
  • Split your code so a page only loads what it needs, not the whole application.

A third-party chat widget or cookie banner is often the silent killer of INP. Measure what external scripts cost before you add them.

Improving CLS: reserve space

Layout shift happens when the browser has to make room for something that loads in later. The solution is to reserve that space up front.

  • Give images and videos fixed dimensions in the code, so the browser already knows the space.
  • Reserve room for ads and embeds instead of letting them push content out of the way.
  • Load fonts smartly so text does not jump when the real font arrives.

Measure first, then fix

Optimizing without measuring is guessing. Start with data:

  • PageSpeed Insights gives you scores and concrete improvement points, with real user data where available.
  • Chrome DevTools and Lighthouse show what happens during loading.
  • Fix the heaviest problem first. Fixing one large uncompressed image returns more than ten micro-optimizations.

Performance is not a one-time action. Every new feature, every extra script and every image can drag it back down. So measure regularly, especially after big changes.

Why this is worth money

A fast site converts better, ranks higher in Google and holds visitors longer. For a webshop, loading one second faster is directly measurable in revenue. For a service provider it means more inquiries from the same traffic. Look at our web development approach, where performance is a starting point from the first line of code, not an afterthought.

The silent speed killers

Many performance problems do not arise at build time, they creep in later. These are the most common culprits we encounter on sites that have become slow:

  • External scripts that pile up. Every marketing tool, chat widget and tracking pixel adds load time. Three trackers that each cost half a second cost a second and a half together.
  • Uncompressed images through a CMS. An editor who uploads a photo straight from the camera can easily put a 5 MB file on the page.
  • A page builder or heavy theme. Visual builders often generate bloated code with unnecessary scripts and styles.
  • Outdated plugins. Beyond a security risk, they are often a brake on speed too.

The lesson: performance is an ongoing discipline. Set a budget (for example: the homepage may not exceed a certain size) and guard it on every change.

A concrete example

A typical business site with a 2 MB hero image, three unused JavaScript libraries and a chat widget that starts at load time quickly scores an LCP of four seconds. Compress the image to 150 KB, remove the unused libraries and defer the chat widget until after loading, and that same page drops to under two seconds. No rebuild, just cleanup. That is the kind of win most sites leave on the table.

FREQUENTLY ASKED

WEB · TECH · FAQ.

What exactly are Core Web Vitals?

Core Web Vitals are three numbers Google uses to measure user experience: LCP (speed at which the largest element loads, target under 2.5 seconds), INP (how fast the page responds to interaction, target under 200 milliseconds) and CLS (how much the layout shifts while loading, target under 0.1). They affect both your SEO position and your conversion.

What gives the most speed gain?

For most sites, images are the biggest culprit. Compressing to WebP or AVIF, serving the right dimensions and lazy-loading non-critical images often gives the biggest jump in LCP. After that comes minifying and deferring JavaScript. First measure with PageSpeed Insights and fix the heaviest problem first.

How do I measure my site's performance?

Start with Google PageSpeed Insights: it gives you scores on all Core Web Vitals plus concrete improvement points, with real user data where available. For deeper analysis use Chrome DevTools and Lighthouse, which show what happens during loading. Measure regularly, because every new feature or image can drag the score back down.

NEED A HAND

Ready for your next build.

Book an intro → Direct line to the founder · M. Tufan