Guide · 7 min read · Updated
Web performance and Core Web Vitals: where to start
Core Web Vitals are three metrics Google uses to measure real user experience: loading speed, interaction responsiveness and visual stability. This guide summarises what the metrics mean and where to start improving.
What do the three metrics measure?
- LCP (Largest Contentful Paint): how long it takes for the page's main content to appear. Good: 2.5 seconds or less.
- INP (Interaction to Next Paint): how quickly the page responds to user interactions. Good: 200 milliseconds or less.
- CLS (Cumulative Layout Shift): unexpected shifting of elements while the page loads. Good: 0.1 or less.
Evaluation uses the 75th percentile of real users, so a test on a single fast computer is not enough.
Measure first
Lab tools (such as Lighthouse) help find problems; real user data (CrUX, the field data in PageSpeed Insights) is what Google sees. Follow both and move forward by measuring the effect of each change.
Improving LCP
- Serve the main image at the right size and in a modern format (e.g. WebP/AVIF).
- Reduce or defer large JavaScript and CSS files that block the main content.
- Shorten server response time; serve the page from cache where possible.
- Make the main content arrive in the first HTML; content built later in the browser is delayed.
Improving INP
- Break up long-running JavaScript tasks.
- Avoid unnecessary re-rendering on interaction.
- Limit third-party scripts; every extra script can affect responsiveness.
Improving CLS
- Set width and height on images and videos.
- Reserve space for ads and embedded content.
- Choose the fallback font and display strategy carefully so content does not shift while fonts load.
Set a performance budget
Performance is not a job done once. Setting an upper limit on total file size and script count per page stops speed from silently degrading as new features are added.
Conclusion
VeriSet A.Ş. builds modern web applications together with performance and accessibility goals. For more, see our web platforms area page.
More guides
7 questions before starting an AI project
Most AI projects struggle not because of the model itself but because of questions left unanswered at the start. This guide covers seven questions to ask before writing code and why each one matters.
Read the guideData technologies · 6 min readHow to design a data pipeline
A data pipeline is a chain of automated steps that moves data reliably from source to target. A well-designed pipeline delivers the data that analyses and AI models need correctly, on time and in a traceable way.
Read the guideMobile technologies · 6 min readNative or cross-platform? Choosing the right approach for a mobile app
One of the first questions in mobile development is whether the app is built separately for each platform or from a single codebase. The right answer depends on your product's performance expectations, budget and how much it needs device features.
Read the guideInfrastructure · 6 min readMonolith or microservices? An architecture choice guide
Microservices are popular but not right for every project. The choice of architecture should be made by team size, product maturity and operational capacity. This guide summarises four common approaches and when each fits.
Read the guideR&D · 5 min readFrom prototype to product: how R&D work is run
The aim of R&D is to reduce uncertainty: to learn early and cheaply whether an idea will work. This guide summarises a way of working that starts from a question and reaches a product, along with common mistakes.
Read the guideHave an idea in this area?
Briefly describe your goal and where you are today, and we will take a look together.