Website Speed Optimization: Core Web Vitals and the Metrics to Put in Your Acceptance Criteria
Open your own website on a phone, over mobile data, and count silently until the content appears. If you lose patience with your own site, your visitors closed the tab a long time ago.
Speed tends to be filed under “technical detail” in meetings, but it eats into two things at once: how search engines rate your pages, and how many people stay long enough to read them. This article breaks “the website is slow” into specific items you can discuss, prioritize, and sign off on.
What Core Web Vitals are
Core Web Vitals are a set of user-experience measurements published by Google. The design logic is refreshingly practical: instead of reporting server statistics, they simulate the three things an ordinary person actually notices when a page opens.
LCP: how long until the main content appears
LCP (Largest Contentful Paint) measures how long it takes for the largest block of content on the page to be drawn. To a visitor, this is simply “when do I get to see something”.
The usual culprits are large images above the fold, hero visuals generated by code, and pages that cannot be returned until the server has finished calculating.
INP: how long until a tap does something
INP (Interaction to Next Paint) measures how long it takes the screen to respond after a user taps or types.
A page that has appeared but does not react when pressed feels worse than a page that loads slowly. The main drag on this metric is too much code running in the background at the same time, leaving the browser too busy to acknowledge the tap.
CLS: does the layout jump around
CLS (Cumulative Layout Shift) measures how much the layout moves while content is loading. You are about to press a button, an advert or an image drops in and shoves the button sideways — that is CLS.
The most common cause is images, adverts, or embedded content loading without any space reserved for them in advance.
These three have to be read together. Google publishes recommended thresholds for each band, and those thresholds are adjusted as user behavior changes. In practice there is no need to memorize numbers — read the “good / needs improvement / poor” band your measurement tool reports, and defer to the latest official guidance.
Why pages get heavy
Websites are rarely slow on launch day. Speed is eroded by the things that get added a little at a time.
Images that were never processed. Uploading the original export straight out of a camera or a design file is the most common problem, and the easiest to fix. Compressed and converted to a more modern image format, the same visual is often an order of magnitude smaller with no difference the eye can detect. It is also worth confirming that images are served at different sizes for different devices, so a phone is not downloading a desktop-sized image.
Third-party scripts pile up. Analytics, advertising pixels, chat widgets, booking plugins, social embeds — every one of them is somebody else’s code, and its loading time is outside your control. The characteristic problem is that adding them is quick and nobody is ever responsible for removing them, so over time they accumulate into a long list.
Font files that are too large, or loaded the wrong way. Chinese font files are large to begin with, and loading several weights and styles simultaneously noticeably delays the moment text appears.
Plugins and packages stacking up. Every plugin installed on a content management system typically loads its own styles and code on every page, even pages that never use it.
Waiting on the server. If every page view requires querying large volumes of data in real time, or the server specification does not match the traffic, all the other optimization work is wasted — the browser is stuck waiting before it can even start.
How to read the measurement tools
You do not need to buy anything: the developer tools built into your browser plus Google’s free testing service are enough. What matters is how you read them.
- Always treat the mobile result as authoritative. Desktop scores usually look considerably better, but that is not the experience most of your visitors are having.
- Read lab data and real-user data separately. Use the first to find bottlenecks and compare before and after; use the second to confirm what real visitors are experiencing.
- Do not test only the homepage. The homepage is usually the most cared-for page on the site. What you actually need to test are your highest-traffic product pages, article pages, and form pages.
- The itemized list beats the score. The total score is for showing management; the useful part of the report is the list of specific problems underneath it.
The order to improve things in
When budget and time are limited, working in this order gives the best return:
| Priority | Task | Why it sits here |
|---|---|---|
| 1 | Compress images and convert formats | Small change, low risk, most visible effect |
| 2 | Audit and remove unused third-party scripts | Needs no development, only a decision |
| 3 | Reserve dimensions for images and embeds | Directly fixes layout shift |
| 4 | Adjust font loading and the number of weights | Affects when text appears |
| 5 | Defer loading of resources below the fold | Needs development, but the effect is reliable |
| 6 | Caching and server specification | Addresses the root cause, but costs need assessing |
| 7 | Architectural restructuring | Consider last; usually folded into a redesign |
Do the first three, then measure again. On many sites the score has already returned to an acceptable range once those three are done, and the rest can be scheduled as needed.
If you happen to be planning a redesign, performance should be handled as part of it rather than patched on afterwards — and a redesign carries a separate set of risks that need managing; see the Website Redesign SEO Checklist.
Three common misconceptions
“A more expensive server will make it fast.” A server upgrade only addresses waiting on the server side. It does nothing for delays caused by oversized images or too many scripts. Measure first, confirm which end the bottleneck is on, and then decide whether the money is worth spending.
“Just install a speed plugin.” Plugins of this kind generally handle caching and file compression, which genuinely helps — but they cannot remove third-party tracking code you no longer need, and they cannot shrink uncompressed original image files. They are an aid, not a substitute.
“The homepage scores well, so we are fine.” Visitors arriving from search usually land on an interior page. The pages that deserve optimization are the ones carrying concentrated traffic and a conversion job.
Talking to vendors: put speed into acceptance
“The website should be fast” cannot be signed off. Rewriting it as a testable condition is what makes it meaningful:
- Specify the measurement conditions: which tool, in mobile mode, and which representative pages (homepage, main product or service page, article page, form page).
- Specify the acceptance band: require all three metrics to land in “good” according to the tool’s current banding, rather than agreeing a fixed number that will go out of date.
- List the baseline requirements: images compressed and offered in multiple sizes, dimensions reserved for images and embeds, below-the-fold resources deferred, unused styles and code removed.
- Assign responsibility for third-party scripts: when marketing wants to add tracking code later, who assesses it and who is responsible for removing it.
- Agree when measurement happens: once before launch, and again after an interval post-launch (real-user data needs time to accumulate).
Putting these clauses into the acceptance section of a contract costs almost nothing, and it heads off the “fast on launch day, slow three months later” scenario. For how to write the division of responsibility during the maintenance phase, see what website maintenance actually covers.
NETVANA’s software development process includes cross-browser compatibility and performance testing in the testing and launch phase. During development we work in two-week sprints and deliver a working demo at the end of each cycle, so performance problems surface early rather than the week before acceptance.
Two things to remember alongside speed
Speed is only part of what “page quality” means. Two further things are just as easily overlooked, and affect the real experience just as much.
The first is accessibility. Insufficient contrast, interfaces that only work with a mouse, and images without alternative text shut a proportion of your visitors out at the door; see the web accessibility guide for businesses.
The second is the content itself. However fast the page is, it will not hold anyone if it does not answer the question they came with. For an approach to planning content, see how to run a brand blog.
Website speed is not a dark art. It is a sequence of tasks that can be listed, ordered, and signed off. You do not need to understand every technical term, but you do need to know what to ask for.
If your site’s speed refuses to improve, or you are assessing a redesign and want performance conditions written into the specification, talk to NETVANA about your website. NETVANA’s software services are quoted after an initial consultation rather than sold as fixed packages; for what each service includes and delivers, see the software services overview.
Further reading: for where the money goes during the build phase, see how website costs are calculated. For how maintenance responsibility is divided after launch, see what website maintenance actually covers. And if you are preparing to redesign an existing site, start with the Website Redesign SEO Checklist. For the hosting choice that caps your page speed, see How to Choose Web Hosting. For the rest of the technical checklist speed belongs to, see The Technical SEO Checklist; and for putting these metrics into the launch acceptance list, see The Website Launch Checklist. Speed optimizations that work on a normal day may not survive a traffic spike; see Preparing for a Campaign Traffic Spike.