Core Web Vitals: How to Make Your Singapore Website Faster

Core Web Vitals are three specific metrics Google uses to measure real-world user experience on your website. They replaced a raft of vague performance signals with something concrete and measurable. As of 2026, the three metrics are:

Largest Contentful Paint (LCP) — Loading speed

LCP measures how long it takes for the biggest visible element on your page to fully load. That's usually the hero image, a large heading, or a featured video thumbnail. Google considers anything under 2.5 seconds to be good, between 2.5 and 4 seconds as needing improvement, and anything over 4 seconds as poor.

Think of it this way: LCP is the moment your visitor stops staring at a blank or half-loaded screen and actually sees your content. The faster that happens, the less likely they are to hit the back button.

Interaction to Next Paint (INP) — Responsiveness

INP replaced the older First Input Delay metric in March 2024, and it's a significant upgrade. Instead of only measuring the first interaction, INP tracks the responsiveness of every interaction throughout a visit — every tap, click, and keypress. The target is under 200 milliseconds.

INP is the most commonly failed Core Web Vital in 2026, with 43% of websites exceeding the 200ms threshold. If your site feels sluggish when someone opens a dropdown, fills in a form, or clicks a button, that's an INP problem — and Google is watching.

Cumulative Layout Shift (CLS) — Visual stability

CLS measures how much your page layout jumps around while it loads. You've experienced this: you're about to tap a link, and suddenly an image loads above it, pushing everything down. You tap the wrong thing. Frustrating, isn't it? Google thinks so too. The target is a CLS score below 0.1.

All three metrics are assessed at the 75th percentile of real visitor data from the Chrome User Experience Report. That means Google isn't testing your site on a high-end laptop over fibre broadband — it's measuring how real people experience it on real devices and real connections.

Before you can fix anything, you need to know where you stand. There are three tools we recommend, each with a different purpose:

Google PageSpeed Insights

The simplest starting point. Enter your URL at pagespeed.web.dev and you'll get two sets of data: field data (real user measurements from the Chrome User Experience Report) and lab data (simulated tests). Field data is what Google actually uses for rankings, so pay more attention to that section. If you see a green "passed" badge for Core Web Vitals at the top, your site meets all three thresholds.

Google Search Console

Search Console's Core Web Vitals report gives you a site-wide view over time. It groups your URLs into "Good," "Needs Improvement," and "Poor" categories for both mobile and desktop. This is where you spot trends — if a recent update caused a regression, you'll see it here first. Every Singapore business with a website should have Search Console set up. It's free and takes five minutes.

Chrome DevTools Lighthouse

For a deep dive, open your site in Chrome, right-click, choose "Inspect," and navigate to the Lighthouse tab. Run a performance audit and you'll get specific, prioritised recommendations: which images to compress, which scripts to defer, which CSS is render-blocking. This is the tool we use daily when building and optimising client websites.

A word of caution: lab scores and field scores can differ significantly. Your development machine is probably faster than your average visitor's phone. Always prioritise real-user data from PageSpeed Insights or Search Console over synthetic lab tests.

LCP failures almost always trace back to one of four root causes. Fix these, and your loading speed will improve dramatically.

Optimise your images

The hero image is typically the LCP element on most pages. If it's a 2MB JPEG, your LCP will suffer regardless of everything else. Convert images to WebP or AVIF format — AVIF alone can reduce file sizes by 30–50% compared to JPEG with no visible quality loss. Serve responsive images using the srcset attribute so mobile visitors aren't downloading desktop-sized files.

Critically, preload your LCP image. Adding <link rel="preload" as="image" href="/hero.webp"> in your document head tells the browser to start fetching it immediately, in parallel with CSS and JavaScript. This alone can shave 200–800 milliseconds off your LCP.

Fix your fonts

Custom web fonts are a common LCP killer. Every font weight and style is a separate file download, and by default, the browser hides text until the font loads — a phenomenon called "flash of invisible text." Use font-display: swap to show a fallback font instantly while the custom font loads in the background. Better yet, self-host your fonts instead of loading them from Google Fonts, eliminating an extra DNS lookup and connection overhead.

Inline critical CSS

External stylesheets are render-blocking: the browser won't paint anything until they're downloaded and parsed. Extract the CSS needed for above-the-fold content and inline it directly in the <head> of your HTML. The rest can load asynchronously. Build tools like Astro (which we use for our client websites) handle much of this automatically.

Improve server response time

