Understand Core Web Vitals
Core Web Vitals in Optimizely Configured Commerce are a set of metrics that Google introduced to quantify the user experience on a webpage. They focus on loading performance, interactivity, and visual stability. The three primary metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Note
In March 2024, Google replaced First Input Delay (FID) with INP as the Core Web Vitals interactivity metric. While FID may still display in some tools, INP is the standard for assessing responsiveness.
Metric | What it measures | Good score |
|---|---|---|
Largest Contentful Paint (LCP) | How long it takes for the largest visual element (such as a banner or image) to display (load speed). | ≤ 2.5 seconds |
Interaction to Next Paint (INP) | How quickly your site responds to user inputs. | ≤ 200 milliseconds |
Cumulative Layout Shift (CLS) | How much elements shift unexpectedly as the page loads. | ≤ 0.1 |
Scoring
While Optimizely tries to make it possible to score well on Core Web Vitals, any customizations you have may affect the scores, and Optimizely is not responsible for all scenarios. You can track Core Web Vitals in multiple ways, and they can vary based on the defined parameters of the User Agent that comes to your site. You can find these metrics with Google's Search Console.
Although Core Web Vitals is tied to Search Engine Optimization (SEO) and your customer experience, the scoring is complex. Relying on the color and scores is not enough, and you should have someone with technical SEO abilities (such as your partner, a third-party marketing agency, or someone on-staff) analyze them and make suggestions. For example, you could have red scores but great SEO or green scores but poor SEO.
Additionally, real-world site traffic depends on the real-world score, based on the customer and site. For example, site performance can vary based on a user's device capabilities and network connections. If a target user is in a remote area with poor WiFi, you may want to consider lighter images instead of heavier content. The Core Web Vitals report looks at the prior 28 days, which may be too soon to determine overall performance improvements if attempting to measure results from recent improvements on real-world field data.
You can use tools such as Google's Lighthouse or PageSpeed Insights to help you get more insight into a specific URL. PageSpeed, for example, calculates the performance score based on the Lighthouse Scoring Calculator. It gives an example of how the weight or distribution of metrics and scoring can vary between different versions of the Lighthouse score.
Impact on user experience and SEO
These metrics are not constant; they change over time. You should monitor and continue to improve scores as traffic patterns and underlying technologies evolve.
Optimizely's role
Optimizely Configured Commerce is committed to improving Core Web Vital metrics and intends to continue making improvements to assist in maintaining a score of about 90 as a passing score. Optimizely monitors the base code from a Core Web Vitals view and is on the journey with you.
The Quarterly Commerce Roadmap often includes targeted Core Web Vitals performance improvements. Follow the short-term release notesshort-term release notes to stay up to date with current releases.
Customizations and their effects
While Optimizely provides a foundation to achieve high Core Web Vitals scores, you should note the impact your customizations can have. Custom scripts, third-party plugins, and non-optimized media can degrade performance. You should conduct regular audits and performance testing to ensure customizations do not adversely affect scores.
Options in Configured Commerce
Optimizely includes the following to help you improve your Core Web Vitals scores:
- Configurable SSR for all user agents – You can enable server-side rendering to improve page performance.
- API performance improvements – Optimizely has made improvements, such as enabling browser caching to reduce system load and updating the RetrievePageService to use database lookup for mapping a URL path to catalog data. Both can improve site performance.
- Code splitting to decrease the main bundle size – Optimizely has reduced the JavaScript execution time by splitting and loading the react-calendar and its dependencies dynamically (removed from the main public.js bundle).
Steps for improvement
- Regularly audit your site using tools like Google's Lighthouse or PageSpeed Insights to identify areas for improvement.
- Optimize images and media by using modern formats like WebP, compressing files, and employing lazy loading techniques.
- Minimize JavaScript and CSS, remove unused code, and use asynchronous loading to reduce render-blocking resources.
- Enhance server response times by using a Content Delivery Network (CDN) and optimizing server infrastructure.
- Use Optimizely's built-in tools and features designed to enhance Core Web Vitals, such as configurable server-side rendering, API performance improvements, and code splitting.
- Collaborate with Optimizely Support and community forums to stay informed about best practices and new features that can help you improve your Core Web Vitals scores.
- Continuously monitor your site's performance post-customization to ensure that changes positively impact Core Web Vitals. Use analytics to understand user behavior and environmental factors affecting site performance and iterate on optimizations based on data-driven insights.