Why website speed matters: Core Web Vitals in plain language

What are Core Web Vitals?

Core Web Vitals are three metrics that measure how real users experience a page: how fast it loads, how quickly it responds and how much it shifts while loading. Google uses them as part of its page experience signals.

LCP: when does the largest content appear?

Largest Contentful Paint is the time until the largest image or text block appears. A good LCP is under 2.5 seconds. Large uncompressed images, a slow server and render-blocking code make it worse.

INP: how quickly does the page respond?

Interaction to Next Paint is how long the page takes to respond visually when a user clicks a button or opens a menu. Under 200 milliseconds is considered good. Heavy JavaScript and many plugins raise INP.

CLS: does the page shift while loading?

Cumulative Layout Shift measures unexpected movement of content while the page loads. Text jumping down as you read or clicking the wrong button are signs of it. A good CLS is under 0.1. Giving images dimensions and reserving ad space fixes it.

Practical steps to speed up

For most sites, these steps make a big difference:

• Convert images to WebP or AVIF and load them at the right size.
• Use lazy-loading for images below the fold.
• Remove unused plugins and code.
• Preload fonts and limit how many you use.
• Use good hosting and a CDN.

Why mobile matters more

Google evaluates the mobile version of a site first, and a large share of visitors arrive on phones. A site that feels fast on desktop can be much slower on mobile networks and weaker devices. Always judge speed by mobile results and test on a real phone with mobile data.

Speed and conversion

Speed is not only an SEO topic. When a page loads slowly, visitors leave without waiting; forms, carts and booking steps are abandoned. On pages receiving ad traffic, slowness means part of the ad budget is wasted. A fast site is one of the most direct ways to win more customers from the same traffic.

Questions to ask your agency

When commissioning a new site, ask about speed:

• What is the mobile PageSpeed target and will it be measured before launch?
• Are images compressed and converted to modern formats automatically?
• How many plugins or third-party scripts will be used?
• How will hosting and caching be configured?
• Will speed be monitored regularly after launch?

How do you improve LCP?

The first step in improving LCP is to find out what the LCP element on the page is; on most pages it is the large image or heading block in the first screen. PageSpeed Insights shows this element in its report. If it is an image, make sure the browser discovers it as early as possible: do not delay it with lazy-loading, preload it if needed and give it high priority. Server response time is also part of LCP; slow hosting, missing caching or heavy database queries delay everything. Finally, reducing the CSS and JavaScript files that block rendering lets the main content paint sooner.

• Do not lazy-load the main image in the first screen.
• Prioritise the LCP image with preload and fetchpriority="high".
• Cut server response time with page caching and a CDN.
• Inline critical CSS and defer render-blocking scripts.
• Serve the main image at a size that fits the screen.

How do you improve INP?

INP replaced FID in March 2024 and is a broader measure: it looks at the response time of interactions throughout the visit, not just the first click. The main cause of poor INP is JavaScript that keeps the browser's main thread busy for long periods. If the browser is still finishing another task when the user clicks, the response is delayed. That is why removing unnecessary scripts, breaking long tasks into smaller pieces and loading third-party scripts such as chat widgets, ads or tracking codes with a delay are the most effective steps. Very large and complex page structures (DOM) also slow down how quickly the screen repaints after each interaction.

• Remove unused JavaScript and plugins.
• Break long tasks into smaller pieces.
• Load third-party scripts with a delay.
• Keep click handlers light and defer heavy work.
• Keep the number of elements and nesting on the page lean.

How do you fix CLS?

Most CLS problems come from the browser not knowing in advance how much space an element will take. Specifying width and height, or an aspect ratio, for images and videos reserves the space before they load. Reserve fixed space for ads, embedded videos, cookie notices and promotional banners as well, and avoid inserting new content above existing text. Fonts can also cause shifts: when a web font loads late, the size difference from the fallback font moves the text. A suitable font-display setting and a fallback font with similar metrics reduce this effect. In animations, using transform instead of position properties leaves the layout untouched.

• Give images and videos width and height or aspect-ratio.
• Reserve space for ads, embeds and notice banners.
• Do not insert new content above existing content.
• Preload web fonts and choose a suitable fallback font.
• Use transform for animations.

The difference between lab data and field data

PageSpeed Insights shows two kinds of results, and mixing them up is a common mistake. Lab data (Lighthouse) is a one-off test of the page under a specific device and network setting; it is ideal for finding problems and seeing the effect of changes immediately. Field data is real experience collected from Chrome users (the Chrome User Experience Report), and this is the data Google uses in its assessment. Field data covers the last 28 days and is based on the 75th percentile, which means the large majority of visits need a good experience. So an improvement may show up in a lab test right away but take several weeks to appear in the Search Console report. Low-traffic sites may have no field data at all; in that case lab results are your guide.

Images and speed: what we learned from presentation pages

The project pages on this site contain dozens of high-resolution presentation pages. To keep them fast, we export each page at a screen-appropriate width with compression, load thumbnails separately and lazy-load images outside the viewport. In large galleries such as E2 Grup İnşaat's 50-page logo presentation, this keeps the first screen fast and protects Core Web Vitals.

Frequently asked questions

See our web design service→