If your server takes 2 seconds to respond before it even starts sending HTML, you've already used up most of your LCP budget. Use a CDN to serve content from edge nodes closer to your visitors. For Singapore-focused sites, ensure your hosting has a presence in the Asia-Pacific region. Static site generators have a natural advantage here — pre-built HTML pages can be served in under 50 milliseconds from a CDN, compared to 500–2,000 milliseconds for dynamically generated WordPress pages.

INP measures three phases of every interaction: input delay (how long before your code starts running), processing time (how long your code takes), and presentation delay (how long before the screen updates). You need to optimise all three.

Break up long tasks

The browser runs JavaScript on a single main thread. If a script takes 300 milliseconds to execute, nothing else can happen during that time — including responding to user interactions. The fix is to break long tasks into smaller chunks. Modern browsers support scheduler.yield(), which gives the browser a chance to process pending interactions between task chunks. This is the single most effective technique for improving INP in 2026.

Defer non-critical JavaScript

That analytics script, that chatbot widget, that social media embed — do they all need to load and execute before your visitor can interact with the page? Almost certainly not. Use defer or async attributes on script tags, and load third-party scripts after the page becomes interactive. We routinely audit client sites and find 5–10 third-party scripts competing for main thread time, each adding 50–100 milliseconds of delay.

Reduce DOM complexity

A page with 5,000 DOM nodes takes significantly longer to update than one with 1,500. Every interaction that triggers a layout recalculation will be slower on a bloated DOM. Keep your HTML lean: avoid deeply nested wrapper <div> elements, remove hidden content that isn't needed, and use content-visibility: auto for sections below the fold. This tells the browser to skip rendering off-screen content entirely until the user scrolls to it.

If your site runs on a heavy page builder (many WordPress themes fall into this category), this is often the hardest problem to solve without a fundamental redesign.

CLS failures are uniquely frustrating because they feel like the website is broken, even if it technically works. Here's how to eliminate them.

Always set image and video dimensions

Every <img>, <video>, and <iframe> element needs explicit width and height attributes, or a CSS aspect-ratio property. Without them, the browser doesn't know how much space to reserve, so it renders the page, then shoves everything around once the media loads. This is the number-one cause of layout shift on the sites we audit.

Handle font loading properly

When a custom font loads and replaces the fallback, text can reflow — changing line breaks, paragraph heights, and button sizes. The fix is to match your fallback font metrics as closely as possible to your custom font. CSS @font-face override descriptors (ascent-override, descent-override, line-gap-override) let you fine-tune the fallback so the swap is virtually invisible.

Reserve space for dynamic content

Anything injected into the page after initial load — cookie banners, newsletter popups, ad slots, lazy-loaded content — can cause layout shifts if space isn't reserved. Use min-height on containers where dynamic content will appear. Cookie and consent banners should use position: fixed or position: sticky so they overlay the page rather than pushing content down. For ad slots, set explicit dimensions even before the ad loads.

Be careful with web fonts in headings

Large headings are particularly sensitive to font swaps because even a small difference in character width gets multiplied across fewer characters per line. A heading that wraps to three lines with the fallback font but two lines with the custom font causes a noticeable layout shift. Test your headings at various viewport widths and ensure fallback metrics are calibrated for your heading sizes, not just body text.

Everything above is technical, so let's bring it back to what matters: money. The research is unambiguous.

A one-second delay in mobile load times can reduce conversions by up to 20%. A two-second delay increases bounce rates by 103%. If your page takes longer than three seconds to load, 53% of mobile visitors will leave before seeing anything. In Singapore, where there are over 10 million active mobile connections and users expect instant results, those numbers hit hard.

Sites that pass all three Core Web Vitals thresholds experience a 24% lower bounce rate compared to those that fail. That's not a marginal improvement — that's the difference between a website that generates leads and one that haemorrhages visitors.

We saw this play out directly with Perfect Style Salon. Their original site loaded in 5.8 seconds on mobile. After our redesign, it loaded in 2.4 seconds. But speed wasn't the only thing that improved:

• Online enquiries increased 180% within three months
• Organic traffic grew 250% as Google rewarded the faster, more stable experience
• Mobile usability score jumped from 62 to 96 out of 100

Every millisecond shaved off load time translated into real business growth. And Perfect Style wasn't an outlier — we see similar patterns across every SEO and performance project we deliver. Speed is the foundation that makes every other marketing effort more effective. Your ads convert better when the landing page loads instantly. Your content ranks higher when Google trusts the user experience. Your brand feels more credible when the site responds without hesitation.

If your website scores below 50 on mobile PageSpeed, you're leaving conversions on the table right now. The fix doesn't have to be complicated — but it does have to happen.